React JS集成FCM获取Token时遇MIME类型错误求助

问题描述 #

集成FCM推送通知时出现两个核心错误：

1. 脚本存在不支持的MIME类型('text/html')。
2. 具体报错栈：

registerDefaultSw.ts:43 Uncaught (in promise) FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker for scope ('http://localhost:3000/firebase-cloud-messaging-push-scope') with script ('http://localhost:3000/firebase-messaging-sw.js'): The script has an unsupported MIME type ('text/html'). (messaging/failed-service-worker-registration).
    at registerDefaultSw (registerDefaultSw.ts:43:1)
    at async updateSwReg (updateSwReg.ts:28:1)
    at async getToken$1 (getToken.ts:43:1)

已完成的操作：

• 在项目根目录创建firebaseInit.js（使用Firebase v9.12.1），包含初始化、token获取、权限请求等逻辑
• 编写firebase-messaging-sw.js，配置FCM后台消息处理
• 在App.js的render方法中调用权限请求函数
• 尝试修改现有Service Worker、调整index.js中的Service Worker注册逻辑，但问题未解决

问题根源与修复方案 #

1. Service Worker文件路径错误（核心问题） #

FCM要求firebase-messaging-sw.js必须放在项目的静态资源根目录（即能通过http://localhost:3000/firebase-messaging-sw.js直接访问到的位置）。如果你的React项目是Create React App创建的，根目录文件不会被打包到静态资源文件夹，需把firebase-messaging-sw.js移动到public文件夹下，而非项目根目录。

文件位置错误时，服务器会返回404并默认返回HTML页面，导致MIME类型变为text/html，触发报错。

2. Firebase版本不匹配 #

项目依赖Firebase v9.12.1，但Service Worker中引入的是v9.2.1的CDN脚本，版本不一致会引发兼容性问题。修改firebase-messaging-sw.js中的CDN版本，与项目依赖保持一致：

importScripts('https://www.gstatic.com/firebasejs/9.12.1/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/9.12.1/firebase-messaging-compat.js');

3. 避免重复调用权限请求 #

在App.js的render方法中同时调用了requestFirebaseNotificationPermission和requestPermission两个权限请求函数，会重复触发Service Worker注册逻辑引发冲突。保留其中一个即可，推荐使用封装更规范的requestFirebaseNotificationPermission。

4. 正确处理Service Worker注册 #

Create React App默认的serviceWorker文件用于PWA功能，不要和FCM的Service Worker逻辑混用。若不需要PWA功能，保持serviceWorker.unregister()即可，FCM会自动注册所需的Service Worker，无需手动修改该文件。

5. Service Worker代码语法修正 #

firebase-messaging-sw.js中app=firebase.initializeApp(config);缺少const声明，会创建全局变量，建议修正为：

const app = firebase.initializeApp(config);

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