HTML5应用缓存通过manifest文件实现离线访问，需在html标签添加manifest属性并创建CACHE、NETWORK、FALLBACK规则的清单文件，服务器需配置text/cache-manifest MIME类型，缓存仅在manifest内容变化时更新，可通过JavaScript监听状态并调用swapCache更新，但该技术已被现代浏览器弃用，存在更新不及时、调试困难等问题，推荐使用Service Worker和Cache API替代。
HTML5 提供了“应用缓存”（Application Cache）功能，可以让网页在离线状态下仍然可用。虽然这项技术已经被现代浏览器逐步弃用（推荐使用 Service Workers 和 Cache API），但了解其基本配置方法仍有助于理解离线缓存原理。
1. 启用应用缓存（AppCache）
要启用 HTML5 应用缓存，需在页面的 标签中添加 manifest 属性：
该属性指向一个文本文件（通常命名为 cache.manifest），用于定义哪些资源需要被缓存。
2. 创建缓存清单文件（manifest 文件）
缓存清单文件是一个纯文本文件，包含需要缓存的资源列表。它必须以正确的 MIME 类型 text/cache-manifest 返回，通常需要在服务器上进行配置。
立即学习“前端免费学习笔记（深入）”；
示例：cache.manifest
CACHE MANIFEST# 版本号：v1.0
CACHE:
/index.html
/style.css
/script.js
/image.png
NETWORK:
/login.php
FALLBACK:
/ /offline.html
说明：
- CACHE: 明确列出需要缓存的资源（默认所有条目都在此组）
- NETWORK: 表示这些资源不缓存，仅在线时可访问
- FALLBACK: 定义备用资源，当请求失败时使用（如网络断开）
3. 配置服务器 MIME 类型
服务器必须支持 .manifest 文件的正确 MIME 类型。否则缓存将无法工作。
常见服务器配置方法：
citySHOP是一款集CMS、网店、商品、系统，管理更加科学快速；全新Jquery前端引擎；智能缓存、图表化的数据分析，手机短信营销；各种礼包设置、搭配购买、关联等进一步加强用户体验；任何功能及设置都高度自定义；MVC架构模式，代码严禁、规范；商品推荐、促销、礼包、折扣、换购等多种设置模式；商品五级分类，可自由设置分类属性；商品展示页简介大方，清晰，图片自动放大，无需重开页面；商品评价、咨询分开
-
Apache： 在
.htaccess或配置文件中添加：
AddType text/cache-manifest .manifest -
Nginx： 在配置文件中添加：
types { text/cache-manifest manifest; } -
IIS： 在 web.config 中添加 MIME 映射：
4. 缓存更新机制
只有当 manifest 文件内容发生变化时，浏览器才会更新缓存。即使资源本身已修改，只要 manifest 未变，缓存就不会更新。
建议在 manifest 中添加注释作为版本标记，例如：
# 版本 1.1修改此行即可触发缓存更新。
JavaScript 可监听缓存状态：
var appCache = window.applicationCache;appCache.update(); // 尝试更新缓存
appCache.addEventListener('updateready', function() {
if (appCache.status === window.applicationCache.UPDATEREADY) {
appCache.swapCache(); // 应用新缓存
}
}, false);
5. 注意事项与局限性
HTML5 应用缓存存在一些严重缺陷：
- 一旦资源被缓存，除非 manifest 改变，否则不会更新
- 调试困难，缓存行为不易控制
- 部分浏览器已废弃 AppCache（如 Chrome 从 86 版本起移除）
现代替代方案是使用 Service Worker 配合 Cache API 实现更灵活、可控的离线缓存。
基本上就这些。如果你正在开发新项目，建议直接学习 Service Worker 技术，而不是依赖 AppCache。后者虽然简单，但已经过时且不够可靠。
