HTML5 应用程序缓存
HTML5 应用程序缓存（App Cache）曾用于让网页离线也能访问：通过一个 manifest 清单文件，把页面、样式、脚本缓存到本地。需要先说明：该技术已被标准废弃（W3C 已移除），新项目应改用 Service Worker，本课仅作原理了解与旧项目维护参考。
什么是 manifest
manifest 是一个以 .appcache 结尾的文本文件，逐行列出要缓存的资源，页面通过 <html> 的 manifest 属性引用它：
<!DOCTYPE html>
<html manifest="demo.appcache">
<body>
<h1>离线页面</h1>
<img src="logo.png" alt="logo">
</body>
</html>
manifest 的三个区段
清单文件按区段组织，# 开头是注释：
CACHE MANIFEST
# 上面的页面自身、下面所有文件都会被缓存
CACHE:
index.html
style.css
logo.png
NETWORK:
login.php
# 星号表示"除缓存外都走网络"
FALLBACK:
/online.html offline.html
# 无法访问 online.html 时，改用离线页 offline.html
浏览器首次访问后，会按此清单把资源存入本地，之后断网刷新仍可打开页面。
工作原理简说
- 首次访问带 manifest 的页面，浏览器下载全部清单资源并缓存。
- 之后每次访问，浏览器先展示缓存内容，再在后台检查 manifest 是否变化。
- 若 manifest 文件本身有改动，浏览器会更新缓存，但要用户再次刷新才应用新版本。
也可以用 JS 监听更新过程：
window.applicationCache.onupdateready = function () {
if (confirm("新版本已就绪，是否刷新？")) {
location.reload();
}
};
为什么被废弃
App Cache 存在"更新不可靠、难以清理、页面自动被缓存"等缺陷——即使你只想缓存一张图，整页都会被缓存，清理异常麻烦。因此标准组织废弃了它。
替代方案：Service Worker
离线能力如今由 Service Worker 提供：一个独立运行的 JS 脚本，用事件精确控制缓存哪些请求、何时更新、怎么降级，可控性强得多。写法骨架如下：
// sw.js —— 需在 HTTPS 下运行
self.addEventListener("install", function (e) {
console.log("Service Worker 已安装");
});
易错点
① manifest 文件必须返回正确的 MIME 类型（text/cache-manifest）；② 清单中列出的资源都必须同源且可访问，否则整批缓存失败；③ 想更新缓存必须改动 manifest 文件本身（改内容即可，文件名不用变）；④ 浏览器开发者工具里需勾选"离线"才能测试效果。
小结：App Cache 是 HTML5 早期的离线方案，已废弃且有明显缺陷；现在做离线应用应学习 Service Worker，App Cache 只在维护老项目时才会遇到。