要启用HTML5应用缓存，需在html标签添加manifest属性指向清单文件，创建以CACHE MANIFEST开头的.cache文件并配置MIME类型，最后通过开发者工具验证缓存状态及更新机制。
如果您希望网页在离线状态下仍能正常加载并运行，则需要启用 HTML5 的应用缓存（Application Cache）功能。该功能通过在 HTML 标签中添加 manifest 属性 并配合特定的缓存清单文件来实现。以下是开启 HTML5 应用缓存的具体步骤：
一、在 HTML 文档根元素中添加 manifest 属性
HTML5 应用缓存依赖于 html 标签中的 manifest 属性，该属性指向一个缓存清单文件（.appcache 或 .manifest），浏览器将根据该文件决定哪些资源需要被缓存。此属性必须位于文档的 开始标签中，且仅对页面首次加载生效。
1、打开您的 HTML 文件，定位到 标签。
2、在 标签内添加 manifest 属性，例如：manifest="cache.manifest"。
立即学习“前端免费学习笔记（深入）”；
3、确保该属性值为相对路径或绝对路径，且与实际清单文件位置一致。
二、创建缓存清单文件（cache.manifest）
缓存清单文件是一个纯文本文件，定义了哪些资源应被浏览器缓存、哪些需始终从网络获取、以及离线时的回退页面。该文件必须以 CACHE MANIFEST 开头，且响应头需包含 Content-Type: text/cache-manifest。
1、新建一个名为 cache.manifest 的文本文件。
2、在文件首行写入：CACHE MANIFEST。
3、在下一行添加 CACHE: 段落，并在其后逐行列出需缓存的资源路径，如 index.html、style.css、script.js。
4、可选添加 NETWORK: 段落，列出始终需联网获取的资源（如 API 接口）。
5、可选添加 FALLBACK: 段落，指定离线时的替代资源，如 / /offline.html。
三、配置 Web 服务器返回正确的 MIME 类型
若服务器未将 .manifest 或 .appcache 文件识别为 text/cache-manifest 类型，浏览器将拒绝解析该清单文件，导致缓存失效。因此必须显式设置响应头。
1、对于 Apache 服务器，在网站根目录的 .htaccess 文件中添加：AddType text/cache-manifest .manifest。
2、对于 Nginx 服务器，在 server 块中添加：types { text/cache-manifest manifest; }。
3、对于本地测试环境（如 Python 的 http.server），需改用支持自定义 MIME 的简易服务器，或使用构建工具注入正确响应头。
四、验证缓存是否成功启用
浏览器仅在页面首次访问且清单文件内容发生改变时触发更新流程。启用后，可通过开发者工具确认缓存状态及资源来源。
1、在 Chrome 或 Firefox 中打开网页，按 F12 打开开发者工具。
2、切换至 Application（Chrome）或 Storage（Firefox）面板。
3、展开 Cache Storage 或 Application Cache 节点，查看是否存在对应 origin 的缓存条目。
4、刷新页面后断开网络，检查页面是否仍可完整加载并运行交互功能。
五、处理缓存更新与版本控制
HTML5 应用缓存不会自动检测资源文件内容变化，仅当清单文件本身内容（包括注释）发生变化时才会触发更新。因此需主动管理清单版本以强制刷新缓存。
1、在 cache.manifest 文件顶部添加注释行，如：# v2.1.0 2024-06-15。
2、每次更新缓存资源前，修改该注释行的时间戳或版本号。
3、确保部署时清单文件与所列资源同步更新，避免因资源缺失导致缓存失败。
