HTML怎么做Manifest查看_HTML DevTools Manifest信息查看【建议收藏】

作者：袖梨 2026-07-22

HTML的manifest属性已完全失效，Chrome≥93、Firefox≥95、Safari≥16.4彻底移除支持，DevTools中显示“No manifest detected”是因浏览器静默忽略该属性，而非路径或配置错误。

HTML 的 manifest 属性已完全失效，DevTools 里根本看不到有效 Manifest 信息——不是你操作错了，是浏览器压根不解析它了。

DevTools 的 Manifest 标签页为什么显示 “No manifest detected”

这个提示不是说文件路径错了、也不是服务器没返回，而是现代浏览器（Chrome ≥93、Firefox ≥95、Safari ≥16.4）已彻底移除对 manifest 属性的支持。即使你的 HTML 还留着 <html manifest="app.manifest">，DevTools → Application → Manifest 标签页也只会显示 “No manifest detected”，且控制台零日志、无报错。

这是静默失效：资源全部走网络，但你毫无感知
旧项目若曾成功缓存过，Application → Cache Storage → AppCache 分类可能还残留数据（但新访问不会更新）
Manifest 标签页只识别符合 W3C 原始规范的声明，不兼容任何变体写法（如 manifest="./a.manifest" 或写在 <head> 里）

怎么确认页面是否还在用 AppCache（而非 Service Worker）

AppCache 和 Service Worker 的缓存机制互不兼容，共存时后者会被压制。排查关键看两个地方：

打开 DevTools → Application → Cache Storage → 查看左侧分类：如果存在 AppCache（注意不是 Cache Storage），说明浏览器历史上激活过该机制，且可能仍保留旧缓存
检查页面源码或 Elements 面板：<html 标签上是否还有 manifest= 属性；若有，就是遗留风险点
运行 navigator.onLine + 离线刷新：若页面直接白屏或报“无法连接”，大概率是误信 manifest 而没配 Service Worker

想看离线能力真实状态，该盯哪儿

现在唯一有效的离线方案是 Service Worker，它的运行状态必须从对应面板确认：

立即学习“前端免费学习笔记（深入）”；

DevTools → Application → Service Workers：看是否有注册成功的脚本、是否处于 activated 状态、是否有“Update on reload”勾选
DevTools → Application → Cache Storage：展开后应看到你代码里定义的 cache 名称（如 my-site-v1），而不是 AppCache
Network 面板过滤 service-worker.js，看请求状态码是否为 200（且响应头含 Content-Type: application/javascript）
Console 输入 navigator.serviceWorker.controller，返回对象说明当前受控；返回 null 说明未生效

真正麻烦的是那些以为“加了 manifest 就是 PWA”的老项目——HTML 里还挂着 manifest，但 Service Worker 根本没注册，也没 HTTPS 支持，连 navigator.serviceWorker 都是 undefined。这种情况下，DevTools 的 Manifest 标签页永远是空的，而你却还在改 .manifest 文件。