网站清单文件（manifest）是pwa的元数据配置文件，即manifest.json，需通过在html head中引入，且服务器必须返回content-type: application/manifest+json。
什么是网站清单文件（manifest）
网站清单文件是早期 PWA（渐进式 Web 应用）中用于声明离线资源的 JSON 文件，标准名为 manifest.json。它本身**不通过 <link> 引入**——这是常见误解。真正用 <link> 引入的是 Web App Manifest，即告诉浏览器“这个 JSON 文件描述了当前网页作为应用的元信息”，而非“加载并执行它”。
<link rel="manifest"> 的正确写法
引入 Web App Manifest 必须使用 rel="manifest"，且只允许一个有效链接。常见错误包括路径写错、MIME 类型不匹配、或误加 type 属性：
-
href必须是绝对路径或根相对路径（如/manifest.json），避免./manifest.json或manifest.json（部分浏览器不识别） - 服务器必须返回
Content-Type: application/manifest+json，否则 Chrome 等浏览器会静默忽略 - 不要写
type="application/manifest+json"：HTML 规范未定义该属性，现代浏览器不读取，反而可能干扰解析 - 必须放在
内，且建议在<title></title>之后、其他资源之前
正确示例：
<link rel="manifest" href="/manifest.json">
为什么 manifest.json 没生效？常见排查点
即使 <link> 标签写对了，仍可能无反应。核心原因不是 HTML 问题，而是部署和响应层面：
- 打开浏览器 DevTools → Application → Manifest，看是否显示“Manifest detected”；若为空，说明链接未加载或响应头错误
- 直接访问
/manifest.json（如https://yoursite.com/manifest.json），检查是否返回 200 且响应头含Content-Type: application/manifest+json - 确保
manifest.json中的start_url和scope是合法相对路径（如"start_url": "./"或"start_url": "/"），不能是完整 URL - 服务端若用 Nginx/Apache，需显式配置 MIME 类型；Vercel/Netlify 等平台默认支持，但自建静态服务常遗漏
现在还该用 manifest.json 吗？
Web App Manifest 仍是 PWA 的基础能力，Chrome、Edge、Firefox 均支持，但注意两点：
- 它只负责安装提示、图标、启动画面等 UI 元信息，**不控制缓存或离线逻辑**——那是
Service Worker的事 - Android 上添加到主屏幕后，
display字段（如"standalone"）才起作用；iOS Safari 对manifest.json支持极弱，仅识别apple-touch-icon - 如果你没注册 Service Worker，仅加
<link rel="manifest">不会产生离线能力，也触发不了“添加到主屏幕”提示
真正关键的不是标签怎么写，而是 manifest 文件是否可访问、响应头是否合规、以及是否配合了 Service Worker。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
