要让PWA支持“添加到桌面”，需正确配置manifest.json并确保HTML引用、iOS兼容标签、HTTPS部署四者配合：1. manifest.json含name/short_name/start_url/display/icons等字段；2. HTML中用绝对路径引入；3. iOS需额外添加apple-mobile-web-app-capable和apple-touch-icon；4. 必须HTTPS，且响应头为application/manifest+json。
要让 PWA 项目支持“添加到桌面”，核心是正确配置 Web App Manifest 文件（manifest.json），并确保它被网页正确引用。这不是单纯加个文件就行，需要结构、路径、响应头和 HTML 声明四者配合。
1. 创建标准 manifest.json 文件
把 manifest.json 放在项目根目录（如 /public/manifest.json，Uniapp/Vue CLI 项目通常放这里）。内容需包含以下关键字段：
- name：应用全称，显示在安装确认弹窗中
- short_name：简短名称，用于桌面图标下方或 iOS 主屏幕显示（建议 ≤12 字）
-
start_url：用户点击桌面图标后打开的路径，推荐设为
"/"或带查询参数的入口页（如"/?utm_source=homescreen"） -
display：设为
"standalone"，iOS 和 Android 均能实现无地址栏、独立窗口效果；避免用"minimal-ui"（已废弃） -
icons：提供至少两个尺寸的 PNG 图标（推荐
192x192和512x512），src路径必须可被公开访问（如"/icons/icon-192.png"） - background_color 和 theme_color：分别控制启动屏背景色和浏览器顶部状态栏颜色（Android）或 Safari 标题栏（iOS）
2. 在 HTML 中正确引入 manifest
确保页面 <head> 中有这行代码：
<link rel="manifest" href="/manifest.json">
注意：
– href 必须是绝对路径（以 / 开头），否则 iOS 可能无法识别；
– 不要写成相对路径如 "manifest.json" 或 "./manifest.json"；
– 如果图标放在子目录，icons.src 也需对应调整为绝对路径。
3. 补充 iOS 兼容性支持
iOS 对 PWA 的“添加到主屏幕”支持较严格，仅靠 manifest.json 不够，还需在 <head> 中补充两行 meta 标签：
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" href="/icons/icon-192.png">
其中 apple-touch-icon 是 iOS 添加到主屏幕时默认读取的图标（即使 manifest 里已定义 icons），建议提供 180x180 尺寸的 PNG。
4. 部署与验证要点
- 必须运行在 HTTPS 环境下（生产环境），
localhost开发时允许绕过 - 检查
manifest.json返回的 HTTP 响应头是否含Content-Type: application/manifest+json（多数现代构建工具自动处理，但 Nginx/Apache 需手动配置 MIME 类型） - 用 Chrome 或 Edge 访问，打开开发者工具 → Application → Manifest 标签页，可实时查看解析结果和错误提示
- iOS 用户需手动点击 Safari 右下角「分享」→「添加到主屏幕」，不会自动弹窗；Chrome on iOS 不支持 PWA 安装
