React项目升级Firebase 9后getToken报服务工作线程不支持MIME类型错误如何解决

错误提示中firebase-messaging-sw.js返回text/html类型，本质是该路径未返回正确的JS文件，服务端 fallback 到了React应用的index.html，同时Firebase 9.x API调用存在适配问题，按以下步骤修复即可：

1. 正确配置Service Worker文件 #

在项目public/根目录下新建firebase-messaging-sw.js文件，不要放在src/目录下，只有public目录的资源会被直接静态托管。文件内容参考如下：

// 引入对应版本的firebase compat包，版本和项目依赖的firebase大版本保持一致即可
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配置
const firebaseConfig = {
  apiKey: "apikey",
  authDomain: "authdomain",
  projectId: "project-app",
  storageBucket: "******.com",
  messagingSenderId: "id",
  appId: "appid",
  measurementId: "mid"
};

firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();

// 后台推送监听逻辑可自定义
messaging.onBackgroundMessage((payload) => {
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    icon: "/favicon.ico"
  };
  self.registration.showNotification(notificationTitle, notificationOptions);
});

2. 修正firebase.js中的API调用 #

Firebase 9.x的getToken第一个参数为messaging实例，第二个为配置对象，同时需要主动传入你注册好的service worker实例，避免Firebase默认拉起的注册逻辑和你的自定义逻辑冲突，修改对应代码段：

// 原错误写法
// getToken({messaging, vapidKey: message_key})

// 修正后写法
getToken(messaging, { 
  vapidKey: message_key,
  serviceWorkerRegistration: registration 
})

3. 验证修复效果 #

本地启动项目后直接访问http://localhost:3000/firebase-messaging-sw.js，确认返回的是你写的JS文件内容，而非React应用的HTML代码，即说明文件配置正确。测试时可在浏览器开发者工具的Application > Service Workers面板卸载旧的缓存SW，避免历史缓存影响验证结果。

其他注意点 #

• 若应用部署在子路径下，需确认process.env.PUBLIC_URL配置正确，保证SW注册路径和实际托管路径匹配
• 生产环境/ngrok测试时需保证站点为HTTPS协议（localhost除外），符合service worker的运行要求

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