CACHE MANIFEST 文件是 HTML5 应用程序缓存机制的核心,它通过定义三类资源来控制浏览器如何缓存和加载网页内容。这三部分分别是:CACHE、NETWORK 和 FALLBACK 。
一、三个资源部分详解
CACHE(缓存资源)
这是默认且核心的部分,列出的文件将在首次访问时被下载并永久缓存,即使用户离线也能访问。示例:
index.html,style.css,app.js注意:只要页面引用了 manifest 文件,该页面本身也会自动被缓存,无需显式写入 。
NETWORK(网络资源)
标记为 NETWORK 的资源必须联网访问,不会被缓存,用于需要实时数据的接口或动态内容。示例:
/api/data.json或使用通配符*表示“其余资源需联网” 。FALLBACK(备用资源)
当某个资源无法访问时(如 404),浏览器会加载指定的备用页面。示例:
/ /offline.html表示根路径访问失败时返回离线页 。
⚠️ 注意:只有当 manifest 文件本身发生变化时(如修改版本注释),浏览器才会重新检查和更新缓存 。
二、词源角度解析
Cache
源自法语 cacher,意为“隐藏”。在计算机中指“临时存储以加速访问”,体现其“本地保存、快速调用”的特性。Manifest
来自拉丁语 manifestus(明显的),原指货物清单。在技术中引申为“明确列出资源的清单文件”,即告诉浏览器“该存什么、放哪、怎么用”。Application Cache (AppCache)
“App” 是 application 的缩写,强调这是为整个 Web 应用服务的缓存体系,而非单个资源。
这三个术语共同构建了一个“离线优先、资源可控”的前端缓存逻辑,虽然后来被 Service Worker 逐步取代,但在移动端 H5 早期起到了关键作用 。