Angular应用中从自定义服务触发Service Worker通知显示

ng add @angular/pwa --project your-project-name

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ServiceWorkerInitializer {
  constructor() {
    this.registerServiceWorker();
  }

  private registerServiceWorker(): void {
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('ngsw-worker.js') // 对于Angular PWA，通常是ngsw-worker.js
        .then(registration => {
          console.log('Service Worker 注册成功:', registration);
        })
        .catch(error => {
          console.error('Service Worker 注册失败:', error);
        });
    }
  }
}

// 这是Service Worker文件 (例如 sw.js 或 ngsw-worker.js)
// 注意：对于ngsw-worker.js，你可能需要通过自定义脚本注入或扩展其功能

// 监听通知点击事件
self.addEventListener('notificationclick', (event) => {
  event.notification.close(); // 关闭通知

  // 获取通知中包含的数据
  const primaryKey = event.notification.data ? event.notification.data.primaryKey : '';

  event.waitUntil(
    clients.matchAll({ type: 'window' }).then((clientList) => {
      for (const client of clientList) {
        // 如果有匹配的客户端窗口，聚焦它并发送消息
        if (client.url === '/' && 'focus' in client) { // 假设你的应用根路径是'/'
          return client.focus();
        }
      }
      // 如果没有打开的客户端窗口，则打开一个新窗口
      if (clients.openWindow) {
        return clients.openWindow('/some-path?id=' + primaryKey); // 导航到特定路径
      }
    })
  );
});

// 如果需要处理服务器推送，则添加 'push' 事件监听器
// self.addEventListener('push', (event) => {
//   const data = event.data.json();
//   console.log('Push received:', data);
//   const title = data.title || '新消息';
//   const options = {
//     body: data.body || '您有一条新消息。',
//     icon: data.icon || '/assets/icons/icon-96x96.png',
//     data: data.data || {}
//   };
//   event.waitUntil(self.registration.showNotification(title, options));
// });

ng generate service notification

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class NotificationService {

  constructor() { }

  /**
   * 请求通知权限并显示通知。
   * 此方法将通过Service Worker显示通知，而不是直接由浏览器显示。
   *
   * @param title 通知标题
   * @param options 通知选项，如body、icon、data等
   */
  public async requestAndShowNotification(title: string, options?: NotificationOptions): Promise<void> {
    // 1. 检查浏览器是否支持Service Worker和Notification API
    if (!('serviceWorker' in navigator) || !('Notification' in window)) {
      console.warn('当前浏览器不支持Service Worker或Notification API。');
      return;
    }

    // 2. 请求通知权限
    const permission = await Notification.requestPermission();

    if (permission === 'granted') {
      // 3. 确保Service Worker已就绪
      try {
        const registration = await navigator.serviceWorker.ready;
        // 4. 通过Service Worker显示通知
        await registration.showNotification(title, options);
        console.log('通知已通过Service Worker显示。');
      } catch (error) {
        console.error('获取Service Worker注册或显示通知失败:', error);
      }
    } else {
      console.warn('用户拒绝了通知权限。');
    }
  }

  /**
   * 触发一个测试通知的示例方法。
   */
  public triggerTestNotification(): void {
    this.requestAndShowNotification(
      '来自Angular服务的通知',
      {
        body: '这是一条通过Service Worker发送的测试通知。',
        icon: 'assets/icons/icon-72x72.png', // 替换为你的应用图标路径
        vibrate: [200, 100, 200], // 震动模式
        data: { // 可选：传递自定义数据，可在notificationclick事件中获取
          primaryKey: 1,
          url: '/messages/123'
        }
      }
    );
  }
}

import { Component } from '@angular/core';
import { NotificationService } from './notification.service'; // 确保路径正确

@Component({
  selector: 'app-root',
  template: `
    <h1>Angular Service Worker 通知示例</h1>
    <button (click)="sendNotification()">发送测试通知</button>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-notifications';

  constructor(private notificationService: NotificationService) {}

  sendNotification(): void {
    this.notificationService.triggerTestNotification();
  }
}