不是必须，但强烈建议放根目录；浏览器默认只在根路径下查找manifest.json，若放错位置（如/static/manifest.json）且未在<link>中显式指定正确href路径，Chrome等浏览器可能静默放弃PWA安装，同时需确保响应头为Content-Type: application/manifest+json。
manifest.json 文件必须放在网站根目录吗？
不是必须，但强烈建议放根目录。浏览器默认只在根路径下查找 manifest.json，如果放错位置（比如 /static/manifest.json），link rel="manifest" 仍能加载，但部分安卓 Chrome 版本会忽略离线缓存和“添加到主屏幕”提示。
实操建议：
- 把
manifest.json放在服务器根目录（即访问https://yoursite.com/manifest.json可直接返回文件） - 确保响应头包含
Content-Type: application/manifest+json（Nginx/Apache 需配置 MIME 类型） - 若无法放根目录，必须显式指定路径：
<link rel="manifest" href="/assets/manifest.json">，且该路径需支持 CORS（尤其跨子域时）
HTML 中 link rel="manifest" 的写法和位置有讲究吗？
有。必须写在 <head> 内，且越靠前越好——最好在 <title> 之后、其他 <link> 或 <script> 之前。延迟加载会导致 PWA 安装横幅（install prompt）不触发或延迟数秒。
常见错误：
立即学习“前端免费学习笔记（深入）”；
- 写在
<body>里 → 浏览器直接忽略 - href 路径拼错，比如漏掉斜杠：
href="manifest.json"（相对路径易受当前 URL 影响）→ 推荐用绝对路径href="/manifest.json" - 多个
rel="manifest"标签 → 浏览器只读第一个，其余被丢弃
manifest.json 里哪些字段对移动端 PWA 最关键？
不是所有字段都必要，但以下三项缺失会导致 iOS Safari 完全不识别为 PWA，Android Chrome 无法弹出安装提示：
-
"name"和"short_name"：二者都得有，short_name不能超过 12 字符，用于桌面图标文字；iOS 对name长度更敏感 -
"start_url"：必须是可访问的相对路径（如"./"或"/app/"），不能是完整 URL；若指向 404 页面，PWA 安装会失败 -
"display": "standalone"：这是让应用全屏启动、隐藏地址栏的关键；设成"minimal-ui"或"browser"就失去 PWA 感
示例最小可用 manifest：
{
"name": "我的记账工具",
"short_name": "记账",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#4a90e2",
"icons": [
{
"src": "/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png"
}
]
}
为什么加了 manifest 还是不弹安装提示？
manifest 只是前提，Chrome 和 Safari 还要求满足一连串运行时条件，缺一不可：
- 页面必须通过 HTTPS 提供（localhost 除外）
- 已注册有效的 Service Worker（哪怕只做空缓存，也得存在并控制页面）
- 用户需与页面有至少 30 秒交互（滚动、点击等），否则不触发 prompt
- iOS Safari 不支持自动 prompt，只能靠
navigator.standalone === false+ 手动引导用户“添加到主屏幕” - Chrome Android 要求页面被访问至少两次，且间隔 ≥ 5 分钟
验证是否生效：打开 Chrome DevTools → Application → Manifest 标签页，看是否解析成功；再切到 Application → Service Workers，确认状态为 “Activated and is running”。
真机调试时最容易忽略的是图标尺寸和 MIME 类型——PNG 图标若被服务器当成 text/plain 返回，iOS 直接拒用，连 fallback 都不给。
