集成Firebase Web通知后无报错但未收到通知问题求助

我帮你梳理几个关键的排查方向，这些都是Web端集成Firebase Notifications时，常见的「控制台显示已完成但收不到通知」的问题点：

1. 检查消息载荷格式与优先级设置 #

有时候用Notification Composer发送的消息，若只填了基础标题内容，可能不符合Web端的接收要求：

• 对于前台应用：需要在index.html中监听onMessage回调，确保能捕获到消息。示例代码：

  const messaging = firebase.messaging();
  messaging.onMessage((payload) => {
    console.log('前台收到消息:', payload);
    // 手动创建前台通知
    new Notification(payload.notification.title, {
      body: payload.notification.body,
      icon: '/your-icon.png'
    });
  });
  

• 对于后台应用：必须在firebase-messaging-sw.js中注册onBackgroundMessage回调，同时要给消息设置高优先级，避免浏览器静默拦截。示例service worker代码：

  importScripts('https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js');
  importScripts('https://www.gstatic.com/firebasejs/9.23.0/firebase-messaging-compat.js');
  
  firebase.initializeApp({
    // 你的Firebase项目配置
  });
  
  const messaging = firebase.messaging();
  
  messaging.onBackgroundMessage((payload) => {
    console.log('[后台消息] 收到通知:', payload);
    const notificationTitle = payload.notification.title;
    const notificationOptions = {
      body: payload.notification.body,
      icon: '/your-icon.png'
    };
    self.registration.showNotification(notificationTitle, notificationOptions);
  });
  

• 测试时可以手动构造高优先级请求（用curl或Postman），确保载荷格式正确：

  {
    "message": {
      "token": "你的设备FCM令牌",
      "notification": {
        "title": "测试通知",
        "body": "测试内容"
      },
      "webpush": {
        "headers": {
          "Urgency": "high"
        }
      }
    }
  }
  

2. 验证FCM令牌的有效性 #

• 确认你在Notification Composer中使用的令牌是当前浏览器实例的有效令牌：在index.html中添加代码打印令牌，直接复制到测试工具里验证：

  messaging.getToken({ vapidKey: '你的VAPID密钥' })
    .then((currentToken) => {
      if (currentToken) {
        console.log('当前有效FCM令牌:', currentToken);
      } else {
        console.log('未获取到令牌，请检查通知权限');
      }
    });
  

• 检查Firebase控制台中Web应用的VAPID密钥，确保和代码中使用的完全一致。

3. 确认浏览器的通知权限与环境 #

• 手动检查浏览器对当前网站的通知权限：进入浏览器设置→网站权限→通知，确保已允许该网站发送通知。
• 避免在隐身模式或隐私严格的窗口测试，部分浏览器会在这类环境下拦截通知。
• 检查浏览器是否开启了「请勿打扰」模式，该模式会静默所有通知。

4. 检查Service Worker的注册状态 #

• 在浏览器开发者工具的Application → Service Workers面板中，确认firebase-messaging-sw.js已成功注册，状态为activated且无报错。
• 确保service worker文件放在网站根目录下（比如https://your-domain/firebase-messaging-sw.js），如果必须放在子目录，需在初始化时指定路径：

  const messaging = firebase.messaging();
  messaging.registerServiceWorker('/subpath/firebase-messaging-sw.js');
  

5. 核对Firebase SDK版本兼容性 #

• 确保index.html中引入的Firebase SDK版本，与firebase-messaging-sw.js中importScripts使用的版本完全一致，版本不匹配会导致静默失败。建议使用同版本的compat分支SDK（适配service worker的CommonJS环境）。

内容的提问来源于stack exchange，提问作者Peter Wilson