基于Angular与NestJs的Web应用前台推送通知无法触发问题求助

我之前在开发Angular + NestJS的Web应用时，刚好碰到过完全一样的问题！当时排查了好几个小时才找到症结，给你分享下我的解决思路：

核心原因：前台状态下浏览器不会自动触发通知 #

浏览器的推送通知机制在后台/离线时会自动弹出通知，但当应用处于前台时，需要我们手动调用showNotification()来触发，默认不会自动显示。

具体解决步骤： #

1. 修改Service Worker的push事件处理逻辑
   之前我错误地以为Service Worker的push事件会自动处理前台通知，实际上必须主动调用registration.showNotification()。在你的service-worker.js（或Angular的Service Worker配置）中添加如下代码：

   self.addEventListener('push', (event) => {
     // 解析推送的payload
     const payload = event.data?.json() || { title: '新通知', body: '您有一条新消息' };
     // 配置通知选项
     const notificationOptions = {
       body: payload.body,
       icon: './assets/icons/icon-192x192.png', // 替换成你的通知图标
       badge: './assets/icons/badge-72x72.png',
       data: payload.data // 自定义数据，点击通知时可以使用
     };
   
     // 主动触发通知
     event.waitUntil(
       self.registration.showNotification(payload.title, notificationOptions)
     );
   });
   

2. 确认Angular端的通知权限已正确获取
   即使用户之前授权过通知权限，有时候前台触发可能因为权限状态异常失效。可以在Angular的根组件或推送服务中添加权限检查：

   import { Injectable } from '@angular/core';
   
   @Injectable({ providedIn: 'root' })
   export class PushNotificationService {
     constructor() {
       this.checkNotificationPermission();
     }
   
     private checkNotificationPermission(): void {
       if ('Notification' in window && 'serviceWorker' in navigator) {
         Notification.requestPermission().then(permission => {
           if (permission !== 'granted') {
             console.warn('用户未授予通知权限，请引导用户开启');
           }
         });
       }
     }
   }
   

3. 确保NestJS端推送的Payload格式正确
   推送的Payload必须包含title和body等核心字段，否则showNotification会调用失败。如果你用web-push库发送推送，代码示例如下：

   import * as webpush from 'web-push';
   import { Injectable } from '@nestjs/common';
   
   @Injectable()
   export class PushService {
     private readonly vapidKeys = {
       publicKey: '你的VAPID公钥',
       privateKey: '你的VAPID私钥'
     };
   
     constructor() {
       webpush.setVapidDetails(
         'mailto:your-email@example.com',
         this.vapidKeys.publicKey,
         this.vapidKeys.privateKey
       );
     }
   
     sendNotification(subscription: any, message: string): void {
       const payload = JSON.stringify({
         title: '系统通知',
         body: message,
         data: { url: '/notification-center' } // 点击通知跳转的页面
       });
   
       webpush.sendNotification(subscription, payload)
         .catch(err => console.error('推送失败:', err));
     }
   }
   

4. 检查浏览器前台通知的设置
   部分浏览器（如Chrome）允许单独控制网站的前台通知显示，即使全局授权了通知权限，也可能被关闭。可以引导用户：

   • 打开浏览器设置 → 隐私和安全 → 网站设置 → 通知
   • 找到你的网站，确保“允许”选项已开启，且没有勾选“安静通知”或类似限制

额外排查技巧： #

• 在Chrome DevTools的Application → Service Workers面板中，确认你的Service Worker处于激活状态，并且可以通过Push按钮手动发送测试推送，观察是否触发push事件。
• 查看DevTools的Console面板，是否有showNotification相关的错误提示（比如权限不足、字段缺失）。

内容的提问来源于stack exchange，提问作者Dhimitrios Duka