必须在<head>中用<link rel="manifest" href="/manifest.json">引入，href须为根目录绝对路径，服务器需返回Content-Type: application/manifest+json，且manifest.json须含name、short_name、start_url、display和icons（192×192与512×512 PNG）等必需字段。
如何在 index.html 中正确引入 manifest.json
必须用 <link rel="manifest"> 标签，且只能放在 <head> 里，路径要相对于站点根目录（不是 HTML 文件所在目录）。常见错误是写成相对路径如 ./manifest.json 或漏掉 rel="manifest"，导致浏览器完全忽略该文件。
正确写法示例：
<link rel="manifest" href="/manifest.json">
- 如果项目部署在子路径（如
/myapp/），href仍应为/myapp/manifest.json，不能省略前缀 - 确保服务器对
.json文件返回Content-Type: application/manifest+json，否则 Chrome 会静默失败（无报错但不加载） - 修改 manifest 后，浏览器不会自动刷新缓存，需手动清空 Application → Manifest 面板或硬刷新（Ctrl+Shift+R）
manifest.json 必填字段及常见取值陷阱
name、short_name、start_url、display 和 icons 是 PWA 安装必需字段。其中 start_url 容易被设成相对路径（如 "./"），但实际必须可解析为绝对 URL（如 "/" 或 "/index.html"），否则安装后点击图标会跳转失败。
关键字段说明：
立即学习“前端免费学习笔记（深入）”；
-
short_name：用于桌面图标文字，长度建议 ≤12 字符；过长会在 iOS 上截断且无提示 -
display推荐用"standalone"或"minimal-ui"；设为"browser"就等于放弃 PWA 特性 -
icons数组中至少提供一个 192×192 和一个 512×512 的 PNG，格式必须是image/png，SVG 不支持 - 所有 icon
src路径也必须是根相对路径（如"/icons/icon-192.png"）
为什么加了 manifest 还是无法安装？检查这三点
Chrome 和 Edge 要求页面满足「可安装性条件」才会显示「添加到主屏幕」提示，仅靠 manifest 不够。最常卡在以下环节：
- 未通过 HTTPS 提供服务（localhost 除外）——HTTP 站点直接禁用安装能力
- 缺少有效的
service-worker.js注册（Chrome 93+ 强制要求有注册的 Service Worker 才允许安装） - 页面未响应式适配：viewport meta 缺失或
width=device-width写错，会导致「添加」按钮灰掉
快速验证方式：打开 Chrome DevTools → Application → Manifest 面板，看是否显示解析后的 JSON；若为空，说明链接路径、MIME 类型或 JSON 格式有误。
调试 manifest 加载失败的实用命令
不用反复刷页面，用浏览器控制台一行命令就能确认 manifest 是否被识别：
navigator?.getInstalledRelatedApps && console.log('支持相关 App API');<br>document.querySelector('link[rel="manifest"]')?.href && console.log('manifest link 存在且有 href');
更直接的方式是访问 chrome://apps（Chrome）或 edge://apps（Edge），查看已安装 PWA 列表 —— 如果没出现，说明前面某步中断了流程。iOS Safari 不支持 Web App Manifest 安装，这点容易被忽略，别在 iPhone 上测安装逻辑。
