HTML5manifest缓存配置与写法详解

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《HTML5离线应用manifest写法与缓存配置详解》，这篇文章主要讲到等等知识，如果你对文章相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

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.js
<p>NETWORK:
/api/
/search</p><p>FALLBACK:
/ /offline.html</p>

资源路径写错会导致静默失败，不报错但不缓存

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 类型、路径解析或更新机制这些隐性环节。

本篇关于《HTML5manifest缓存配置与写法详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！