要让浏览器主动弹出“安装此网站作为应用”提示，必须同时满足HTTPS、有效manifest（含name/short_name及≥192×192图标）、已激活Service Worker、用户停留≥30秒并有交互；iOS不支持自动提示，仅支持手动添加。
要让浏览器主动弹出“安装此网站作为应用”的提示，光有 Service Worker 和 manifest.json 还不够——关键在于满足所有触发条件并主动引导用户。多数 PWA 安装失败或无提示，其实卡在几个隐蔽但决定性的环节。
确保 manifest.json 符合完整校验标准
浏览器只在 manifest 文件通过严格校验后才考虑显示安装按钮。缺一不可：
-
必须包含
name和short_name，两者不能完全相同，且长度建议控制在 12 字以内 - 至少提供两个图标：192×192 和 512×512 PNG 格式，路径可访问（在 Chrome DevTools 的 Application → Manifest 标签页中应能预览）
-
start_url必须可响应 200 状态码，且该页面需能独立加载（不依赖 JS 路由重定向） -
display推荐设为"standalone"或"fullscreen"，"browser"会直接禁用安装提示 - 文件必须通过 HTTPS 提供（开发时 localhost 自动豁免，但 127.0.0.1 不行）
Service Worker 必须成功激活并控制页面
安装提示只会在当前页面被 Service Worker 完全接管后出现。常见断点：
- 注册脚本必须在
window.addEventListener('load', ...)中执行，避免因 DOM 未就绪或 JS 错误导致静默失败 - Service Worker 文件（如
/sw.js）返回状态码必须是 200，且响应头不含no-cache或must-revalidate - 在
install事件中调用self.skipWaiting()，在activate中调用self.clients.claim()，否则新 SW 可能长期处于 waiting 状态，无法接管页面 - 打开 Chrome DevTools → Application → Service Workers，确认 “Current page is controlled by a service worker” 显示为 ✅
触发安装提示的三个可靠时机
浏览器不会立即弹窗，而是在用户与站点建立一定信任后才展示。你可以主动适配：
- 地址栏图标方式（最稳定）：Edge/Chrome 在地址栏右侧显示“+”图标，前提是 manifest + SW 均验证通过且页面已加载 30 秒以上
-
菜单手动触发：Edge 中点击
⋯ → 应用 → 将此站点作为应用安装；Chrome 中点击⋯ → 更多工具 → 创建快捷方式 → 勾选“作为窗口打开” -
代码监听并提示用户：监听
beforeinstallprompt事件，保存事件对象，在合适时机（如用户完成一次操作后）调用event.prompt()并处理userChoice结果
绕过常见干扰项
以下情况会直接屏蔽安装入口，需逐一排除：
- 页面存在混合内容（HTTP 资源加载），即使只有一张图片也会阻断
- manifest.json 中的
icons数组为空、格式错误，或任一图标返回 404 - Service Worker 注册路径错误（例如注册了
/sw.js，但实际文件放在/js/sw.js且未配置正确 scope） - 使用了非安全上下文 API（如 Geolocation）但未通过 HTTPS 部署到生产环境
- 用户之前拒绝过安装提示，需清除浏览器站点数据或改用隐身窗口重新测试
