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 中写
—— 这些完全不参与 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
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
