Angular生产环境下firebase-messaging-sw.js路径加载错误问题排查求助

核心原因 #

Firebase Cloud Messaging（FCM）的客户端库默认会从域名的根目录请求firebase-messaging-sw.js文件，不管你的Angular应用部署在哪个子路径下。而你的应用部署在.../XXXX子路径中，实际的firebase-messaging-sw.js文件位于.../XXXX/下，FCM的默认请求路径.../firebase-messaging-sw.js自然会返回404。

本地开发环境正常是因为：localhost下Angular默认运行在根路径/，FCM请求根路径的文件刚好能匹配到你放在assets里的文件，所以没有问题。

解决步骤 #

1. 手动指定Service Worker的路径与作用域

在初始化FCM Messaging的时候，不要依赖默认的Service Worker加载逻辑，而是手动注册并指定正确的路径和作用域：

import { getMessaging, useServiceWorker, registerServiceWorker } from "firebase/messaging";

// 注册Service Worker，替换成你的实际子路径
const swRegistration = await registerServiceWorker('/XXXX/firebase-messaging-sw.js', {
  scope: '/XXXX/' // 作用域必须匹配你的应用部署子路径
});

// 初始化Messaging并关联已注册的Service Worker
const messaging = getMessaging();
await useServiceWorker(messaging, swRegistration);

2. 确认Angular的基础路径配置

确保你的Angular项目已经正确设置了baseHref，这样打包后的资源路径都会基于子路径：

• 在angular.json的build配置中添加：

  "build": {
    "options": {
      "baseHref": "/XXXX/",
      // 其他配置...
    }
  }
  

• 或者打包时通过命令行指定：

  ng build --base-href /XXXX/
  

  这一步能保证firebase-messaging-sw.js被正确打包到dist/your-project/XXXX/目录下，和你的部署路径一致。

3. 验证Service Worker的作用域

Service Worker的作用域决定了它能控制哪些页面的消息推送，设置scope: '/XXXX/'后，它只会处理/XXXX/路径下的页面请求，符合你的部署场景，避免和域名下其他应用的Service Worker冲突。

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