Angular应用中通过自定义服务调用Service Worker推送通知

// 在应用启动时注册 Service Worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js') // 假设您的 Service Worker 文件名为 sw.js
    .then(registration => console.log('Service Worker 注册成功:', registration))
    .catch(error => console.error('Service Worker 注册失败:', error));
}

// sw.js
self.addEventListener('install', (event) => {
  console.log('Service Worker: 安装');
  self.skipWaiting(); // 强制新的 Service Worker 立即激活
});

self.addEventListener('activate', (event) => {
  console.log('Service Worker: 激活');
  event.waitUntil(clients.claim()); // 确保 Service Worker 控制所有客户端
});

// 虽然本文侧重于客户端触发通知，但为完整性考虑，这里展示了处理服务器推送的示例
self.addEventListener('push', (event) => {
  const data = event.data ? event.data.json() : { title: '默认标题', body: '默认消息' };
  const options = {
    body: data.body,
    icon: 'assets/icons/icon-192x192.png', // 替换为您的图标路径
    vibrate: [100, 50, 100],
    data: {
      url: data.url || '/' // 可选：通知点击后跳转的URL
    }
  };
  event.waitUntil(
    self.registration.showNotification(data.title, options)
  );
});

// 处理用户点击通知事件
self.addEventListener('notificationclick', (event) => {
  event.notification.close(); // 关闭通知
  event.waitUntil(
    clients.matchAll({ type: 'window' }).then((clientList) => {
      const clickedClient = clientList.find(client => client.url.includes(event.notification.data.url) && 'focus' in client);
      if (clickedClient) {
        clickedClient.focus(); // 如果页面已打开，则聚焦
      } else {
        clients.openWindow(event.notification.data.url || '/'); // 否则打开新页面
      }
    })
  );
});

ng generate service notification

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

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

  constructor() { }

  /**
   * 检查浏览器是否支持通知和Service Worker
   * @returns {boolean} 如果支持则返回 true，否则返回 false
   */
  public isSupported(): boolean {
    return 'Notification' in window && 'serviceWorker' in navigator;
  }

  /**
   * 请求通知权限并显示本地通知
   * @param title 通知标题
   * @param options 通知选项 (如 body, icon, data 等)
   * @returns {Promise<void>}
   */
  public async showLocalNotification(title: string, options?: NotificationOptions): Promise<void> {
    if (!this.isSupported()) {
      console.warn('浏览器不支持通知或Service Worker。');
      return;
    }

    try {
      // 1. 请求用户通知权限
      const permission = await Notification.requestPermission();

      if (permission === 'granted') {
        // 2. 获取 Service Worker 注册对象
        const registration = await navigator.serviceWorker.ready;

        // 3. 通过 Service Worker 注册对象显示通知
        await registration.showNotification(title, options);
        console.log('通知已通过 Service Worker 显示。');
      } else {
        console.warn('用户拒绝了通知权限。');
      }
    } catch (error) {
      console.error('显示通知时发生错误:', error);
    }
  }

  /**
   * (可选) 订阅真实的 Web Push 通知，需要后端支持
   * @returns {Promise<PushSubscription | null>}
   */
  public async subscribeToPushNotifications(): Promise<PushSubscription | null> {
    if (!this.isSupported()) {
      console.warn('浏览器不支持通知或Service Worker。');
      return null;
    }

    try {
      const permission = await Notification.requestPermission();
      if (permission === 'granted') {
        const registration = await navigator.serviceWorker.ready;
        const subscription = await registration.pushManager.subscribe({
          userVisibleOnly: true, // 必须为 true
          applicationServerKey: this.urlBase64ToUint8Array('YOUR_VAPID_PUBLIC_KEY') // 替换为您的VAPID公钥
        });
        console.log('用户已订阅推送通知:', subscription);
        // 通常会将 subscription 对象发送到您的后端服务器
        return subscription;
      } else {
        console.warn('用户拒绝了通知权限，无法订阅。');
        return null;
      }
    } catch (error) {
      console.error('订阅推送通知时发生错误:', error);
      return null;
    }
  }

  // 辅助函数：将Base64字符串转换为Uint8Array (VAPID公钥需要)
  private urlBase64ToUint8Array(base64String: string): Uint8Array {
    const padding = '='.repeat((4 - base64String.length % 4) % 4);
    const base64 = (base64String + padding)
      .replace(/\-/g, '+')
      .replace(/_/g, '/');

    const rawData = window.atob(base64);
    const outputArray = new Uint8Array(rawData.length);

    for (let i = 0; i < rawData.length; ++i) {
      outputArray[i] = rawData.charCodeAt(i);
    }
    return outputArray;
  }
}

import { Component } from '@angular/core';
import { NotificationService } from './notification.service'; // 调整路径

@Component({
  selector: 'app-home',
  template: `
    <h2>通知示例</h2>
    <button (click)="triggerLocalNotification()">触发本地通知</button>
    <button (click)="subscribeToPush()">订阅推送通知</button>
  `
})
export class HomeComponent {

  constructor(private notificationService: NotificationService) { }

  async triggerLocalNotification() {
    await this.notificationService.showLocalNotification(
      '来自Angular应用的本地通知',
      {
        body: '这是一条通过Service Worker显示的通知内容。',
        icon: 'assets/icons/icon-72x72.png', // 替换为您的图标路径
        image: 'assets/images/notification-image.jpg', // 可选：通知图片
        vibrate: [200, 100, 200, 100, 200],
        data: {
          url: '/dashboard' // 点击通知后跳转的内部路径
        },
        actions: [
          { action: 'view-details', title: '查看详情', icon: 'assets/icons/icon-48x48.png' },
          { action: 'dismiss', title: '忽略', icon: 'assets/icons/icon-48x48.png' }
        ]
      }
    );
  }

  async subscribeToPush() {
    const subscription = await this.notificationService.subscribeToPushNotifications();
    if (subscription) {
      console.log('成功订阅，订阅信息:', subscription);
      // 在这里将 subscription 对象发送到您的后端服务器
    } else {
      console.warn('未能订阅推送通知。');
    }
  }
}