Angular 服务中调用 Service Worker 显示通知

ng add @angular/pwa

// 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)
  .then(() => {
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/ngsw-worker.js', { scope: './' })
        .then(registration => console.log('Service Worker registered:', registration))
        .catch(error => console.error('Service Worker registration failed:', error));
    }
  })
  .catch(err => console.error(err));

// ngsw-worker.js (或您的自定义 sw.js)
// 这是一个简化的示例，Angular PWA 的 Service Worker 通常更复杂

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

  // 获取通知中传递的数据
  const urlToOpen = event.notification.data ? event.notification.data.url : '/';

  event.waitUntil(
    clients.openWindow(urlToOpen) // 打开指定 URL
  );
});

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

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

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

  constructor() { }

  /**
   * 请求通知权限。
   * @returns Promise<NotificationPermission> 返回通知权限状态。
   */
  public requestNotificationPermission(): Promise<NotificationPermission> {
    if (!('Notification' in window)) {
      console.warn('浏览器不支持 Notification API。');
      return Promise.resolve('denied'); // 或 'default'
    }
    return Notification.requestPermission();
  }

  /**
   * 通过 Service Worker 显示通知。
   * @param title 通知标题。
   * @param options 通知选项，如正文、图标、数据等。
   * @returns Promise<void>
   */
  public async showServiceWorkerNotification(title: string, options?: NotificationOptions): Promise<void> {
    if (!('serviceWorker' in navigator)) {
      console.warn('浏览器不支持 Service Worker。');
      return;
    }

    const permission = await this.requestNotificationPermission();

    if (permission === 'granted') {
      try {
        const registration = await navigator.serviceWorker.ready;
        if (registration) {
          await registration.showNotification(title, options);
          console.log('通过 Service Worker 显示通知成功。');
        } else {
          console.error('Service Worker 未准备就绪。');
        }
      } catch (error) {
        console.error('显示 Service Worker 通知时发生错误:', error);
      }
    } else {
      console.warn(`未获得通知权限，当前状态为: ${permission}`);
    }
  }

  /**
   * 检查当前通知权限状态。
   * @returns NotificationPermission 当前权限状态。
   */
  public getNotificationPermissionStatus(): NotificationPermission {
    if (!('Notification' in window)) {
      return 'denied';
    }
    return Notification.permission;
  }
}

// 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)="sendNotification()">发送通知</button>
    <p>当前通知权限状态: {{ permissionStatus }}</p>
  `,
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  permissionStatus: NotificationPermission = 'default';

  constructor(private notificationService: NotificationService) {
    this.checkPermissionStatus();
  }

  async checkPermissionStatus() {
    this.permissionStatus = this.notificationService.getNotificationPermissionStatus();
  }

  async sendNotification() {
    const title = '新消息通知';
    const options: NotificationOptions = {
      body: '这是一条来自 Angular 应用的Service Worker通知！',
      icon: 'assets/icons/icon-96x96.png', // 确保有此图标
      data: {
        url: 'https://angular.io' // 点击通知时打开的 URL
      },
      vibrate: [200, 100, 200], // 震动模式
      badge: 'assets/icons/icon-72x72.png' // Android 设备上的徽章图标
    };

    await this.notificationService.showServiceWorkerNotification(title, options);
    this.checkPermissionStatus(); // 更新权限状态显示
  }
}