在Angular服务中调用Service Worker推送通知的全面指南

// 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'));
});

// src/app/notification.service.ts
import { Injectable } from '@angular/core';

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

  constructor() { }

  /**
   * 检查浏览器是否支持通知API，并请求通知权限。
   * @returns Promise<NotificationPermission> 返回权限状态 ('granted', 'denied', 'default')。
   */
  public async requestNotificationPermission(): Promise<NotificationPermission> {
    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<void> {
    // 检查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;
  }
}

// src/app/app.component.ts
import { Component, OnInit } from '@angular/core';
import { NotificationService } from './notification.service';

@Component({
  selector: 'app-root',
  template: `
    <div style="text-align:center; margin-top: 50px;">
      <h1>Angular Service Worker 通知示例</h1>
      <p>当前通知权限状态：<strong>{{ permissionStatus }}</strong></p>
      <button (click)="requestPermission()" style="margin: 10px; padding: 10px 20px;">请求通知权限</button>
      <button (click)="triggerNotification()" style="margin: 10px; padding: 10px 20px;">触发通知</button>
    </div>
  `,
  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():