React+TypeScript集成FCM获取Token报错：ServiceWorker MIME类型不支持

错误原因 #

这个报错的核心是FCM尝试注册firebase-messaging-sw.js时，服务器返回了HTML内容（通常是404错误页面），浏览器识别为不支持的text/html MIME类型，而非Service Worker要求的application/javascript。

解决步骤 #

• 1. 正确放置Service Worker文件
  在React项目的public根目录下创建firebase-messaging-sw.js文件（必须放在public目录，不能在src里），示例内容如下：

  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');
  
  const firebaseConfig = {
    apiKey: "你的实际apiKey",
    authDomain: "你的实际authDomain",
    projectId: "你的实际projectId",
    storageBucket: "你的实际storageBucket",
    messagingSenderId: "你的实际messagingSenderId",
    appId: "你的实际appId",
    measurementId: "你的实际measurementId"
  };
  
  firebase.initializeApp(firebaseConfig);
  const messaging = firebase.messaging();
  
  // 可选：处理后台推送消息
  messaging.onBackgroundMessage((payload) => {
    console.log('收到后台消息:', payload);
    const notificationTitle = payload.notification?.title || '新消息';
    const notificationOptions = {
      body: payload.notification?.body || '您有一条新通知',
      icon: '/your-icon.png'
    };
    self.registration.showNotification(notificationTitle, notificationOptions);
  });
  

  注意：请替换脚本链接中的版本号为你项目中使用的Firebase版本，确保版本一致。

• 2. 验证Service Worker可正常访问
  启动项目后，直接在浏览器访问http://localhost:3000/firebase-messaging-sw.js，确认页面显示的是正确的JS代码，而非HTML错误页面。如果还是返回HTML，检查文件名拼写是否正确、是否确实放在public根目录下。

• 3. 自定义Service Worker路径（可选）
  若不想使用默认的文件名或路径，可以在初始化时手动指定Service Worker：

  import { initializeApp } from "firebase/app";
  import { getMessaging, getToken, registerServiceWorker } from "firebase/messaging";
  
  const firebaseConfig = { /* 你的Firebase配置 */ };
  
  export const app = initializeApp(firebaseConfig);
  
  const fcmMessaging = getMessaging();
  registerServiceWorker(fcmMessaging, '/custom-sw.js')
    .then(() => getToken(fcmMessaging, { vapidKey: '你的有效VAPID密钥' }))
    .then(currentToken => {
      if (currentToken) {
        console.log(currentToken, "FCM token");
      } else {
        console.log('无可用注册令牌，请先请求通知权限。');
      }
    })
    .catch(err => console.log('获取令牌失败:', err));
  

• 4. 确保VAPID密钥有效
  VAPID密钥需要从Firebase控制台获取：进入项目设置 > 云消息传递 > Web配置 > 生成密钥对，复制生成的公钥作为vapidKey的值，不要使用占位符。

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