manifest文件被浏览器忽略主因是服务端未配置正确mime类型;chrome/firefox等现代浏览器仅识别text/cache-manifest,否则直接跳过解析且不报错。

manifest文件为什么总被浏览器忽略
不是写得不对,而是服务端没配对 MIME 类型。Chrome、Firefox 现代版本只要看到 text/cache-manifest 以外的类型(比如 text/plain 或 application/octet-stream),直接跳过解析,连报错都不会抛。
- apache:在
.htaccess或虚拟主机配置里加AddType text/cache-manifest .manifest - Nginx:在 server 块中加
types { text/cache-manifest manifest; } - 本地开发用
python -m http.server?它不支持自定义 MIME,必须换serve或http-server -c-1 - 文件扩展名必须是
.appcache或.manifest,且后缀要和服务端声明一致
缓存清单里路径写相对还是绝对
全看 html 的 manifest 属性怎么写——清单内所有路径都相对于该 HTML 文件位置解析,不是相对于清单文件本身。
-
→ 清单里写js/main.js,表示和 HTML 同目录下的js/main.js -
→ 清单里写logo.png,会去找根目录下的/logo.png,不是/Static/logo.png - 绝对 URL(
https://cdn.example.com/font.woff)会被允许,但仅限于NETWORK:段,CACHE:段不支持跨域资源 - 别写
./style.css,.和..在规范里未定义行为,safari 会直接失败
更新缓存后页面不刷新怎么办
浏览器只在检测到 manifest 文件内容字节变化时才触发更新流程,改了 JS 文件但没动 manifest?缓存照旧。
- 每次发布前手动改 manifest 第一行注释,比如从
# v1.2.0改成# v1.2.1 - 用构建工具自动生成哈希注释:
# hash: <code>a1b2c3d4,确保变更即触发更新 - 监听
window.applicationCache的updateready事件,手动location.reload(),否则用户永远看不到新版本 -
applicationCache.swapCache()必须在updateready后调用,提前调无效;而且它只交换内存缓存,不重载页面
html5离线缓存现在还能用吗
不能。Chrome 94+、Firefox 96+、edge 94+ 已彻底移除 applicationCache API,调用 window.applicationCache 会返回 undefined,manifest 属性被完全忽略。
立即学习“前端免费学习笔记(深入)”;
- Service Worker 是唯一标准替代方案,但无法“一键替换”:它需要 HTTPS(localhost 除外)、JS 脚本注册、手动实现缓存策略
- 旧项目若仍需兼容 IE10/android 4.4,只能维持 manifest,但必须接受新浏览器白屏或静默降级
- 生成 manifest 清单的工具(如
grunt-manifest)已多年未维护,其哈希计算逻辑和现代构建产物(如 webpack chunkhash)不匹配,容易漏文件
真正卡住的不是语法或打包,是浏览器厂商集体放弃那天起,整个机制就变成了一个必须绕开的兼容性断点。