HTML离线运行需Service Worker+Cache API，必须通过HTTP(S)协议部署，区分HTML强制更新与静态资源长期缓存，预缓存字体、图标、API等全部依赖项，并通过DevTools断网验证。
怎么让 HTML 页面在没网络时还能打开
浏览器默认加载资源全靠网络，离线就白屏或报错。关键不是“写个 HTML”，而是告诉浏览器：哪些文件必须提前存好、怎么判断当前是否离线、出错了怎么兜底。
核心靠 service worker + cache API，不是用 manifest（已废弃）或单纯把文件丢进本地文件系统。
- 直接双击打开
index.html会触发file://协议，此时service worker根本注册不了——必须走http://或https://（哪怕本地起个python -m http.server） -
service worker只能控制同源页面，主页面和 SW 脚本必须同域（localhost:8000和localhost:3000不行） - 缓存策略要区分：HTML 本身必须强制更新（用版本号或哈希），而 CSS/JS/图片可设长期缓存
service worker 注册失败的常见原因
写了 navigator.serviceWorker.register('sw.js') 却没反应？大概率卡在这几个点上。
- 页面没跑在 HTTPS 或
localhost上——非 localhost 的 HTTP 域名下，service worker直接被浏览器拒绝注册 -
sw.js文件返回状态码不是200（比如 404、301、甚至 200 但 Content-Type 是text/plain）——浏览器只接受Content-Type: application/javascript - 注册代码放在了
window.onload之后，或异步模块里——必须尽早执行，最好放在<script>标签末尾或DOMContentLoaded回调里 - 浏览器隐私模式下，部分浏览器（如 Safari）会禁用
service worker，测试别只依赖无痕窗口
缓存静态资源时容易漏掉的关键路径
很多人只缓存了 index.html、style.css、app.js，结果离线后字体炸了、图标不显示、API 返回 404——因为没理清「页面运行真正依赖什么」。
立即学习“前端免费学习笔记（深入）”；
- 字体文件（
@font-face中的url()路径）、SVG sprite 图标、WebP/PNG fallback 图片路径都得显式加入缓存列表 - 如果用了第三方 CDN 字体（如 Google Fonts），离线时无法拉取——要么自托管字体文件，要么在 SW 里拦截请求并返回本地 fallback 字体
- API 接口路径也要预缓存空响应（如返回
{ "status": "offline" }），否则前端 fetch 会直接抛异常，而不是进catch - 注意路径匹配精度：
new Request('/api/status')和new Request('/api/status/')是两个不同 URL，缓存时别漏斜杠
调试离线行为最有效的三步操作
光看控制台没报错不等于离线可用。真实验证得动手断网+清环境。
- 在 Chrome DevTools 的
Application > Service Workers面板里，勾选Update on reload并点Unregister清掉旧 SW，再刷新——避免旧逻辑干扰 - 切到
Network面板，勾选Offline，然后硬刷（Ctrl+F5或Cmd+Shift+R），观察哪些请求变红（failed），对应检查缓存逻辑 - 打开
Application > Cache Storage，展开你的 cache 名称，逐个点开看是否真存进了 HTML、CSS、字体等文件——很多缓存代码看似执行了，其实cache.addAll()某个文件 404 就静默失败
离线能力不是加个 service worker 就完事，它本质是给浏览器下了一套明确的资源调度指令。最容易被忽略的是：缓存失效时机（比如 HTML 更新了但 SW 没改，用户永远看不到新内容）、以及第三方资源的兜底方案（字体、图标、埋点脚本）。这些不提前想清楚，上线后离线场景反而比在线更不可控。
