Angular集成Web FCM时出现额外「This site has been updated in the background」通知的问题求助

嗨，这个问题我之前做Angular+FCM项目时刚好碰到过！你猜的完全没错——这条额外通知确实是Chrome在检测到Service Worker的onBackgroundMessage回调里没有明确处理通知展示逻辑时，自动触发的默认更新提示。给你几个实测有效的解决思路：

1. 必须在onBackgroundMessage里明确调用showNotification并返回Promise #

Chrome需要确认你已经自行接管了通知展示逻辑，才不会弹出默认提示。你目前的代码只取了标题但没完成通知渲染，补上这部分核心逻辑就行：

messaging.onBackgroundMessage(function(payload) {
  const notificationTitle = payload.data.title;
  const notificationOptions = {
    body: payload.data.body,
    icon: '/assets/icons/your-notification-icon.png', // 替换成你项目里的通知图标路径
    data: payload.data // 可以把推送数据附在通知上，方便后续点击处理
  };

  // 关键：一定要返回这个Promise，告诉浏览器你已经处理了通知
  return self.registration.showNotification(notificationTitle, notificationOptions);
});

2. 统一用data字段传递推送内容 #

如果你的FCM推送payload同时包含notification和data字段，FCM会自动尝试帮你展示通知，再加上你自己代码里的通知就会重复。建议所有推送内容都放在data字段里，完全由你的Service Worker控制通知展示，避免FCM自动干预。

3. 检查Angular Service Worker的配置冲突 #

Angular自带的Service Worker有默认的更新提示逻辑，可能和FCM的通知触发冲突。可以检查angular.json里的serviceWorker配置，确保只在生产环境启用，并且关闭Angular默认的更新弹窗（如果不需要的话）。

4. 清除旧Service Worker缓存测试 #

有时候旧的Service Worker脚本残留会导致逻辑混乱，你可以在Chrome开发者工具的Application > Service Workers面板里点击「Unregister」，刷新页面重新注册新的Service Worker后再测试推送。

按照上面的步骤调整，应该就能彻底去掉那条烦人的默认通知啦！

备注：内容来源于stack exchange，提问作者ja7m