Angular集成FCM推送通知无法接收消息问题求助

1. 区分前台/后台消息的处理逻辑 #

你当前只在组件中通过onMessage监听前台活跃状态的消息，但应用处于后台、息屏或关闭状态时，消息需要通过Service Worker处理，你的firebase-messaging-sw.js缺少后台消息处理逻辑：

// 在firebase-messaging-sw.js中添加以下代码
messaging.onBackgroundMessage((payload) => {
  console.log('[firebase-messaging-sw.js] 收到后台消息: ', payload);
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    icon: '/assets/favicon.ico' // 替换为你的应用图标路径
  };
  self.registration.showNotification(notificationTitle, notificationOptions);
});

2. 检查FCM API请求的完整性 #

调用FCM接口时必须包含正确的请求头，你可能遗漏了关键配置：

• 请求头必须添加：
  • Authorization: key=你的Firebase服务器密钥（在Firebase控制台 → 项目设置 → 云消息传递 → 服务器密钥获取）
  • Content-Type: application/json
• 若要同时支持前台和后台接收，建议请求体同时包含notification和data字段（部分场景下纯notification字段在前台可能无法触发onMessage）：

{
  "notification": {
    "title": "test",
    "body": "test"
  },
  "data": {
    "type": "test",
    "content": "test content"
  },
  "to": "你的设备Token"
}

3. 确保Service Worker正确注册 #

你仅在angular.json中配置了assets，但未主动注册Service Worker，需在main.ts中添加注册逻辑：

// main.ts
platformBrowserDynamic().bootstrapModule(AppModule)
  .then(() => {
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/firebase-messaging-sw.js')
        .then(registration => {
          console.log('Service Worker注册成功: ', registration);
        })
        .catch(err => {
          console.log('Service Worker注册失败: ', err);
        });
    }
  })
  .catch(err => console.error(err));

同时确认打包后firebase-messaging-sw.js位于dist目录的根路径下，可通过浏览器DevTools → Application → Service Workers查看是否注册成功。

4. 确认前台消息监听的触发时机 #

你的listen()方法需在权限获取成功后调用，确保Messaging实例已初始化完成，修改组件代码：

requestPermission() {
  const messaging = getMessaging();
  getToken(messaging, { vapidKey: environment.firebase.vapidKey})
    .then((currentToken) => {
      if (currentToken) {
        console.log("token:", currentToken);
        this.listen(); // 权限获取成功后立即启动监听
      } else {
        console.log('无可用注册Token，请请求权限生成');
      }
    }).catch((err) => {
      console.log('获取Token时出错: ', err);
    });
}
listen() {
  console.log("开始监听消息");
  const messaging = getMessaging();
  onMessage(messaging, (payload) => {
    console.log('收到前台消息: ', payload);
    // 可在此处自定义前台消息展示逻辑，比如弹出组件通知
  });
}

5. 环境与版本检查 #

• 确保运行环境为HTTPS（localhost除外，FCM允许localhost测试），生产环境必须使用HTTPS，否则Service Worker无法正常工作。
• 确认项目中安装的firebase或@angular/fire包版本与firebase-messaging-sw.js中引入的版本一致（当前为9.15.0），避免版本兼容性问题。

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