Angular 12 结合 Firebase v9 实现 FCM 推送功能相关问题咨询

现有代码核心问题排查 #

1. Firebase v9 模块化 API 要求调用 getMessaging() 时必须显式传入已初始化的 Firebase 应用实例，你组件内的调用缺少该参数会直接触发初始化错误
2. 自定义的 firebase-messaging-sw.js 与 @angular/pwa 自动生成的 ngsw-worker.js 存在冲突，两个独立 Service Worker 无法同时生效
3. FCM 要求必须在 HTTPS 环境运行（localhost 除外），ng serve 默认不会启用 Service Worker，直接启动无法测试推送功能
4. 自动生成的 manifest.json 不能直接覆盖，需要保留原有配置补充 FCM required 字段即可

整合 @angular/pwa 与 FCM 方案 #

不要直接修改自动生成的 ngsw-worker.js，该文件每次构建都会被覆盖，按以下步骤配置即可：

1. 调整 Service Worker 配置 #

在 src 目录下新建 firebase-messaging-sw.js，内容如下：

importScripts('https://www.gstatic.com/firebasejs/9.0.0/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/9.0.0/firebase-messaging-compat.js');

const firebaseConfig = {
  apiKey: "***",
  authDomain: "***",
  databaseURL: "***",
  projectId: "***",
  storageBucket: "***",
  messagingSenderId: "***",
  appId: "***",
  measurementId: "***"
};

firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();

// 监听后台消息（可选）
messaging.onBackgroundMessage((payload) => {
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    icon: '/assets/icons/icon-72x72.png'
  };
  self.registration.showNotification(notificationTitle, notificationOptions);
});

将该文件加入 angular.json 的 assets 数组：

"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/manifest.json",
  "src/firebase-messaging-sw.js"
]

修改 ngsw-config.json 配置，让两个 Service Worker 共存：

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [/* 保持原有配置不变 */],
  "navigationUrls": ["/**"],
  // 新增以下配置
  "extraDependencies": ["firebase-messaging-sw.js"],
  "registrationStrategy": "registerWhenStable:30000"
}

2. 调整 manifest.json 配置 #

保留 @angular/pwa 自动生成的内容，仅补充 gcm_sender_id 字段即可，注意该值固定为 103953800507，不要填写自己的 sender ID：

{
  "name": "你的应用名称",
  "short_name": "应用短名",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "./",
  "start_url": "./",
  "icons": [/* 保持原有图标配置不变 */],
  "gcm_sender_id": "103953800507"
}

3. 修复组件内 getToken 逻辑 #

import { initializeApp } from 'firebase/app';
import { getMessaging, getToken } from 'firebase/messaging';

// 先初始化Firebase应用
const firebaseApp = initializeApp({
  // 和你之前的配置保持一致
});
const messaging = getMessaging(firebaseApp);

// 先请求通知权限再获取令牌
Notification.requestPermission().then(permission => {
  if (permission === 'granted') {
    getToken(messaging, { vapidKey: '你的VAPID公钥' }).then((currentToken) => {
      if (currentToken) {
        console.log('FCM令牌：', currentToken);
        // 此处将令牌传给Django后端存储即可
      } else {
        console.log('无可用令牌，请重新请求权限');
      }
    }).catch(err => console.log('获取令牌出错：', err));
  }
});

service worker generation failed 错误修复 #

按顺序排查以下原因即可：

1. 确认 angular.json 中 projects -> 你的项目名 -> architect -> build -> options 下存在正确配置：

"serviceWorker": true,
"ngswConfigPath": "ngsw-config.json"

2. 检查 ngsw-config.json 格式是否正确，有没有多余逗号、语法错误
3. 确保 @angular/pwa 和 @angular/service-worker 版本与 Angular 12 匹配，执行命令对齐版本：

npm install @angular/pwa@12 @angular/service-worker@12 --save

4. 删除 node_modules 和 package-lock.json 后重新安装依赖，解决版本冲突问题

测试注意事项 #

• ng serve 环境默认不启用 Service Worker，必须执行生产构建后用静态服务器测试：

ng build --prod
npx http-server dist/你的项目名

• localhost 环境下 Chrome 默认允许 FCM 运行，不需要配置 SSL 即可测试

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