Firebase Cloud Messaging（Web）：Service Worker停止致通知无法正常送达

针对React/TypeScript/Vite应用在Firefox中FCM推送仅1/3能接收、firebase-cloud-messaging-push-scope Service Worker频繁停止的问题，结合已完成的排查操作，给出以下针对性方案：

1. 调整Service Worker存活策略 #

Firefox对闲置Service Worker的回收机制比Chrome更严格，可通过添加心跳逻辑延长存活时间：

• 在firebase-messaging-sw.js中添加周期性同步监听：

self.addEventListener('periodicsync', (event) => {
  if (event.tag === 'fcm-keep-alive') {
    // 发起轻量级请求维持Worker活跃
    event.waitUntil(fetch('/api/health', { keepalive: true }));
  }
});

• 前端注册同步任务：

if ('serviceWorker' in navigator && 'SyncManager' in window) {
  navigator.serviceWorker.ready.then(reg => {
    reg.sync.register('fcm-keep-alive');
  });
}

2. 校验FCM Service Worker注册配置 #

• 确认firebase-messaging-sw.js部署在网站根目录（Firefox对Service Worker作用域的限制更严格，非根路径可能导致推送事件无法触发）。
• 检查FCM初始化代码，避免重复注册Service Worker：

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

const app = initializeApp(firebaseConfig);
const messaging = getMessaging(app);
// 确保只注册一次指定的Worker
navigator.serviceWorker.register('/firebase-messaging-sw.js')
  .then(swReg => useServiceWorker(messaging, swReg));

3. 检查Firefox后台限制参数 #

在Firefox地址栏输入about:config，调整以下参数：

• 将dom.serviceWorkers.idle_timeout从默认300秒（5分钟）调至1800秒（30分钟），延长闲置Worker的存活时间。
• 确认dom.push.connection_timeout设置为合理值（建议不低于60秒），避免推送连接过早断开。
• 关闭dom.serviceWorkers.testing.enabled（若开启），测试环境参数可能干扰生产环境运行。

4. 捕获Service Worker终止原因 #

在Service Worker中添加终止日志，定位具体停止原因：

self.addEventListener('beforeunload', (event) => {
  const terminateReason = event.reason || '无明确原因';
  // 将终止信息发送到前端页面
  self.clients.matchAll({ includeUncontrolled: true, type: 'window' }).then(clients => {
    clients.forEach(client => {
      client.postMessage({
        type: 'SW_TERMINATED',
        reason: terminateReason,
        timestamp: Date.now()
      });
    });
  });
});

前端页面监听消息并打印日志，便于排查是内存不足、闲置超时还是其他系统级原因导致的终止。

5. 规范FCM推送Payload格式 #

Firefox对Web Push Payload的限制更严格：

• 确保Payload大小不超过4KB，避免冗余字段和嵌套结构。
• 推送内容中的icon、image等资源必须使用绝对URL，Firefox不支持相对路径加载资源。
• 避免在Payload中包含未经过GCM/FCM加密的敏感内容，可能被Firefox拦截。

6. 定期校验FCM订阅令牌有效性 #

Firefox的推送订阅可能因浏览器更新、权限变更等原因失效，前端定期校验并同步令牌到后端：

import { getMessaging, getToken } from "firebase/messaging";

const checkFCMTokenValidity = async () => {
  const messaging = getMessaging();
  const currentToken = await getToken(messaging, { vapidKey: '你的VAPID密钥' });
  const storedToken = localStorage.getItem('fcm_token');
  
  if (currentToken !== storedToken) {
    localStorage.setItem('fcm_token', currentToken);
    // 调用后端接口更新令牌
    await fetch('/api/update-fcm-token', {
      method: 'POST',
      body: JSON.stringify({ token: currentToken })
    });
  }
};

// 页面加载时校验，每24小时再校验一次
checkFCMTokenValidity();
setInterval(checkFCMTokenValidity, 24 * 60 * 60 * 1000);

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