appcache 通过 manifest 文件实现离线访问，定义缓存、网络和备用资源，需在 html 中引用并正确配置 mime 类型，其行为依赖文件内容变更触发更新，存在跨域限制与安全风险，现已逐步被 service worker 取代。
HTML5 的离线应用功能通过 Application Cache（简称 AppCache）实现，使用 manifest 文件 来定义哪些资源需要被浏览器缓存。虽然 AppCache 已被现代浏览器逐步弃用（推荐使用 Service Worker 和 PWA），但在一些老项目或特定场景中仍可能遇到。以下是其详细配置和使用方法。
manifest 文件的作用
manifest 是一个文本文件，列出网页所需的所有离线资源，如 HTML、CSS、JS、图片等。浏览器根据该文件缓存资源，使用户在无网络时仍可访问页面。
AppCache 有三种资源分类：
- CACHE：明确要缓存的资源
- NETWORK：无需缓存，必须联网才能访问
- FALLBACK：指定备用资源，当请求失败时使用
如何配置 manifest 文件
创建一个以 .appcache 或 .manifest 为扩展名的文件，例如：cache.appcache
文件内容示例如下：
CACHE MANIFEST # 版本号：v1.0.0 <p>CACHE: /index.html /style.css /app.js /images/logo.png</p><p>NETWORK: /api/data.json /login.php</p><p>FALLBACK: /offline.html</p>
说明：
- CACHE: 下列资源会被缓存，首次加载后即使断网也可访问
- NETWORK: 这些资源不缓存，必须联网访问，否则报错
- FALLBACK: 如果某个资源无法加载（如 404），则显示指定的备用页（如 offline.html）
- # 开头为注释，常用于版本控制。修改任意行会触发浏览器重新下载缓存
HTML 页面引用 manifest
在需要离线支持的 HTML 文件的 标签中添加 manifest 属性：
服务器需正确配置 MIME 类型，确保 .appcache 文件以正确类型返回：
- Apache 配置：在 .htaccess 中添加
AddType text/cache-manifest .appcache - Nginx 配置：在 mime.types 中加入
text/cache-manifest appcache appcache?
若 MIME 类型不正确，manifest 将无法被识别，导致缓存失败。
AppCache 的行为特点
理解其运行机制对调试很重要：
- 首次访问页面时，浏览器解析 manifest 并缓存所列资源
- 之后每次访问，浏览器都会检查 manifest 文件是否有变化（基于内容，非时间戳）
- 只有 manifest 文件内容改变（比如版本号更新），才会重新下载所有资源
- 即使只改了一个小文件，整个缓存也会被刷新
- 如果 manifest 文件本身无法访问，缓存被视为失效，离线功能将停止工作
常见问题与注意事项
- manifest 文件必须与主页面同域，不能跨域引用
- HTTPS 环境下建议避免使用 AppCache，因其存在安全风险
- 调试时可通过 JavaScript 监听 applicationCache 事件：
window.applicationCache.addEventListener('updateready', function() {
if (window.applicationCache.status === window.applicationCache.UPDATEREADY) {
window.applicationCache.swapCache(); // 应用新缓存
}
});
- 清除缓存只能通过删除浏览器缓存或修改 manifest 内容强制更新
- Chrome DevTools 的 Application → Manifest 可查看缓存状态
基本上就这些。尽管 AppCache 曾是离线 Web 应用的重要一步，但因其设计缺陷（如更新机制复杂、缓存难管理），已被现代标准淘汰。当前更推荐使用 Service Worker + Cache API 实现更灵活可靠的离线功能。但对于维护旧系统，了解 manifest 缓存机制仍然必要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
