如何编写HTML5离线应用缓存清单文件配置步骤详解？
- 内容介绍
- 文章标签
- 相关推荐
本文共计962个文字，预计阅读时间需要4分钟。
不一定要，但绝大多数情况下，需要和HTML页面同源且可被同域请求。浏览器只认可manifest属性指向的路径是否能够返回正确的MIME类型（text/cache-manifest）。不强制要求物理位置，但实际部署中放置错误会导致404或MIME不匹配——这是离线失败最常见的原因。
-
manifest属性值是相对路径，比如<html manifest="app.manifest">，那它就相对于当前 HTML 的 URL 解析 - Apache/Nginx 需显式配置
.manifest后缀返回text/cache-manifest；否则即使文件存在，Chrome 会静默忽略 - 开发时用
file://协议直接双击 HTML 打开，manifest完全不生效——必须走 HTTP/HTTPS
缓存清单语法写错一行就会整个失效
Manifest 文件不是宽松解析的配置，任何空格、大小写、BOM、注释位置错误都会让浏览器拒绝缓存。尤其注意：首行必须是 CACHE MANIFEST（全大写、无空格、无 BOM），且后面要换行。
- 开头不能有 UTF-8 BOM 字节（用 VS Code 或 Sublime 保存时选 “UTF-8 without BOM”）
-
NETWORK:和FALLBACK:是可选节，但一旦出现，冒号后必须换行，不能写成NETWORK: /api/ - 路径区分大小写，
index.html和Index.html被视为两个资源 - 注释只能用
#开头，且必须独占一行或位于行尾，style.css # 注释是非法的
CACHE MANIFEST # v1.2 - 2024-06-15 CACHE: /index.html /js/app.js /css/main.css <p>NETWORK: /api/ FALLBACK: / /offline.html
HTML 中引用 manifest 后页面没变离线也能访问？
不是“引用即生效”，而是触发一次完整更新周期：首次访问 → 下载并缓存 → 后续访问才可能离线加载。而且浏览器只在检测到 manifest 内容变更（字节级比对）时才会重新下载整个缓存组。
- 修改了
app.js但没改 manifest 文件内容？浏览器根本不会拉新 JS - 调试时想强制刷新缓存，可以手动调用
applicationCache.update()（已废弃但旧版仍可用），更可靠的是在 manifest 里加一行带时间戳的注释：# build: 202406151423 - 用户首次访问后关掉网络再刷新，如果页面之前没完整缓存成功（比如某个资源 404），整个缓存组会被丢弃，回退到在线模式（甚至白屏）
Chrome 控制台里看不到 applicationCache 相关日志了？
因为 Chrome 94+ 已彻底移除 applicationCache API 和 DevTools 支持，Firefox 也早在 2022 年禁用。现在看到的“Application → Cache Storage”是 Service Worker 的 Cache API，和旧 manifest 无关。
立即学习“前端免费学习笔记（深入）”；
- 还在用 manifest 的项目，调试只能靠 Network 面板看请求是否 200（来自 disk cache）或 status 显示
from ServiceWorker（说明已被覆盖） - 真实离线验证必须关 Wi-Fi + 拔网线，不能只靠“Offline”模拟——模拟模式下部分浏览器仍允许读取磁盘缓存
- 移动端 iOS Safari 对 manifest 支持极差，iOS 12+ 已完全移除，Android Chrome 早就不维护，别指望兼容新设备
真正需要离线能力的场景，现在唯一靠谱路径是迁移到 Service Worker + Cache API，manifest 文件本身已经是个历史快照，写得再规范也绕不开浏览器支持终止的事实。
本文共计962个文字，预计阅读时间需要4分钟。
不一定要，但绝大多数情况下，需要和HTML页面同源且可被同域请求。浏览器只认可manifest属性指向的路径是否能够返回正确的MIME类型（text/cache-manifest）。不强制要求物理位置，但实际部署中放置错误会导致404或MIME不匹配——这是离线失败最常见的原因。
-
manifest属性值是相对路径，比如<html manifest="app.manifest">，那它就相对于当前 HTML 的 URL 解析 - Apache/Nginx 需显式配置
.manifest后缀返回text/cache-manifest；否则即使文件存在，Chrome 会静默忽略 - 开发时用
file://协议直接双击 HTML 打开，manifest完全不生效——必须走 HTTP/HTTPS
缓存清单语法写错一行就会整个失效
Manifest 文件不是宽松解析的配置，任何空格、大小写、BOM、注释位置错误都会让浏览器拒绝缓存。尤其注意：首行必须是 CACHE MANIFEST（全大写、无空格、无 BOM），且后面要换行。
- 开头不能有 UTF-8 BOM 字节（用 VS Code 或 Sublime 保存时选 “UTF-8 without BOM”）
-
NETWORK:和FALLBACK:是可选节，但一旦出现，冒号后必须换行，不能写成NETWORK: /api/ - 路径区分大小写，
index.html和Index.html被视为两个资源 - 注释只能用
#开头，且必须独占一行或位于行尾，style.css # 注释是非法的
CACHE MANIFEST # v1.2 - 2024-06-15 CACHE: /index.html /js/app.js /css/main.css <p>NETWORK: /api/ FALLBACK: / /offline.html
HTML 中引用 manifest 后页面没变离线也能访问？
不是“引用即生效”，而是触发一次完整更新周期：首次访问 → 下载并缓存 → 后续访问才可能离线加载。而且浏览器只在检测到 manifest 内容变更（字节级比对）时才会重新下载整个缓存组。
- 修改了
app.js但没改 manifest 文件内容？浏览器根本不会拉新 JS - 调试时想强制刷新缓存，可以手动调用
applicationCache.update()（已废弃但旧版仍可用），更可靠的是在 manifest 里加一行带时间戳的注释：# build: 202406151423 - 用户首次访问后关掉网络再刷新，如果页面之前没完整缓存成功（比如某个资源 404），整个缓存组会被丢弃，回退到在线模式（甚至白屏）
Chrome 控制台里看不到 applicationCache 相关日志了？
因为 Chrome 94+ 已彻底移除 applicationCache API 和 DevTools 支持，Firefox 也早在 2022 年禁用。现在看到的“Application → Cache Storage”是 Service Worker 的 Cache API，和旧 manifest 无关。
立即学习“前端免费学习笔记（深入）”；
- 还在用 manifest 的项目，调试只能靠 Network 面板看请求是否 200（来自 disk cache）或 status 显示
from ServiceWorker（说明已被覆盖） - 真实离线验证必须关 Wi-Fi + 拔网线，不能只靠“Offline”模拟——模拟模式下部分浏览器仍允许读取磁盘缓存
- 移动端 iOS Safari 对 manifest 支持极差，iOS 12+ 已完全移除，Android Chrome 早就不维护，别指望兼容新设备
真正需要离线能力的场景，现在唯一靠谱路径是迁移到 Service Worker + Cache API，manifest 文件本身已经是个历史快照，写得再规范也绕不开浏览器支持终止的事实。