Flutter Web页面刷新时卡在index.html，ServiceWorker注册失败

DevOps 小满

2026-8-2

Flutter Web刷新后卡在index.html，Service Worker注册失败（MIME类型错误）

问题核心

刷新页面后卡在index.html，调试发现navigator.serviceWorker.register('/flutter_service_worker.js');抛出异常：

Exception while loading service worker: DOMException: Failed to register a ServiceWorker for scope ('http://localhost:9090/wiki/') with script ('http://localhost:9090/wiki/flutter_service_worker.js?v=null'): The script has an unsupported MIME type ('text/html').

本质是请求flutter_service_worker.js时，服务端返回了text/html类型的内容（通常是index.html），而非预期的application/javascript。

解决办法

检查服务端路由配置
单页应用刷新时，浏览器会直接请求当前路径下的资源，如果服务端没有正确映射静态文件，会把所有路由请求都返回index.html。需要调整服务端配置：确保静态资源（包括flutter_service_worker.js）能被正确访问，只有当请求的路由不存在时，才返回index.html作为fallback。
验证脚本的实际访问结果
在浏览器地址栏直接输入http://localhost:9090/wiki/flutter_service_worker.js：
- 如果返回的是index.html内容，说明服务端路由配置错误，需要修复静态文件的访问路径映射。
- 如果返回的是正确的JS代码，检查响应头的Content-Type是否为application/javascript，若不是，在服务端添加对应的MIME类型映射。
调整Service Worker注册路径
若应用部署在/wiki/子路径下，可改用相对路径注册，避免路径解析错误：
```
navigator.serviceWorker.register('./flutter_service_worker.js');
```
也可以直接指定完整的正确文件路径。
清理浏览器缓存与Service Worker
打开浏览器开发者工具（F12），进入Application标签页：
- 在Service Workers面板注销已注册的服务 worker。
- 在Storage面板清除缓存数据。
  重启浏览器后重新加载页面。