beforeinstallprompt事件不会自动触发，需满足严格条件：两次以上访问、停留超30秒、正确配置manifest.json与service worker、未安装过；须手动保存事件对象并调用prompt()，且仅限Chrome/Edge等支持浏览器，iOS和Firefox完全不支持。
beforeinstallprompt 事件根本不会自动触发
浏览器只在满足严格条件时才派发 beforeinstallprompt，不是页面加载完就一定有。它需要用户与站点有“足够互动”（如至少两次访问、停留时间 >30 秒、有可安装的 manifest 和 service worker），且当前页面未被安装过。直接监听却收不到事件，大概率是条件不满足，而非代码写错。
- 用 Chrome DevTools 的 Application → Manifest 面板确认
manifest.json已正确解析（无 404、MIME 类型为application/manifest+json） - 确保已注册并激活了 Service Worker：检查 Application → Service Workers，状态为 “Activated and is running”
- 不要在页面首次加载时就监听——先等
window.addEventListener('load', ...)或DOMContentLoaded后再绑定，否则可能错过事件
必须手动保存事件对象才能 later 触发安装
beforeinstallprompt 是一次性的，事件对象里藏着关键的 prompt() 方法。如果没存下来，后续用户点击自定义按钮时就无法调起安装弹窗。
- 在事件回调中必须调用
e.preventDefault()，否则浏览器会立即走默认提示流程（你失去了控制权） - 把事件对象赋值给一个全局变量或闭包变量，例如：
let deferredPrompt = null; window.addEventListener('beforeinstallprompt', e => { deferredPrompt = e; e.preventDefault(); }); - 这个
deferredPrompt只能调用一次，调完即失效；再次调用会抛出"The user has already dismissed the prompt."错误
自定义按钮触发安装的典型流程
用户点击你的“添加到桌面”按钮后，不能直接执行 prompt()，要先检查 deferredPrompt 是否存在，并处理用户拒绝后的降级逻辑。
- 按钮点击 handler 中判断：
if (deferredPrompt) { deferredPrompt.prompt(); } - 监听
appinstalled事件确认安装成功：window.addEventListener('appinstalled', () => { console.log('PWA installed'); deferredPrompt = null; }); - 监听
beforeinstallprompt的userChoice结果（Chrome 93+ 支持）：deferredPrompt.userChoice.then(choice => { if (choice.outcome === 'accepted') {...} }); - 若用户点“取消”，
deferredPrompt会被清空，后续不能再用——此时建议隐藏按钮或改文案为“稍后再试”
移动端 Safari 和 Firefox 完全不支持该事件
iOS 上没有 beforeinstallprompt，也没有任何 JS API 能触发安装流程；Firefox 桌面版虽支持 manifest，但不派发此事件。所谓“自定义触发时机”，在这些环境里根本不存在。
立即学习“前端免费学习笔记（深入）”；
- 不要对 iOS 用户显示“添加到主屏幕”按钮并绑定
prompt()——它永远不执行，还会造成困惑 - 可用
navigator.standalone或matchMedia('(display-mode: standalone)')检测是否已在 PWA 模式下运行，间接判断安装状态 - 真正跨平台的方案只能是引导用户手动操作：比如在 iOS 上提示“点击分享 → 添加到主屏幕”，并截图示意
