Angular12集成FCM无法监听Firebase前台通知事件怎么解决？

开发者阿泽

2026-10-8

适配版本组合

首先提供经过验证可兼容Angular 12的依赖版本组合：

@angular/core：~12.2.0
@angular/fire：^7.2.0
firebase：^8.10.0
@angular/service-worker：~12.2.0
执行npm install @angular/fire@7.2.0 firebase@8.10.0重装对应版本依赖即可。

问题修复步骤

1. 解决Service Worker冲突

你当前同时注册了ngsw-worker.js和firebase-messaging-sw.js两个服务工作线程，FCM消息被线程拦截后无法传递到前台页面，按以下步骤修改：

在firebase-messaging-sw.js文件最开头添加导入语句：

importScripts('./ngsw-worker.js');

修改app.module.ts中Service Worker的注册配置：

ServiceWorkerModule.register('firebase-messaging-sw.js', { enabled: environment.production }),

仅保留这一个服务工作线程注册，可同时兼容PWA功能和FCM消息处理。

2. 修复消息监听逻辑

通知类型的消息默认会被FCM SDK直接交给服务工作线程处理，不会触发前台回调，调整监听逻辑如下：

listen() {
  const messaging = this.firebase.messaging();
  messaging.onMessage((payload) => {
    console.log('前台收到消息：', payload);
    // 自定义消息处理逻辑写在这里
  }, (error) => {
    console.error('消息监听错误：', error);
  });
}

如果需要测试通知类型消息的前台回调，发送消息时额外添加click_action: "http://localhost:8082"参数即可。