manifest属性必须写在<html>标签里，写在<head>、<body>或其他标签中均无效；其指向的cache.manifest文件首行须为大小写敏感的CACHE MANIFEST，且需以UTF-8无BOM编码，服务器必须返回Content-Type: text/cache-manifest。
manifest属性写在哪个标签里
HTML 中的 manifest 属性必须写在 <html> 标签上，不是 <head>、<body> 或其他任意标签。浏览器只认这个位置，写错位置等于没写。
常见错误是把它当成普通 meta 配置塞进 <head> 里，或者误以为可以用 JavaScript 动态添加——都不生效。
-
<html manifest="cache.manifest">✅ 正确写法 -
<head><meta http-equiv="manifest" content="cache.manifest"></head>❌ 完全无效 -
document.documentElement.setAttribute('manifest', 'cache.manifest')❌ 页面加载时已忽略
cache.manifest 文件必须满足哪些格式要求
清单文件不是随便写的文本，它有严格语法：第一行必须是 CACHE MANIFEST（大小写敏感），且整个文件需以 UTF-8 编码保存，BOM 头会导致解析失败。
三类区块（CACHE、NETWORK、FALLBACK）可选，但顺序无关；空行或注释（以 # 开头）允许存在，但路径不能含空格或未编码特殊字符。
立即学习“前端免费学习笔记（深入）”；
- 相对路径基于 HTML 文件所在目录解析，不是相对于 manifest 文件路径
- 路径区分大小写，
style.css和STYLE.CSS被视为两个资源 - 如果引用了不存在的资源，整个缓存过程会失败，页面不会离线可用
CACHE MANIFEST # v1.2 CACHE: index.html style.css script.js NETWORK: /api/ FALLBACK: / /offline.html
为什么 Chrome/Firefox 已经不支持 manifest 了
从 Chrome 95、Firefox 84 起，manifest 属性被彻底移除，调用 window.applicationCache 会返回 null，且控制台直接报 Manifest: line: X, unknown type 类错误。这不是配置问题，是标准废弃。
根本原因是 Service Worker 全面替代了 AppCache，而后者存在严重缺陷：缓存更新不可控、版本切换不原子、HTTPS 强制要求缺失等。所有现代 PWA 实践都绕开 manifest，改用 navigator.serviceWorker.register()。
- 即使你本地测试能“跑通”，上线后用户大概率看不到效果
- 某些旧版 Android WebView（如 4.4）仍支持，但无法依赖
- 若项目必须兼容极老环境，需同时提供 manifest + Service Worker 回退方案，但逻辑复杂度陡增
现在该用什么替代 manifest
用 service-worker.js + navigator.serviceWorker.register() 是唯一可行路径。核心差异在于：manifest 是声明式、全局自动缓存；Service Worker 是命令式、可编程控制缓存策略与网络回退。
最简注册只需两步：确保服务器提供 service-worker.js（MIME 类型为 text/javascript），并在 HTML 的 <script> 中调用注册。
- 注册脚本必须在 HTTPS 下运行（localhost 除外）
-
service-worker.js必须与页面同源，且放在根目录或明确指定scope - 首次注册后，刷新页面才触发 install 事件；更新靠
skipWaiting()+clients.claim()主动接管
别再花时间调试 cache.manifest 的 MIME 类型或 404 错误——那些问题已经没有实际意义了。
