link rel="manifest" 必须放在 内且不能动态插入，浏览器仅在初始 html 解析阶段扫描；href 必须是以 / 开头的绝对路径，服务器需返回 200 状态码及 content-type: application/manifest+json。
link rel="manifest" 必须放在 里，且不能动态插入
浏览器只在初始 HTML 解析阶段扫描 <link rel="manifest">，用 JavaScript 动态创建或插入该标签完全无效。常见错误是把它塞进 或通过 document.createElement 添加——此时 Chrome、Edge 等会静默忽略，连控制台警告都不给。
必须确保：
-
href是以/开头的绝对路径（如/manifest.json），不能是相对路径./manifest.json或manifest.json - 服务器返回状态码为
200，且响应头包含Content-Type: application/manifest+json（Nginx/Apache 需显式配置 MIME 类型） - 该标签在
内尽早出现，最好紧贴<meta charset>和<meta name="viewport">后面
manifest.json 文件名和后缀不是随意的
虽然规范允许用 manifest.webmanifest 或 manifest.json，但实际兼容性有差异：
- Chrome、Edge、Firefox 默认识别
.webmanifest后缀，且推荐使用它（更语义化、MIME 类型更明确） - iOS Safari 16.4+ 才开始支持
.webmanifest；旧版 Safari 只认manifest.json - 如果你用
manifest.json，服务器必须返回application/json；若用manifest.webmanifest，应返回application/manifest+json - 不要混用：HTML 中写的是
href="/manifest.json"，就别把文件存成manifest.webmanifest
rel="manifest" 不起作用？先检查这三件事
90% 的“PWA 不弹安装提示”问题出在这三个硬性前提上：
-
HTTPS 必须启用（
localhost除外）：HTTP 站点下rel="manifest"被完全忽略，Service Worker 也无法注册 -
<meta name="viewport">缺失或写错：必须含width=device-width, initial-scale=1；写成width=1024或漏掉initial-scale，iOS Safari 直接屏蔽“添加到主屏幕”按钮 -
manifest 文件本身有语法错误或图标路径 404：Chrome DevTools 的 Application → Manifest 面板会显示解析失败详情；如果图标
src返回 404，整个 manifest 可能被降级处理
要不要加 PWACompat？看你的目标用户
pwacompat.min.js 不是 PWA 的必需项，而是针对兼容性短板的补丁：
- 它自动为 Safari 生成
<link rel="apple-touch-icon">和启动图 meta 标签，解决 iOS 图标不显示问题 - 对 IE10+/Edge Legacy 提供固定网站（pinned site）支持，但这些浏览器已基本退出主流
- 如果你只面向 Chrome/Firefox/现代 Safari，且已手动配好所有
apple-touch-icon和theme-colormeta 标签，可以不用它 - 如果用了，必须确保它在
<link rel="manifest">之后加载，且manifest.json已正确声明icons数组——否则它无法推导出图标尺寸
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
