Firebase Cloud Message在Angular页面中无法展示问题排查求助

问题根因 #

• 导入路径错误：你当前从firebase/messaging/sw导入getMessaging，这个路径暴露的是Service Worker上下文专用的Messaging实例，仅能在SW文件中使用，页面上下文使用该实例绑定onMessage不会生效。
• 冗余事件监听冲突：你在页面组件中直接监听serviceWorker的push事件、self的push事件，属于逻辑错误：
  • 页面上下文的self指向window，无法接收Service Worker触发的push事件
  • 原生push事件会被Firebase SDK默认接管，额外添加的原生监听会抢占事件，导致SDK的onMessage回调被拦截
• 触发场景不匹配：onMessage仅在页面处于前台活跃状态时触发，若页面后台会走SW逻辑；同时如果推送消息带notification字段，Firebase SDK会默认弹出通知，不会触发onMessage回调。
• 实例传递错误：需确认app.component.ts中的this.msg，就是app.module.ts中初始化的Messaging实例，若实例未正确注入，绑定的回调也不会生效。

修复步骤 #

1. 修正页面上下文的Messaging导入路径：

// app.module.ts 页面侧导入修正，SW文件才使用firebase/messaging/sw路径
import { initializeApp } from 'firebase/app';
import { getMessaging } from 'firebase/messaging';

// 初始化逻辑保持不变
const app = initializeApp(environment.fireApp);
const msg = getMessaging(app);

2. 删除app.component.ts中冗余的原生push事件监听代码：

// 以下代码全部删除
navigator.serviceWorker.getRegistration().then((reg) => {
  reg?.addEventListener('push', (event) => {
    console.log(event);
  })
})
self.addEventListener('push', (event) => {
  console.log('Self Event', event);
})

3. 推送测试时使用纯data类型的消息格式，避免SDK默认拦截：

// 服务端推送示例（仅保留data字段，不添加notification字段）
{
  "data": {
    "title": "测试标题",
    "content": "测试内容"
  },
  "token": "用户获取到的FCM令牌"
}

4. 若需要处理后台/离线状态的推送，需单独在firebase-messaging-sw.js Service Worker文件中实现onBackgroundMessage逻辑，不要写在页面组件代码中。

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