manifest文件必须以text/cache-manifest MIME类型提供,结构须严格按CACHE→NETWORK→FALLBACK分块,路径需相对manifest所在目录,且仅manifest内容字节变化才触发更新;HTML5 manifest已废弃,推荐改用Service Worker。

manifest 文件必须以 text/cache-manifest MIME 类型提供
浏览器只在响应头包含 Content-Type: text/cache-manifest 时才识别为有效离线清单。Nginx 或 Apache 需显式配置,否则即使文件存在、路径正确,applicationCache(已废弃)或现代 Service Worker 的 fallback 逻辑都不会触发。常见错误是直接用 .txt 后缀上传,服务器默认返回 text/plain,导致整个缓存声明失效。
CACHE、NETWORK、FALLBACK 三段的语义和顺序不能颠倒
manifest 文件结构严格分块,每块以对应关键词开头,后跟冒号和换行,内容从下一行开始。顺序必须是 CACHE → NETWORK → FALLBACK(后两者可省略,但不可前置)。任意行首出现 # 视为注释;空行被忽略;路径必须相对于 manifest 文件所在目录解析。
CACHE MANIFEST # v1.2 — 修改此行可强制更新缓存 CACHE: /index.html /css/app.css /js/main.jsNETWORK: /api/ /search
FALLBACK: / /offline.html
资源路径写错会导致静默失败,不报错但不缓存
manifest 中列出的每个资源都必须能被浏览器成功 GET 到(HTTP 200 或 304),否则该资源不会进入缓存,且不会提示错误。常见陷阱包括:
-
index.html写成/index.html(绝对路径)——实际应相对于 manifest 所在目录,比如 manifest 在/app/manifest.appcache,则写index.html,而非/index.html - 漏掉
.js或.css后缀,如写main而非main.js - 大小写不一致:Linux 服务器区分大小写,
IMG/logo.png和实际文件img/logo.png不匹配 - 动态资源(如带查询参数的 URL)默认不被缓存,需显式列出完整路径,例如
data.json?v=2
更新 manifest 文件本身才能触发资源重下载
浏览器只在 manifest 文件内容(字节级)发生变化时,才会重新获取并比对所有已声明资源。修改页面 HTML 或 JS 文件本身不会触发更新。最简单可靠的做法是在注释行写个版本号或时间戳:
立即学习“前端免费学习笔记(深入)”;
CACHE MANIFEST # 2024-06-12T15:30:00Z — 只要这一行变,缓存就刷新 CACHE: ...
注意:这个注释行必须每次更新都不同,且不能只靠构建工具自动注入却未真正改变文件内容(例如生成时时间戳精度不足,导致两次发布值相同)。
HTML5 的 manifest 已被现代浏览器弃用(Chrome 94+ 完全移除),当前真实项目中若仍需离线能力,应改用 Service Worker + Cache API。但存量系统维护或嵌入式 Webview 场景里,manifest 仍可能遇到——它的脆弱点不在语法多难,而在「改了没反应」时,问题往往出在 MIME 类型、路径解析或更新机制这些隐性环节。










