如何在Angular服务中使用Firebase onBackgroundMessage接收后台通知？

核心机制澄清 #

你在代码中看到的this.angularFireMessaging.onBackgroundMessage是对Firebase原生SDK同名方法的封装，这里存在容易被忽略的执行上下文边界问题：

• 后台FCM消息的回调逻辑，实际运行在浏览器独立的FCM Service Worker线程中，和Angular主线程的运行时完全隔离
• 你的AppService是Angular注入式服务，只会在主线程被实例化，直接在该服务内调用onBackgroundMessage无法接收到后台消息——这个API从设计上就不提供主线程的后台消息订阅能力，因为两个执行环境完全不互通。

正确实现步骤 #

1. 配置独立的后台消息Service Worker #

后台消息的接收逻辑必须写在独立的Service Worker文件中，也就是FCM规范要求的、站点根路径下可直接访问的firebase-messaging-sw.js：

• 在Angular项目的src目录下创建该文件，写入基础后台消息处理逻辑：

// src/firebase-messaging-sw.js
importScripts("https://www.gstatic.com/firebasejs/10.0.0/firebase-app-compat.js");
importScripts("https://www.gstatic.com/firebasejs/10.0.0/firebase-messaging-compat.js");

// 填入和Angular端完全一致的Firebase项目配置
firebase.initializeApp({
  apiKey: "你的项目API Key",
  projectId: "你的项目Project ID",
  messagingSenderId: "你的项目Messaging Sender ID"
});

const messaging = firebase.messaging();

// 此处就是后台消息的真实回调，运行在SW上下文
messaging.onBackgroundMessage((payload) => {
  // 自定义后台通知的展示样式，替代FCM默认的弹出逻辑
  self.registration.showNotification(payload.notification.title, {
    body: payload.notification.body,
    icon: payload.data?.icon || "/assets/icons/notification-icon.png",
    data: payload.data
  });
});

• 修改angular.json的打包配置，确保SW文件会被输出到站点根路径，能够被FCM服务正常加载：

// angular.json 中 build.options.assets 配置片段
{
  "glob": "firebase-messaging-sw.js",
  "input": "src/",
  "output": "/"
}

2. 主线程业务逻辑适配 #

你现有的前台消息处理逻辑不需要做任何修改：

• AppService中针对this.angularFireMessaging.messages的订阅，依然负责处理应用标签页处于激活前台时的消息接收
• 如果需要把SW中处理的行为（比如用户点击后台通知的操作）同步到Angular组件，可通过浏览器标准的postMessage机制，让SW向已打开的Angular页面发送数据，在AppService中监听这类消息后，走你已有的componentMethodCallSource通道触发组件更新即可。

常见踩坑提示 #

• 旧版本@angular/fire中存在的onBackgroundMessage封装方法，在新版本中已经被移除，不要尝试在主线程调用该方法——主线程环境下的调用没有任何实际效果，因为该方法绑定的是SW内部的事件队列。
• 你当前通过PHP CURL发送的推送，如果消息体中携带了notification字段，FCM会自动触发SW的通知展示流程，不会把消息回传到主线程；如果需要统一前后台消息的处理逻辑，可调整推送请求，仅传递data字段，再分别在SW和主线程的回调中做展示处理。
• 后台通知的点击跳转逻辑，可直接在SW中通过self.addEventListener('notificationclick', ...)事件监听，调用clients.openWindow打开对应路由地址。

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