React PWA重建部署后空白页：文件哈希变更引发脚本加载失败

问题现象 #

• 基于Create React App构建的PWA应用，未以已安装PWA形式运行
• 重新构建部署后页面空白，只有清除浏览器缓存才能恢复正常
• 控制台抛出错误：

Refused to execute script from 'https://[MYSITE]/static/js/main.5499eb74.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

排查结论 #

1. 请求旧哈希的JS文件main.5499eb74.js时，服务器返回的是新部署的index.html（其中引用的是新哈希的main.9f20fe6e.js），说明旧JS文件已被新构建产物覆盖删除
2. Service Worker仍在返回旧版本的index.html，该页面引用的是已不存在的旧哈希JS文件，导致浏览器请求资源时收到HTML响应，触发MIME类型校验错误

解决方案 #

1. 修正索引页的缓存策略 #

确保服务器给index.html设置正确的HTTP缓存头，禁止长期缓存：

Cache-Control: no-cache, no-store, must-revalidate
Pragma: no-cache
Expires: 0

这样浏览器和Service Worker每次都会向服务器请求最新的index.html，避免缓存旧版本。

2. 配置Service Worker自动更新 #

在Create React App的Service Worker注册逻辑中添加更新检测，新版本部署后主动提示用户刷新：
修改src/index.js或src/serviceWorkerRegistration.js：

serviceWorkerRegistration.register({
  onUpdate: (registration) => {
    if (confirm('应用已更新，点击确定刷新页面')) {
      registration.waiting.postMessage({ type: 'SKIP_WAITING' });
      window.location.reload();
    }
  },
});

这样当Service Worker检测到新版本时，会触发提示，用户确认后立即切换到新版本，避免加载旧缓存的index.html。

3. 静态资源的缓存策略优化 #

• 带哈希的静态资源（如main.xxx.js、main.xxx.css）可以设置长期缓存：

Cache-Control: public, max-age=31536000, immutable

这类资源哈希变更后浏览器会自动请求新文件，无需担心缓存问题。

• 无哈希的资源（如manifest.json、favicon.ico）同样要设置禁止长期缓存，避免同步问题。

临时修复方案 #

如果已经部署了有问题的版本，可以临时通过以下方式恢复：

• 打开浏览器开发者工具，进入Application > Service Workers面板，点击Unregister注销旧的Service Worker，然后刷新页面
• 清除浏览器缓存后刷新，加载最新的应用资源

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