HTML5 应用程序缓存全攻略：从原理到实战-CFANZ编程社区

一、技术背景与现状

HTML5 应用程序缓存（Application Cache，简称 AppCache）曾是构建离线 Web 应用的核心技术，通过缓存 HTML、CSS、JavaScript 等静态资源，实现离线访问和快速加载。尽管该技术已被 W3C 标记为废弃（2020年起主流浏览器逐步移除支持），但其设计理念仍值得学习，且在特定场景（如旧系统维护）中仍有应用价值。现代开发中，Service Workers + Cache API 是更推荐的替代方案。

二、核心原理与工作流程

缓存机制：

浏览器首次访问页面时，解析 HTML 中 manifest 属性指向的清单文件（.appcache 或 .manifest）。
根据清单文件规则下载资源到本地缓存。
后续访问优先使用缓存，离线时仅加载已缓存资源。

生命周期：

首次加载：下载清单文件 → 缓存指定资源 → 标记应用为“已缓存”。
后续加载：检查清单文件更新 → 无更新则使用缓存 → 有更新则触发更新流程。
缓存失效：用户清除缓存、清单文件被删除或浏览器策略限制。

关键事件：

checking：检查清单文件更新。
downloading：下载新资源。
updateready：新缓存就绪，需调用 swapCache() 切换。
error：清单文件错误或网络失败。

三、实战教程：构建离线博客应用

1. 创建清单文件 `blog.appcache`

manifestCACHE MANIFEST
 # 版本号：2025-08-04 v1.0
  
 CACHE:
 /index.html
 /css/style.css
 /js/app.js
 /images/logo.png
 /posts/welcome.html
  
 NETWORK:
 /api/fetch-posts  # 动态数据需实时获取
 *                 # 其他未列出的资源需联网
  
 FALLBACK:
 /posts/ /offline-post.html  # 离线时访问文章显示备用页

关键说明：

版本注释：修改版本号或注释可强制更新缓存。
通配符 *：表示所有未列出的资源需联网访问。
路径规则：相对路径基于清单文件所在目录。

2. 修改 HTML 文件

html<!DOCTYPE html>
 <html manifest="blog.appcache">
 <head>
     <meta charset="UTF-8">
     <title>离线博客</title>
     <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
     <header>
         <img src="images/logo.png" alt="Logo">
         <h1>我的离线博客</h1>
     </header>
     <main id="content">加载中...</main>
     <script src="js/app.js"></script>
 </body>
 </html>

3. 服务器配置

Apache（`.htaccess`）

apacheAddType text/cache-manifest .appcache

Nginx（`mime.types`）

nginxtypes {
     text/cache-manifest appcache;
 }

4. 监听缓存事件（`app.js`）

javascriptif ('applicationCache' in window) {
     const appCache = window.applicationCache;
  
     appCache.addEventListener('updateready', () => {
         if (appCache.status === appCache.UPDATEREADY) {
             // 提示用户刷新页面
             if (confirm('有新内容可用，是否刷新？')) {
                 appCache.swapCache();
                 window.location.reload();
             }
         }
     });
  
     appCache.addEventListener('error', (e) => {
         console.error('缓存错误:', e);
     });
  
     // 手动检查更新（可选）
     document.getElementById('check-update').addEventListener('click', () => {
         appCache.update();
     });
 }

四、调试与常见问题

缓存未生效：

检查服务器 MIME 类型是否为 text/cache-manifest。
确认 HTML 中 manifest 属性路径正确。
清除浏览器缓存后重试。

更新不触发：

修改清单文件版本号或内容。
确保文件路径无拼写错误。

离线回退失效：

检查 FALLBACK 路径是否正确。
确保回退页面（如 offline-post.html）在 CACHE 中列出。

Chrome 开发者工具：

Application → Cache Storage：查看缓存内容。
Console：过滤 Application Cache 事件日志。

五、技术对比与迁移建议

特性	AppCache	Service Workers
缓存控制	静态清单文件	动态编程控制
更新机制	依赖文件修改	主动触发更新
网络拦截	仅支持简单规则	支持精细请求拦截
浏览器支持	已废弃	现代浏览器全面支持