Angular本地HTTPS环境Firebase Cloud Messaging Service Worker注册失败求助

问题场景 #

在本地通过HTTPS运行的Angular应用中配置Firebase Cloud Messaging（FCM）时，无法完成Service Worker注册。已使用openssl生成对应的HTTPS密钥和证书，但Chrome、Firefox浏览器均报错。

错误信息 #

控制台报错：

DOMException: Failed to register a ServiceWorker for scope ('https://localhost:4200/assets/') with script ('https://localhost:4200/assets/firebase-messaging-sw.js'): An unknown error occurred when fetching the script.

网络请求响应提示：

Failed to load response data: Connection is closed, cant dispatch pending call to Network.getResponseBody

当前配置代码 #

Service Worker注册代码 #

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/assets/firebase-messaging-sw.js')
    .then(registration => {
      console.log('Service worker is active:', registration.active);

      if (Notification?.permission === 'granted') {
        console.log('permission granted');
        return this.getFCMToken();
      };
      console.log('permission undefined, default or denied');
      return this.permissionRequestFromUserDevice();
    })
    .catch(error => {
      console.error('Error getting service worker registration:', error);
    });
}

angular.json资产配置 #

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

firebase-messaging-sw.js内容（原存放在src/assets目录下） #

import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging/sw";

const firebaseApp = initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

const messaging = getMessaging(firebaseApp);

解决方案 #

• 调整文件位置：将firebase-messaging-sw.js从src/assets/目录移动到src/根目录。FCM要求Service Worker文件能在网站根路径下被访问，放在assets目录会导致作用域限制和加载异常。
• 修正注册路径：修改注册代码中的路径，将/assets/firebase-messaging-sw.js改为/firebase-messaging-sw.js，对应新的文件位置：

  navigator.serviceWorker.register('/firebase-messaging-sw.js')
  

• 替换为兼容的Service Worker脚本：本地开发环境中ES模块可能存在加载问题，改用importScripts引入firebase SDK的兼容版本，修改firebase-messaging-sw.js内容：

  importScripts('https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js');
  importScripts('https://www.gstatic.com/firebasejs/9.23.0/firebase-messaging-compat.js');
  
  firebase.initializeApp({
    apiKey: 'api-key',
    authDomain: 'project-id.firebaseapp.com',
    databaseURL: 'https://project-id.firebaseio.com',
    projectId: 'project-id',
    storageBucket: 'project-id.appspot.com',
    messagingSenderId: 'sender-id',
    appId: 'app-id',
    measurementId: 'G-measurement-id',
  });
  
  const messaging = firebase.messaging();
  

• 清理浏览器缓存与旧Service Worker：打开Chrome DevTools → Application → Service Workers，点击Unregister移除旧的注册；再到Network选项卡勾选Disable cache，刷新页面重新加载。
• 验证文件可访问性：直接访问https://localhost:4200/firebase-messaging-sw.js，确认能正常返回脚本内容，无404或加载错误。

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