React JS集成FCM生成Firebase令牌时ServiceWorker注册报错

现有firebase-messaging-sw.js代码 #

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

// Initialize the Firebase app in the service worker by passing the generated config
const firebaseConfig = {
  apiKey: "AIzaSyDk4dYeydr4q3npWx4iqKWejq33r1E",
  authDomain: "tengage-33e12.fireeapp.com",
  projectId: "tengage-33e12",
  storageBucket: "tengage-33e12.appspot.com",
  messagingSenderId: "1076165210",
  appId: "1:1076165210:web:c9560924940a068ce3",
  measurementId: "G-5FMCR8M0G8",
};

firebase.initializeApp(firebaseConfig);

// Retrieve firebase messaging
const messaging = firebase.messaging();

messaging.onBackgroundMessage(function (payload) {
  console.log(" message ", payload);

  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
  };

  self.registration.showNotification(notificationTitle, notificationOptions);
});

报错信息 #

SecurityError: Failed to register a ServiceWorker for scope ('http://localhost:3005/') with script ('http://localhost:3005/firebase-messaging-sw.js'): The script has an unsupported MIME type ('text/html').

错误原因 #

该错误本质是浏览器请求firebase-messaging-sw.js文件时，服务器返回了text/html类型的内容（绝大多数情况是前端路由兜底返回的index.html页面），而Service Worker要求脚本必须返回application/javascript类型的JS内容，所以注册失败。
因为相同配置在全新React项目中可以正常获取令牌，说明Firebase凭证、SW代码本身没有问题，故障点完全在当前项目的静态资源服务逻辑上。

排查与修复步骤 #

• 第一步先验证文件是否能被正确访问：直接在浏览器地址栏输入http://localhost:3005/firebase-messaging-sw.js访问，如果页面显示的是React项目首页内容而非JS代码，即可确认是静态资源映射问题。
  • 若使用Create React App脚手架，确认firebase-messaging-sw.js直接放在项目public文件夹根目录，不要嵌套任何子文件夹，文件名无拼写错误，CRA会自动将public根目录的文件映射到站点根路径。
  • 若使用自定义webpack、Vite等构建工具，检查静态资源配置，确保public目录下的文件会被输出到构建产物的根路径，不会被构建工具处理重命名。
• 检查开发服务/部署服务的路由规则：绝大多数React项目会配置「所有未匹配路径返回index.html」的兜底规则支持前端路由，如果该规则优先级高于静态资源匹配规则，就会把SW脚本的请求也返回为HTML。需要调整规则顺序，优先匹配静态资源请求，仅非静态资源的路由请求才兜底返回index.html。
• 检查Service Worker注册路径：手动注册SW时必须使用站点根路径开头的绝对路径，避免相对路径解析错误。参考注册代码：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/firebase-messaging-sw.js', { scope: '/' })
}

如果使用Firebase JS SDK的getToken方法，不需要手动重复注册SW，SDK会自动拉取根路径下的firebase-messaging-sw.js。

• 清理缓存重试：打开浏览器开发者工具，进入「Application」-「Service Workers」面板，点击Unregister删除所有已注册的异常SW，勾选「Bypass for network」选项，清除浏览器缓存后强制刷新页面重试，避免旧的错误缓存被复用。
• 确认端口占用：检查3005端口是否确实被当前React项目的开发服务占用，没有其他后台服务抢占端口返回无关内容。

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