React-Vite PWA集成FCM推送：Chrome正常Firefox异常求解决

针对Firefox中脚本评估异常、无法接收FCM推送的问题，可按以下步骤排查修复：

1. 确保Service Worker输出到网站根目录 #

Firefox对Service Worker的文件路径有严格要求，必须放在网站根目录才能正常生效。修改Vite的PWA配置，将自定义Service Worker输出到dist根目录：

import { VitePWA } from 'vite-plugin-pwa'
export default {
  plugins: [
    VitePWA({
      strategies: 'injectManifest',
      injectManifest: {
        swSrc: 'src/firebase-messaging-sw.js', // 你的自定义SW源文件
        swDest: 'dist/sw.js' // 输出到dist根目录
      },
      manifest: { /* 你的manifest配置 */ }
    })
  ]
}

2. 使用Firebase兼容版SDK与importScripts #

Firefox的Service Worker环境不支持ES模块格式的Firebase SDK，必须使用compat版本并通过importScripts加载，注意加载顺序：

// 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({
  // 你的Firebase配置信息
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
});

const messaging = firebase.messaging();

// 后台消息处理逻辑（可选）
messaging.onBackgroundMessage((payload) => {
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    icon: '/icons/icon-192x192.png'
  };
  self.registration.showNotification(notificationTitle, notificationOptions);
});

3. 明确指定Service Worker注册范围 #

Firefox对Service Worker的作用范围限制更严格，注册时必须显式指定根范围：

// 前端注册Service Worker的代码
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js', { scope: '/' })
    .then((registration) => {
      console.log('Service Worker 注册成功:', registration);
      // 关联FCM与Service Worker
      const messaging = getMessaging();
      useServiceWorker(messaging, registration);
    })
    .catch((err) => {
      console.error('Service Worker 注册失败:', err);
    });
}

4. 本地开发启用HTTPS #

Firefox要求Service Worker必须在HTTPS环境运行（localhost除外，但部分版本仍有严格限制），修改Vite配置启用HTTPS：

export default {
  server: {
    https: true
  }
}

5. 清除旧缓存与Service Worker #

旧的缓存或残留的Service Worker可能导致异常，手动清理：

• 打开Firefox输入about:serviceworkers，找到对应应用的Service Worker并点击“Unregister”
• 按Ctrl+Shift+Del清除浏览器缓存，重启浏览器后重新加载应用

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