HTML5 应用程序缓存（AppCache）——“离线先用后弃”的简史教程

11-23 58 0 0

一句话现状：manifest 语法已废弃，现代项目请直接上 Service Worker；但老项目维护、考古面试还得认得它。下面带你 10 分钟看懂“怎么用 + 怎么崩 + 怎么迁”。

1. 为什么会出现 AppCache？

早年网页一断网就全屏“无法连接”，HTML5 为了给 Web 应用“离线可用”能力，推出 Application Cache —— 通过 manifest 清单告诉浏览器：
“把这些文件统统囤硬盘，没网也能用。”

2. 三步启用（考古代码，复制即跑）

① 写 manifest 文件（demo.appcache）

CACHE MANIFEST
# v1.0.2 改版本号即强制更新

CACHE:
index.html
css/style.css
js/app.js
images/logo.png

NETWORK:
*          # 其他资源走网络

FALLBACK:
/ 404.html # 离线时找不到路径就回落

文件必须以 CACHE MANIFEST 开头
建议扩展名 .appcache，服务器 MIME 设为 text/cache-manifest

② HTML 加挂清单

<!DOCTYPE html>
<html lang="zh" manifest="demo.appcache">
<head>
  <meta charset="UTF-8">
  <title>离线演示</title>
</head>
<body>
  <h1>断网也能看</h1>
</body>
</html>

③ JS 监听更新（可选）

window.applicationCache.addEventListener('updateready', () => {
  if (window.applicationCache.status === window.applicationCache.UPDATEREADY) {
    window.applicationCache.swapCache(); // 换新缓存
    location.reload();                   // 重载页面
  }
});
window.applicationCache.update(); // 手动触发检查

第一次访问：浏览器后台下载 全部 CACHE 段资源；以后进页面先读本地，0 请求秒开。

3. 优点 & 适用场景（曾经真香）

优点	说明
离线浏览	没 Wi-Fi、飞行模式都能打开页面
秒开速度	资源本地拿，HTTP 0 请求
减服务器压力	只下载 manifest 变更的资源

2013 前后适合做 展示型离线 WebApp、地铁宣传页、电子书。

4. 缺陷 & 翻车现场（被弃用的元凶）

坑点	现场描述
更新机制玄学	只改资源不改 manifest → 用户永远拿不到新版本
全量失败	只要 CACHE 里一个文件 404，整锅缓存报废
调试困难	浏览器默默在后台下资源，控制台看不到
无法精细控制	无法“只缓存图片，HTML 实时”——非黑即白
HTTPS 强依赖	现代浏览器要求清单页必须 https

→ W3C 于 2021 起正式标注 AppCache 为过时，主流浏览器逐步移除支持。

5. 迁移路线：manifest → Service Worker（官方推荐）

① 注册 SW

// main.js
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(reg => {
    console.log('SW 注册成功', reg);
  }).catch(err => console.log('SW 注册失败', err));
}

② 写缓存策略（sw.js）

const CACHE = 'offline-v1';

self.addEventListener('install', e => {
  e.waitUntil(
    caches.open(CACHE).then(cache => cache.addAll([
      '/',
      '/css/style.css',
      '/js/app.js',
      '/images/logo.png'
    ]))
  );
});

self.addEventListener('fetch', e => {
  e.respondWith(
    caches.match(e.request).then(res => res || fetch(e.request))
  );
});

对比 AppCache：
更新粒度到单个文件
可网络回退、可策略组合（缓存优先→网络→兜底）
DevTools 可视化调试

6. 什么情况下还维护 AppCache？

政府/银行内网老项目——IE11 机器无法升级 SW。
考古型面试——问“manifest 三段分别是什么”。
历史代码交接——先能跑，再渐进迁。

7. 口诀总结（背完走天下）

“manifest 分三段 CACHE/NETWORK/FALLBACK；
更新靠版本号，一文件 404 就全崩；
离线可用是优点，调试困难被弃用；
新项直接上 Service Worker，缓存策略任我行。”

看完这篇，下次再遇到 manifest="xxx.appcache"——你就知道：
“能跑，但别再用；能迁，就快跑！”

快来点个赞吧

编程知识