HTML5离线存储唯一标准方案是Service Worker+Cache API，appcache已废弃，HTML4无原生离线能力；SW需HTTPS注册、刷新后生效、显式缓存策略、主动更新版本。
HTML5 的离线存储靠 Service Worker + Cache API 实现，appcache 已被废弃；HTML4 完全没有原生离线存储能力。
Service Worker 是当前唯一标准方案
它本质是一个可拦截网络请求的脚本，在页面加载前注册，能缓存资源、控制加载逻辑、支持后台同步。关键点：
-
navigator.serviceWorker.register()必须在 HTTPS（或localhost）下运行，HTTP 站点会静默失败 - 注册后首次访问不会触发缓存，需刷新一次才生效（因为 SW 在当前页面生命周期外启动）
- 缓存策略需显式编写：比如对
/static/下的 JS/CSS 用cache.addAll()预加载，对 API 请求用cache.match()+fetch()落后更新 - 版本更新靠
self.skipWaiting()+clients.claim()主动激活新 SW，否则旧缓存长期不更新
/* sw.js */
const CACHE_NAME = 'v1';
self.addEventListener('install', e => {
e.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll([
'/',
'/index.html',
'/static/app.js',
'/static/style.css'
]))
);
});
self.addEventListener('fetch', e => {
e.respondWith(
caches.match(e.request)
.then(resp => resp || fetch(e.request))
);
});
appcache 已被所有现代浏览器弃用
HTML5 早期曾用 manifest 文件（.appcache），但存在严重缺陷：
- 整个站点必须全部缓存或全部不缓存，无法按需更新单个资源
- 离线时即使只改一行 CSS，也必须修改 manifest 文件末尾注释才能触发更新
- 缓存失败时静默回退到网络，且无错误回调机制
- Chrome 94+、Firefox 84+、Safari 16.4+ 已完全移除支持，调用
window.applicationCache会返回undefined
HTML4 根本没有离线存储机制
HTML4 时代只能依赖浏览器默认缓存（Expires、Cache-Control HTTP 头），但这不是“可控离线”，而是被动缓存，用户关网后刷新页面大概率显示“无法连接”。
立即学习“前端免费学习笔记（深入）”；
- 没有 JS API 可读写本地资源列表
- 无法拦截网络请求做 fallback
- 不能监听网络状态变化并切换策略
- 若强行用
localStorage存 HTML 字符串再document.write()渲染，会丢失样式、脚本执行环境、CSP 限制，且不支持二进制资源（图片、字体）
兼容老项目？别修 appcache，直接升级 SW
如果现有项目还在用 manifest，不要尝试打补丁修复，因为：
- 新浏览器已不解析
manifest属性，加了也无效 - SW 可渐进增强：先让首页走 SW 缓存，再逐步覆盖其他路由和 API
- 调试时用 Chrome DevTools → Application → Service Workers 面板，勾选 “Update on reload” 和 “Offline” 模拟真实离线场景
- 注意
fetch()默认不带 cookie，API 请求需加{ credentials: 'include' }，否则登录态丢失
真正麻烦的不是写几行 SW 代码，而是理清哪些资源必须离线可用、哪些该始终联网、缓存过期怎么处理——这些得结合业务路径来设计，不是套个模板就能跑通的。
