浏览器仅在满足HTTPS、有效manifest（含short_name及≥192×192图标）、已注册Service Worker、用户停留≥30秒并有交互时触发beforeinstallprompt；iOS不支持该事件，需引导用户手动添加。

beforeinstallprompt 事件触发条件不满足时怎么办

浏览器只在特定条件下才触发 beforeinstallprompt，不是页面一加载就发。常见失效场景包括：用户没和页面充分交互（如未滚动、未点击）、页面未通过 HTTPS、manifest.json 缺失或校验失败、Service Worker 未注册成功、或用户已拒绝过安装提示。

实操建议：

• 监听 navigator.serviceWorker.ready 成功后再绑定事件，避免提前监听失效
• 确保 manifest.json 中至少包含 name、short_name、icons（含至少一个 192x192 PNG）和 start_url
• 用 Chrome DevTools 的 Application → Manifest 面板验证解析是否成功，留意红色错误提示
• 在用户首次点击按钮或滚动后 1 秒内再检查 deferredPrompt 是否存在，而不是 onLoad 时立即尝试

如何保存并手动触发自定义安装弹窗

beforeinstallprompt 事件对象本身不能直接调用，必须先调用 e.preventDefault() 阻止默认横幅，再缓存事件对象（通常叫 deferredPrompt），后续由用户操作（如点击「安装」按钮）触发 prompt()。

关键点：

立即学习“前端免费学习笔记（深入）”；

• 缓存的 deferredPrompt 只能调用一次，调用后该对象即失效，再次调用会报错 "The user already dismissed this prompt" or "InvalidStateError"
• 调用 prompt() 后需监听 userChoice 的 outcome 属性判断结果："accepted" 或 "dismissed"
• 不要在 prompt() 后立刻重置 deferredPrompt = null，应等 userChoice Promise resolve 后再清理

示例片段：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

let deferredPrompt;<br>window.addEventListener('beforeinstallprompt', (e) => {<br>  e.preventDefault();<br>  deferredPrompt = e;<br>  showInstallButton(); // 自定义按钮显示逻辑<br>});<br><br>installBtn.addEventListener('click', async () => {<br>  if (!deferredPrompt) return;<br>  deferredPrompt.prompt();<br>  const { outcome } = await deferredPrompt.userChoice;<br>  if (outcome === 'accepted') console.log('用户点了安装');<br>  deferredPrompt = null;<br>});

Chrome 117+ 和 Edge 117+ 中事件不再自动触发的应对方式

从 Chrome 117 开始，beforeinstallprompt 默认被禁用，除非站点满足“安装可信度信号”（installability criteria）——这包括：用户与页面有明确交互（如点击）、页面停留时间 ≥ 30 秒、有有效的 Web App Manifest、且 Service Worker 控制页面至少 30 秒。

这意味着你不能再依赖“只要注册 SW 就能拿到事件”，而要主动构造可信上下文：

• 在用户点击按钮后，延迟 500ms 再检查 deferredPrompt，给浏览器留出评估时间
• 若 deferredPrompt 仍为 null，可降级使用 navigator.getInstalledRelatedApps() 检查是否已安装，或引导用户手动添加到主屏幕（location.href = 'android-app://...' 不推荐，iOS 无对应机制）
• 注意 Safari 完全不支持 beforeinstallprompt，iOS PWA 只能靠用户主动点击「添加到主屏幕」，无法程序化触发

监听安装状态变化的替代方案：appinstalled 事件局限性

appinstalled 事件只在用户完成安装流程后触发，但它不可靠：Chrome 从 68 版本起已废弃该事件，现代版本中基本不触发；即使触发，也无法区分是 PWA 安装还是原生 App 安装。

更可行的做法是：

• 用 beforeinstallprompt 的 userChoice.outcome 做唯一可信依据
• 结合 navigator.standalone 或 matchMedia('(display-mode: standalone)') 在安装后首屏检测运行模式变化
• 服务端埋点：在用户点击安装按钮时打点，再结合客户端 userChoice.outcome 补全状态，避免单靠前端判断失真

别把 appinstalled 当作必选项，它现在只是个兼容性幻觉。