html5 的离线应用功能主要依赖于 application Cache（简称 AppCache），它允许网页在没有网络连接的情况下依然可以加载和运行。虽然 AppCache 已被现代浏览器逐步弃用（推荐使用 Service Workers 替代），但在一些旧项目中仍可能遇到。以下是其基本配置方法。
什么是 Application Cache
Application Cache 是 html5 提供的一种机制，通过一个缓存清单文件（cache manifest），告诉浏览器哪些资源需要离线存储，从而实现离线访问网页的功能。
启用 Application Cache 的步骤
要构建基于 AppCache 的离线应用，需完成以下三个关键步骤：
1. 在 HTML 标签中引用 manifest 属性
立即学习“前端免费学习笔记（深入）”；
在需要支持离线的页面的 <html> 标签中添加 manifest 属性：
<html manifest="cache.manifest">
这个属性指向一个文本文件（通常命名为 cache.manifest），该文件定义了需要缓存的资源列表。
2. 创建缓存清单文件（.manifest）
缓存清单文件是一个纯文本文件，必须以正确的 MIME 类型 text/cache-manifest 被服务器提供。其内容结构如下：
CACHE MANIFEST<br> # 版本号：v1.0<br><br> CACHE:<br> /index.html<br> /style.css<br> /script.js<br> /images/logo.png<br><br> NETWORK:<br> /api/<br><br> FALLBACK:<br> /offline.html
说明：
- CACHE: 明确列出需要离线缓存的资源（可省略该标签，默认所有条目都属于缓存）
- NETWORK: 指定哪些资源不缓存，必须在线访问（如 API 接口）
- FALLBACK: 定义备用资源，当请求失败时加载（例如显示 offline.html）
- # 开头为注释，常用于版本控制，修改它可触发缓存更新
3. 配置服务器 MIME 类型
确保 Web 服务器能正确识别 .manifest 文件并返回 text/cache-manifest 类型。例如：
- apache：在
.htaccess中添加AddType text/cache-manifest .manifest - nginx：在配置文件中加入
types { text/cache-manifest manifest; }
缓存更新机制
浏览器仅在 manifest 文件内容发生变化时才会更新缓存。即使资源本身已更新，只要清单文件未变，就不会重新下载。因此建议在文件中加入版本注释：
# version 1.1
修改版本号即可触发整个缓存的重新下载。
注意事项与局限性
AppCache 存在多个问题，已被现代开发所淘汰：
- 缓存更新机制不灵活，容易导致“更新滞后”
- 一旦资源被缓存，除非清单改变，否则无法获取最新版本
- 调试困难，缓存行为不符合直觉（例如首次加载即缓存）
- 已被主流浏览器标记为废弃
目前更推荐使用 Service Worker + Cache API 实现离线功能，它提供了更精细的控制能力和更好的用户体验。
基本上就这些，如果你维护的是老项目，了解 AppCache 仍有价值；新项目请优先考虑现代方案。