Angular中从自定义服务触发Service Worker推送通知

本文详细介绍了如何在angular应用中通过自定义服务触发service worker的推送通知。内容涵盖service worker的注册、推送通知的实现、angular自定义服务的创建，以及如何利用`navigator.serviceworker`对象与service worker进行通信，最终通过`shownotification()`方法显示通知。文章还强调了权限管理、用户同意及不同平台兼容性等关键注意事项，旨在提供一套完整的专业教程。

在现代Web应用中，推送通知是增强用户参与度和提供实时信息的重要手段。Angular应用通常结合Service Worker实现离线能力和推送通知。本文将深入探讨如何在Angular的自定义服务中，以编程方式触发Service Worker的推送通知事件，从而实现更灵活的通知管理。

1. Service Worker基础与注册

Service Worker是一个在浏览器后台运行的脚本，独立于网页生命周期，能够拦截网络请求、缓存资源并处理推送通知。在Angular应用中，Service Worker的注册通常有两种方式：

• 使用Angular Service Worker模块： 这是推荐的方式。通过@angular/pwa包和ngsw-config.json配置文件，Angular CLI会自动生成并注册Service Worker。

  // ngsw-config.json 示例
  {
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
  {
  "name": "app",
  "installMode": "prefetch",
  "resources": {
  "files": [
  "/favicon.ico",
  "/index.html",
  "/*.css",
  "/*.js"
  ]
  }
  },
  {
  "name": "assets",
  "installMode": "lazy",
  "updateMode": "prefetch",
  "resources": {
  "files": [
  "/assets/**",
  "/*.(png|jpg|jpeg|gif|webp|svg|woff|woff2|cur|ani)"
  ]
  }
  }
  ]
  }

  在app.module.ts中引入ServiceWorkerModule：

  import { ServiceWorkerModule } from '@angular/service-worker';
  import { environment } from '../environments/environment';
  @NgModule({
  imports: [
  // ...
  ServiceWorkerModule.register('ngsw-worker.js', {
  enabled: environment.production,
  // Register the ServiceWorker as soon as the application is stable
  // or after 30 seconds (whichever comes first).
  registrationStrategy: 'registerWhenStable:30000'
  })
  ],
  // ...
  })
  export class AppModule { }

• 手动注册Service Worker： 如果不使用Angular PWA模块，可以在main.ts或其他适当位置手动注册Service Worker。

  // main.ts 或其他初始化文件
  if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
  .then(registration => {
  console.log('Service Worker 注册成功:', registration);
  })
  .catch(error => {
  console.error('Service Worker 注册失败:', error);
  });
  }

  请确保你的Service Worker文件（如sw.js或ngsw-worker.js）位于正确的路径。

2. 实现推送通知处理

Service Worker需要能够处理推送事件并显示通知。虽然本文的重点是从Angular服务触发通知，但Service Worker中的基础处理逻辑是前提。在你的sw.js（或ngsw-worker.js，如果你扩展它）中，通常会监听push和notificationclick事件。

// sw.js 示例 (简化版，仅用于演示)
self.addEventListener('push', function(event) {
const data = event.data ? event.data.json() : {};
const title = data.title || '默认标题';
const options = {
body: data.body || '这是默认通知内容。',
icon: data.icon || '/assets/icons/icon-96x96.png',
data: data.url // 可用于点击通知后跳转
};
event.waitUntil(
self.registration.showNotification(title, options)
);
});
self.addEventListener('notificationclick', function(event) {
event.notification.close(); // 关闭通知
// 点击通知后的处理逻辑
if (event.action === 'explore') {
// 处理特定操作
} else {
// 默认行为：打开或聚焦窗口
event.waitUntil(
clients.openWindow(event.notification.data || '/')
);
}
});

注意： 当从前端Angular服务调用registration.showNotification()时，它实际上是在Service Worker的上下文之外触发了一个通知显示请求，而不是通过Service Worker的push事件。registration.showNotification()是ServiceWorkerRegistration接口的一个方法，它允许当前页面（或Service Worker本身）直接显示通知。

3. 创建Angular自定义服务

为了封装通知逻辑并使其在整个应用中可重用，我们将创建一个Angular服务。

// src/app/services/notification.service.ts
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class NotificationService {
constructor() { }
/**
* 检查浏览器是否支持Service Worker和通知API。
* @returns {boolean} 如果支持，则返回true。
*/
public isSupported(): boolean {
return 'serviceWorker' in navigator && 'Notification' in window;
}
/**
* 请求用户通知权限。
* @returns {Promise<NotificationPermission>} 返回权限状态。
*/
public async requestNotificationPermission(): Promise<NotificationPermission> {
if (!this.isSupported()) {
console.warn('浏览器不支持Service Worker或通知API。');
return 'denied'; // 假设不支持即为拒绝
}
return Notification.requestPermission();
}
/**
* 从Service Worker显示一个通知。
* @param title 通知标题。
* @param options 通知选项，如body, icon, data等。
* @returns {Promise<void>}
*/
public async showServiceWorkerNotification(title: string, options?: NotificationOptions): Promise<void> {
if (!this.isSupported()) {
console.warn('浏览器不支持Service Worker或通知API。');
return;
}
const permission = await this.requestNotificationPermission();
if (permission === 'granted') {
try {
// 等待Service Worker就绪
const registration = await navigator.serviceWorker.ready;
// 使用ServiceWorkerRegistration对象显示通知
await registration.showNotification(title, options);
console.log('通知已成功显示。');
} catch (error) {
console.error('显示通知时发生错误:', error);
}
} else {
console.warn('用户拒绝了通知权限，无法显示通知。');
}
}
}

4. 在服务中与Service Worker通信

在NotificationService中，我们使用了navigator.serviceWorker.ready来获取ServiceWorkerRegistration对象。

• navigator.serviceWorker：这是一个全局对象，提供了访问Service Worker API的入口。
• navigator.serviceWorker.ready：这是一个Promise，当Service Worker处于活跃状态时（即已注册、安装并激活），它会解析为ServiceWorkerRegistration对象。这是确保Service Worker准备好接收指令的关键。
• registration.showNotification(title, options)：这是ServiceWorkerRegistration对象的一个方法，用于在用户的设备上显示一个通知。它会利用Service Worker的能力来管理通知的生命周期，即使页面关闭，通知也能保持。

5. 使用自定义服务触发通知

现在，你可以在Angular组件或任何其他服务中注入并使用NotificationService来触发通知。

// src/app/app.component.ts (或任何其他组件/服务)
import { Component } from '@angular/core';
import { NotificationService } from './services/notification.service';
@Component({
selector: 'app-root',
template: `
<h1>Angular Service Worker 通知示例</h1>
<button (click)="triggerNotification()">触发通知</button>
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private notificationService: NotificationService) {}
async triggerNotification() {
if (this.notificationService.isSupported()) {
const title = '新消息！';
const options: NotificationOptions = {
body: '您有一条来自Angular应用的最新消息。',
icon: '/assets/icons/icon-192x192.png',
badge: '/assets/icons/badge.png', // 某些系统显示的小图标
data: {
url: '/messages' // 点击通知后跳转的URL
},
actions: [
{
action: 'view-message',
title: '查看消息',
icon: '/assets/icons/view-icon.png'
}
]
};
await this.notificationService.showServiceWorkerNotification(title, options);
} else {
alert('您的浏览器不支持通知或Service Worker。');
}
}
}

注意事项

1. 权限管理： 在显示通知之前，必须先获得用户的通知权限。Notification.requestPermission()会弹出权限请求。用户可以选择“允许”、“拒绝”或“忽略”。
2. 用户体验： 不要滥用通知。频繁或不相关的通知会打扰用户，导致他们拒绝权限。
3. 平台兼容性：
   • iOS/iPadOS： Safari浏览器在iOS/iPadOS上目前不支持Web Push API，这意味着通过Service Worker发送的推送通知（即使是registration.showNotification）也无法正常工作。用户必须将PWA添加到主屏幕，并且通知功能通常受限于Home Screen Web App的特定行为。这是Web开发中一个重要的限制。
   • 桌面和Android： 在桌面浏览器和Android设备上，Service Worker通知功能通常运行良好。
4. 数据载荷： options对象中的data字段可以用来传递额外的信息，这些信息可以在用户点击通知时被Service Worker的notificationclick事件处理程序访问。
5. Service Worker生命周期： 确保Service Worker已正确注册、安装并激活。如果Service Worker尚未就绪，navigator.serviceWorker.ready将等待其就绪。
6. 错误处理： 始终添加try-catch块来处理可能发生的错误，例如网络问题或权限被拒绝。

总结

通过上述步骤，我们可以在Angular的自定义服务中优雅地管理和触发Service Worker的推送通知。这种方法不仅提供了良好的代码组织，还利用了Service Worker的强大功能，确保通知能够可靠地发送和显示。开发者在实现过程中应充分考虑权限、用户体验和平台兼容性，以提供最佳的用户通知体验。