使用firebase-messaging-sw.js时出现脚本MIME类型(text/html)不支持的报错问题

浏览器向服务器请求firebase-messaging-sw.js时，收到的响应内容是HTML格式（通常是单页应用的兜底首页index.html），且响应头的Content-Type被标记为text/html，不符合Service Worker加载时要求的JS MIME类型校验规则，导致解析失败。

• 文件存放路径不符合Firebase要求
  Firebase对消息推送的Service Worker文件有强制路径规则：firebase-messaging-sw.js必须部署在站点的根目录下，不能存放在二级静态资源文件夹（如/static/js/、/public/assets/这类自定义路径）。如果路径配置错误，单页应用的History路由会将所有未匹配的请求兜底返回index.html；如果是Nginx、Apache这类Web服务器托管的站点，还要检查路由重写规则，避免针对/firebase-messaging-sw.js的请求被规则重定向到首页HTML，直接触发上述MIME报错。
• 开发/部署流程遗漏静态文件拷贝
  使用Vite、Webpack等前端构建工具时，需要将firebase-messaging-sw.js放在项目的public目录下，确保打包构建时文件会被直接拷贝到最终产物的根路径，不要被构建工具的JS打包流程处理成带hash后缀的文件，否则会导致文件路径和SDK请求的默认路径不匹配。
• 代码缺少显式的Service Worker注册逻辑
  提供的代码片段仅初始化了messaging实例，没有显式向SDK传入注册成功的Service Worker实例，会导致SDK自动按默认路径查找文件时出现路径偏差。需要手动完成SW注册并关联到messaging实例。

// 检测浏览器是否支持Service Worker
if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      // 注册根路径下的SW文件
      const swRegistration = await navigator.serviceWorker.register('/firebase-messaging-sw.js')
      const messaging = firebase.messaging()
      // 显式关联已注册的SW实例，替代SDK自动查找逻辑
      messaging.useServiceWorker(swRegistration)

      // 原有的权限申请与token获取逻辑
      await messaging.requestPermission()
      console.log("have permission")
      const token = await messaging.getToken()
      console.log(token)
    } catch (err) {
      console.log("Error", err)
    }
  })
}

直接在浏览器地址栏访问https://你的站点域名/firebase-messaging-sw.js，如果页面返回的是站点首页HTML而非SW的JS代码，说明文件路径或部署存在问题，优先调整文件存放位置即可解决。

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