Angular6配置FCM与NGSW时getToken报404错误求助

嘿，我之前在类似场景下踩过一模一样的坑，你的问题核心是FCM默认会从根路径请求服务工作者相关资源，但你的应用部署在/test/路径下，导致路径不匹配触发404。结合你已经合并worker文件的情况，试试下面的解决方案：

1. 明确指定FCM使用的Service Worker实例 #

FCM默认会自行尝试注册service worker，但它不知道你的base href设置，所以我们要手动注册带正确路径的worker，再告诉FCM复用这个实例：

const firebaseConfig = { messagingSenderId: "xxx" };
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();

if ('serviceWorker' in navigator) {
  // 注册合并后的worker，路径对应你的base href
  navigator.serviceWorker.register('/test/combined-worker.js')
    .then(registration => {
      // 让FCM使用这个已注册的service worker
      messaging.useServiceWorker(registration);
      // 现在再执行权限请求和token获取
      return messaging.requestPermission();
    })
    .then(() => {
      console.log('权限已获取');
      return messaging.getToken();
    })
    .then(token => {
      console.log('Token:', token);
    })
    .catch(err => {
      console.error('出错了:', err);
    });
}

2. 确保combined-worker.js的部署路径正确 #

构建Angular应用后，要确认combined-worker.js被放在dist/[你的项目名]/test/目录下（对应base href）。如果是用脚本合并的worker文件，记得把输出路径设置为Angular dist目录下的test子目录，这样请求/test/combined-worker.js时能正确找到文件。

3. 检查Angular的Service Worker配置 #

在angular.json里确认build配置正确指向base href和service worker：

"projects": {
  "你的项目名": {
    "architect": {
      "build": {
        "options": {
          "baseHref": "/test/",
          "serviceWorker": true,
          "ngswConfigPath": "src/ngsw-config.json"
        }
      }
    }
  }
}

如果你的combined-worker.js是替换了默认的ngsw-worker.js，还要确保构建过程中这个合并后的文件被正确复制到对应输出路径。

为什么这样能解决问题？ #

FCM的messaging.getToken()依赖service worker完成注册流程，默认会向根路径发起请求，但你的应用在/test/下，所以必须手动指定带base href的worker路径，并让FCM复用已注册的worker实例，这样所有相关请求都会自动带上/test/前缀，就不会出现找不到messaging/failed-serviceworker-registration的404错误了。

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