Firebase Service Worker已安装未激活，无法接收推送消息求助

问题概述 #

控制台显示Service Worker已安装，但无法接收Firebase消息；通过navigator.serviceWorker.register('/firebase-messaging-sw.js')注册SW，curl发送消息正常。
最初使用CDN资源加载Firebase脚本时出现加载错误：

importScripts("https://www.gstatic.com/firebasejs/10.4.0/firebase-app-compat.js")
importScripts("https://www.gstatic.com/firebasejs/10.4.0/firebase-messaging-compat.js")

错误信息：

Uncaught DOMException: 
Failed to execute 'importScripts' on 'WorkerGlobalScope': 
The script at 'https://www.gstatic.com/firebasejs/10.4.0/firebase-app-compat.js' failed to load.
at https://"MYSERVER".org:/firebase-messaging-sw.js:4:1

将脚本放到自有服务器后，SW可注册但仍无法接收消息，发现Firebase相关SW处于installed状态，旧SW处于active状态，需要确保仅存在一个SW并激活新的。

解决方案 #

1. 强制新Service Worker立即激活 #

在firebase-messaging-sw.js脚本末尾添加skipWaiting()，让新SW安装完成后直接取代旧SW：

// 此处放置Firebase初始化代码

self.skipWaiting();

同时在前端注册SW的代码中，配置禁用缓存并主动检查更新：

navigator.serviceWorker.register('/firebase-messaging-sw.js', {
  updateViaCache: 'none'
})
.then(registration => {
  registration.update();
  // 若有等待激活的SW，触发激活
  if (registration.waiting) {
    registration.waiting.postMessage({ type: 'SKIP_WAITING' });
  }
});

添加控制器变更监听，确保页面使用最新SW：

navigator.serviceWorker.addEventListener('controllerchange', () => {
  window.location.reload();
});

2. 清理旧的Service Worker #

• 手动清理：打开浏览器开发者工具（F12），进入Application标签页的Service Workers面板，勾选Update on reload，点击旧SW旁的Unregister按钮后刷新页面。
• 代码自动清理：遍历所有已注册SW，注销非目标脚本：

navigator.serviceWorker.getRegistrations().then(registrations => {
  registrations.forEach(reg => {
    if (!reg.active.scriptURL.includes('firebase-messaging-sw.js')) {
      reg.unregister();
    }
  });
});

3. 确保Service Worker脚本唯一性 #

• 检查旧SW的注册路径与作用域，确保新SW的作用域完全覆盖旧SW，或修改旧SW内容使其自动更新注销。
• 保证firebase-messaging-sw.js的文件名和路径唯一，避免与其他SW脚本冲突。

4. 验证Firebase Messaging配置正确性 #

将Firebase脚本放到自有服务器后，确认初始化代码无误：

importScripts('/firebase-app-compat.js');
importScripts('/firebase-messaging-compat.js');

firebase.initializeApp({
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
});

const messaging = firebase.messaging();

// 处理后台消息
messaging.onBackgroundMessage(payload => {
  console.log('Received background message:', payload);
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    icon: '/firebase-logo.png'
  };
  self.registration.showNotification(notificationTitle, notificationOptions);
});

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