排查PWA中Firebase背景通知的额外未知通知来源

核心原因 #

额外通知是Firebase Messaging SDK的默认行为导致的：当推送消息的payload中包含notification字段时，不管你有没有注册onBackgroundMessage回调，SDK都会自动展示一个默认通知——这个通知会用浏览器默认图标或Manifest配置的图标，不会带上你自定义的前缀。

排查与解决步骤 #

• 检查推送消息的Payload格式
  打开浏览器DevTools的Application > Service Workers面板，推送消息时查看Push事件的payload。如果payload里直接有notification字段（比如{"notification": {"title": "...", "body": "..."}}），那就是SDK自动触发了默认通知。
  解决方法是把通知内容移到data字段中，示例：

  {
    "data": {
      "title": "你的标题",
      "body": "你的内容"
    }
  }
  

  之后在onBackgroundMessage里读取payload.data来构建自定义通知。

• 覆盖默认推送事件处理
  如果没法修改推送消息格式，直接监听push事件并阻止默认行为，自己处理通知展示：

  // 替换原来的messaging.onBackgroundMessage
  self.addEventListener('push', function(event) {
    event.preventDefault(); // 阻止Firebase默认通知
    const payload = event.data?.json() || {};
    if (payload.notification) {
      event.waitUntil(
        self.registration.showNotification(
          "Background:" + payload.notification.title,
          { body: payload.notification.body, icon: "REDACTED" }
        )
      );
    }
  });
  

  注意：不要同时使用messaging.onBackgroundMessage，避免逻辑冲突。

• 验证SDK初始化的影响
  你提到仅保留初始化和const messaging = firebase.messaging();就出现额外通知，这说明推送消息本身携带了notification字段，SDK默认逻辑直接触发了通知。可以在Service Worker中添加监听打印payload确认：

  self.addEventListener('push', (e) => {
    console.log('收到推送payload:', e.data?.json());
  });
  

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