HTML5缓存重置依赖文件内容变更而非版本号:AppCache需manifest字节级改动(如注释修改),Service Worker则靠sw.js内容变化触发更新,静态资源应使用哈希命名配合HTTP缓存。

HTML5 中无法靠“修改版本号”直接重置缓存,因为浏览器不会主动识别或响应 HTML 里写的任意版本标识。真正起作用的,是那些被浏览器缓存机制实际检查的文件内容变化——尤其是 manifest 文件(AppCache) 或 Service Worker 脚本 的字节级变更。单纯改一个注释里的 v=2.1 没用,除非它让整个 manifest 文件的哈希值变了。
Manifest 文件必须字节级改动才触发更新
AppCache 已废弃但仍有旧项目在用。浏览器只在两种情况下检查 manifest 是否有更新:
– 页面首次加载时;
– manifest 文件内容发生**哪怕一个字符的差异**(比如空格、换行、注释末尾加个点)。
- ✅ 正确做法:每次部署前,手动或脚本修改 manifest 第一行注释,例如从
# v1.0改为# v1.0.1,或加个时间戳空格:# build 20261008(注意末尾空格不能被构建工具删掉) - ❌ 错误做法:只改 JS/CSS 文件里的版本号,或在 HTML 中写
<meta name="version" content="2.0">—— 这些完全不参与 AppCache 更新判定 - ⚠️ 注意:Chrome 90+ 已移除
applicationCacheAPI,调用会返回undefined,需先判空再操作
Service Worker 才是现代标准,版本控制靠脚本本身
当前主流方案是 Service Worker。它的“版本号”就是注册时加载的 JS 文件内容。只要这个 JS 文件内容变了,浏览器就会拉新脚本、触发 install 和 activate 流程。
- ✅ 正确做法:每次更新缓存策略或资源列表,修改 sw.js 文件本身(比如改一段
const CACHE_NAME = 'v2-20261008',或加个 console.log),确保构建后文件哈希变化 - ✅ 必须配合
skipWaiting()+clients.claim(),否则新 worker 会等所有页面关闭才激活 - ✅ 清理旧缓存要在
activate回调里调用caches.delete(),不能只靠改名字
静态资源(JS/CSS/图片)靠 URL 版本参数强制刷新
这部分不是 HTML5 缓存机制,而是 HTTP 缓存行为。浏览器对 script.js 和 script.js?v=3 视为两个不同资源,自然会重新请求。
立即学习“前端免费学习笔记(深入)”;
- ✅ 推荐方式:构建时自动注入内容哈希,如
app.a1b2c3d4.js,而非人工维护?v=1.2 - ✅ 配合服务器设置
Cache-Control: max-age=31536000(一年),让 CDN 和浏览器长期缓存该文件 - ❌ 不要只改 HTML 中的
src却不改真实文件名——若服务器仍返回旧内容,加参数也白搭
最终重置效果需用户侧配合
即使你改了所有文件,老用户打开页面时仍可能运行旧缓存逻辑。必须引导或自动完成三步:
- 检测到新 Service Worker 就绪后,提示用户“有新版本,点击刷新”或自动
location.reload() - 若用 AppCache,监听
updateready后必须调swapCache()+location.reload(true),否则页面继续跑旧资源 - 开发调试时,可在 Application → Service Workers 面板勾选
Update on reload,并点Skip waiting



















