Flutter Web配置Firebase推送时遇ServiceWorker注册MIME类型不支持问题求助

触发text/html MIME类型不支持的核心原因是：调用getToken时，Firebase Messaging会默认尝试拉取项目根路径下的firebase-messaging-sw.js完成Service Worker注册，但你当前项目根目录不存在这个文件，本地开发服务器找不到对应静态资源时，会按规则返回index.html的内容做兜底，浏览器检测到脚本返回的是html格式而非可执行的js格式，就会抛出注册失败的错误。
这个问题和你已经能正常注册的flutter_service_worker.js没有逻辑冲突，是独立的默认注册流程触发的异常。

分步解决思路 #

• 补全缺失的专用Service Worker静态文件
  进入Flutter Web项目的web根目录（和index.html、flutter_service_worker.js同级的目录），新建firebase-messaging-sw.js文件，写入Firebase Messaging要求的最小初始化逻辑：

  // 替换为你对应Firebase项目的配置值
  importScripts("https://www.gstatic.com/firebasejs/10.12.0/firebase-app-compat.js");
  importScripts("https://www.gstatic.com/firebasejs/10.12.0/firebase-messaging-compat.js");
  
  firebase.initializeApp({
    apiKey: "你的项目API Key",
    authDomain: "你的项目授权域名",
    projectId: "你的项目ID",
    storageBucket: "你的项目存储桶",
    messagingSenderId: "你的推送发送者ID",
    appId: "你的应用ID"
  });
  
  const messaging = firebase.messaging();
  

  确保该文件在项目构建后，会和index.html输出到同一静态资源根目录，不要嵌套进子文件夹，否则路径匹配不上依然会触发资源找不到的问题。
• 验证静态资源可达性
  本地启动项目后，直接在浏览器地址栏访问http://localhost:61027/firebase-messaging-sw.js，如果能正常看到你写入的js代码内容，没有被重定向回首页，就说明路径配置正确。
• 规避两个Service Worker的注册冲突
  你已经注册的flutter_service_worker.js的默认scope是/，而Firebase Messaging默认注册的sw的scope是/firebase-cloud-messaging-push-scope，两者不存在scope重叠，独立注册也不会互相干扰。如果你不想让Firebase单独注册独立的Service Worker，完全可以复用你已经注册成功的flutter_service_worker.js实例，跳过Firebase的默认注册流程：
  调整getToken的调用逻辑，显式传入已有的Service Worker注册实例即可：

  // 获取当前已经注册成功的Service Worker实例
  final swRegistration = await navigator.serviceWorker.getRegistration();
  // 传入实例给getToken，跳过默认的sw拉取注册流程
  getIt<FirebaseMessaging>().getToken(
    vapidKey: "xxx",
    serviceWorkerRegistration: swRegistration,
  );
  

  注意：参数名需要和你当前使用的firebase_messaging插件版本对应，不同版本的入参命名可能略有差异，可通过插件的源码注释核对。

常见踩坑点排查 #

• 本地开发时如果配置了全路径重定向规则，把所有未匹配的路由都指向index.html，就会导致访问firebase-messaging-sw.js时被拦截返回html内容，触发MIME类型报错，需要给这个静态文件配置单独的直连规则，不参与重定向。
• 旧的缓存Service Worker可能会拦截对firebase-messaging-sw.js的请求，返回本地缓存的首页内容，开发时可以直接清掉浏览器对当前域名的全部缓存，再重新测试。

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