本教程详细阐述如何在Angular应用中通过自定义服务触发Service Worker推送通知。内容涵盖Service Worker的注册、权限请求、与Service Worker的通信机制，并通过具体代码示例演示如何从Angular服务中调用showNotification()方法，从而实现客户端发起的通知显示。文章还强调了用户权限管理和跨浏览器兼容性等关键注意事项。
1. Service Worker与通知概述
Service Worker是浏览器在后台运行的脚本，独立于网页生命周期，能够拦截网络请求、缓存资源，并支持推送通知等功能。在Angular应用中，Service Worker常用于构建渐进式Web应用（PWA），提供离线体验和消息推送能力。本教程将聚焦于如何从Angular应用的服务层，主动触发Service Worker来显示通知。
2. 准备工作：Service Worker的注册
在Angular应用中，Service Worker的注册是实现通知功能的前提。通常有以下两种推荐的方式：
-
使用Angular CLI和@angular/pwa: 这是推荐的方式，尤其适用于构建PWA。通过ng add @angular/pwa命令，Angular CLI会自动配置Service Worker（生成ngsw-config.json和ngsw-worker.js），并在app.module.ts中注册ServiceWorkerModule。
// src/app/app.module.ts import { ServiceWorkerModule } from '@angular/service-worker'; import { environment } from '../environments/environment'; import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production, // Service Worker会在应用稳定后或30秒内（以先到者为准）注册 registrationStrategy: 'registerWhenStable:30000' }) ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } -
手动注册Service Worker: 如果你不使用Angular PWA模块，或者有特定的Service Worker配置需求，可以在main.ts或某个初始化脚本中手动注册Service Worker。
// src/main.ts 或其他初始化脚本 import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; if (environment.production) { enableProdMode(); } platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.error(err)); // 手动注册 Service Worker if ('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker.register('/sw.js') .then(registration => console.log('Service Worker registered: ', registration)) .catch(err => console.error('Service Worker registration failed: ', err)); }); }请确保你的sw.js文件位于应用的根目录或可访问的路径。
3. 实现通知处理逻辑（Service Worker端）
虽然本教程侧重于从客户端直接触发通知，但理解Service Worker如何处理通知是重要的。对于由服务器发起的Web Push通知，Service Worker会监听push事件。而客户端直接调用的showNotification()方法，则直接由浏览器通过Service Worker显示。
一个基本的sw.js文件可能包含以下内容来处理服务器推送事件（如果需要服务器推送功能）：
// sw.js
self.addEventListener('push', (event) => {
const data = event.data ? event.data.json() : { title: '默认标题', body: '默认内容' };
const options = {
body: data.body,
icon: '/assets/icons/icon-96x96.png', // 可选：通知图标路径
vibrate: [100, 50, 100], // 可选：震动模式
data: {
dateOfArrival: Date.now(),
primaryKey: '2'
}
};
event.waitUntil(
self.registration.showNotification(data.title, options)
);
});
self.addEventListener('notificationclick', (event) => {
event.notification.close(); // 关闭通知
// 可选：处理通知点击事件，例如打开特定URL或聚焦到现有窗口
// event.waitUntil(clients.openWindow('https://example.com'));
});对于客户端直接调用showNotification()，Service Worker本身不需要额外的push事件监听器，因为通知是由客户端直接通过ServiceWorkerRegistration对象发起的。
4. 创建自定义Angular服务以触发通知
接下来，我们将在Angular应用中创建一个服务，封装与Service Worker交互的逻辑，包括请求权限和显示通知。
// src/app/notification.service.ts
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class NotificationService {
constructor() { }
/**
* 检查浏览器是否支持通知API，并请求通知权限。
* @returns Promise 返回权限状态 ('granted', 'denied', 'default')。
*/
public async requestNotificationPermission(): Promise {
if (!('Notification' in window)) {
console.warn('当前浏览器不支持桌面通知API。');
return 'denied'; // 浏览器不支持通知
}
// 请求权限，用户会看到浏览器弹窗
const permission = await Notification.requestPermission();
console.log('通知权限请求结果:', permission);
return permission;
}
/**
* 通过Service Worker显示通知。
* @param title 通知标题。
* @param options 可选的通知配置对象，例如body, icon, vibrate, data等。
*/
public async showServiceWorkerNotification(title: string, options?: NotificationOptions): Promise {
// 检查Service Worker支持
if (!('serviceWorker' in navigator)) {
console.error('当前浏览器不支持Service Worker。');
return;
}
// 检查通知权限
const permission = Notification.permission;
if (permission === 'denied') {
console.warn('用户已拒绝通知权限，无法显示通知。');
return;
}
if (permission === 'default') {
console.warn('通知权限尚未被授予，请先请求权限。');
// 可以选择在此处再次请求权限，或者让用户手动触发请求
const newPermission = await this.requestNotificationPermission();
if (newPermission !== 'granted') {
console.warn('通知权限未成功授予，无法显示通知。');
return;
}
}
try {
// 等待Service Worker就绪并获取其注册对象
const registration = await navigator.serviceWorker.ready;
// 调用showNotification方法显示通知
await registration.showNotification(title, options);
console.log('通过Service Worker成功显示通知。');
} catch (error) {
console.error('通过Service Worker显示通知失败:', error);
}
}
/**
* 获取当前通知权限状态。
* @returns NotificationPermission 返回权限状态 ('granted', 'denied', 'default')。
*/
public getNotificationPermissionStatus(): NotificationPermission {
if (!('Notification' in window)) {
return 'denied'; // 浏览器不支持
}
return Notification.permission;
}
} 5. 在组件中使用通知服务
在你的Angular组件中，可以注入NotificationService并调用其方法来触发通知。
// src/app/app.component.ts
import { Component, OnInit } from '@angular/core';
import { NotificationService } from './notification.service';
@Component({
selector: 'app-root',
template: `
Angular Service Worker 通知示例
当前通知权限状态：{{ permissionStatus }}
`,
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
permissionStatus: NotificationPermission = 'default';
constructor(private notificationService: NotificationService) {}
ngOnInit(): void {
// 组件初始化时获取当前权限状态
this.permissionStatus = this.notificationService.getNotificationPermissionStatus();
}
/**
* 点击按钮请求通知权限
*/
async requestPermission(): 
