manifest文件变更后浏览器不触发更新怎么办
HTML5的manifest机制早已被现代浏览器弃用（Chrome 94+、Firefox 92+ 完全移除），但仍有存量老项目依赖它。如果发现修改了manifest文件内容，用户刷新页面却没拉新资源，根本原因不是“缓存没清”，而是浏览器只在manifest文件本身HTTP响应头或内容字节发生变化时才判定“有更新”。
常见错误现象：manifest里改了某个JS路径，但没改动manifest文件本身的任何一行（比如漏掉注释末尾空格、时间戳、版本号）；或者服务器返回了304 Not Modified，导致浏览器跳过比对。
- 必须确保每次发布都让
manifest文件的响应体发生**字节级变化**——最稳妥的是在文件末尾加一行动态注释：# version 2.1.7-20240615 - 服务器不能对
.appcache（或任意manifest后缀）返回Cache-Control: public, max-age=31536000，否则浏览器连请求都不发 - 检查Network面板，确认
manifest请求返回的是200且响应体确实变了；若看到304，说明服务端ETag/Last-Modified逻辑拦住了更新检测
如何监听到manifest更新完成并提示用户刷新
靠window.applicationCache（现已废弃）的事件链实现，但它的行为非常脆弱：事件触发时机不统一、部分安卓WebView根本不派发updateready、用户切到后台再切回可能导致事件丢失。
使用场景仅限于仍需兼容IE10/Android 4.x等极旧环境；新项目请直接放弃，改用Service Worker。
立即学习“前端免费学习笔记（深入）”；
- 必须在
document.readyState === 'complete'之后绑定事件，否则可能错过checking阶段 - 只监听
updateready不够——要先监听checking确认进入更新流程，再等updateready，最后调window.applicationCache.swapCache() -
swapCache()后不会自动重载资源，需手动触发window.location.reload(true)；但别立刻reload，建议加个按钮让用户确认，避免中断表单输入
applicationCache.addEventListener('updateready', function() {
if (applicationCache.status === applicationCache.UPDATEREADY) {
if (confirm('新版本已就绪，是否立即刷新？')) {
window.location.reload(true);
}
}
});为什么Chrome DevTools里显示“Application Cache”但实际不生效
DevTools的Application → Manifest面板只是历史残留UI，自Chrome 94起该面板不再反映真实状态，点进去看到的“Resources”列表可能是上次缓存的快照，甚至来自其他域名的遗留数据。它既不校验manifest语法，也不验证MIME类型是否为text/cache-manifest。
真正决定是否启用离线缓存的，是HTML中这个属性是否存在，以及对应URL能否返回正确内容和Header。
- 服务器必须返回
Content-Type: text/cache-manifest，返回text/plain或application/octet-stream会被静默忽略 - 检查Response Headers里是否有
X-Content-Type-Options: nosniff——如果有，且Content-Type写错，浏览器会直接拒收manifest - 不要信DevTools里“Status: Cached”的提示，它常显示过期信息；以Network里
manifest请求的Status码和响应体为准
替代方案：用Service Worker做可控更新比manifest可靠得多
Manifest的“全量替换”模型无法支持增量更新、灰度发布、失败回滚。而Service Worker能精确控制每个fetch请求的缓存策略，并通过skipWaiting()和clients.claim()实现平滑升级。
如果你还在维护manifest，现在迁移成本其实很低：只需一个最小化SW脚本，把原来manifest里的静态资源列表转成cache.addAll([...])，再监听install和activate事件即可。
- 首次注册SW后，旧manifest缓存仍存在，需调
window.applicationCache.abort()+localStorage.clear()清理（仅限过渡期） - SW的
fetch事件里别盲目event.respondWith(caches.match(...))，未命中的请求必须return fetch(event.request)，否则页面白屏 - 调试时勾选DevTools → Application → Service Workers → “Update on reload”，否则改了SW代码也不会重新安装
manifest的“自动更新”本质是黑盒，而Service Worker把控制权交还给开发者——这点恰恰是最容易被忽略的分水岭。
