PWA 安装提示管理器 - 自定义 A2HS 行为

A2HS（Add to Home Screen）是现代浏览器提供的一项功能，允许用户将 Progressive Web App（PWA）直接添加到设备的主屏幕上。添加后，PWA 可以像原生应用一样启动，拥有独立的窗口、应用图标和启动画面。Chrome、Edge、Samsung Internet 等浏览器通过 beforeinstallprompt 事件支持自定义安装流程，而 iOS Safari 则需要用户通过分享菜单手动添加。

beforeinstallprompt 是浏览器在 PWA 满足安装条件时触发的事件。通过调用 event.preventDefault() 可以阻止浏览器默认的安装提示，并将事件保存到变量中。之后可以在自定义的 UI 按钮上调用 deferredPrompt.prompt() 来触发安装。注意：此事件仅在 Chrome 76+、Edge 79+、Samsung Internet 等基于 Chromium 的浏览器中可用，iOS Safari 不支持。

Chrome 浏览器要求 PWA 必须满足以下条件才能触发安装：
① 网站必须通过 HTTPS 访问（localhost 除外）；
② 必须配置有效的 manifest.json，包含 name、short_name、icons（至少 192x192 和 512x512）、start_url、display（standalone 或 fullscreen）；
③ 必须注册并激活 Service Worker；
④ 用户需要与网站有足够的交互（Chrome 的参与度检查）。
此外，如果用户之前已安装或拒绝安装，浏览器可能会在冷却期后再触发。

iOS Safari 不支持 beforeinstallprompt 事件。要在 iOS 上引导用户安装 PWA，需要：
① 添加 <meta name="apple-mobile-web-app-capable" content="yes"> 标签；
② 配置 apple-mobile-web-app-status-bar-style 和 apple-touch-icon；
③ 在页面中显示自定义引导提示，指引用户点击 Safari 的"分享"按钮，然后选择"添加到主屏幕"。
可以使用 navigator.standalone 检测是否已在独立模式运行。

可以通过以下几种方式检测：
① 使用 CSS 媒体查询：@media (display-mode: standalone) { ... }；
② 使用 JavaScript：window.matchMedia('(display-mode: standalone)').matches；
③ 在 iOS 上检测：navigator.standalone === true；
④ 监听 appinstalled 事件，在安装成功后执行回调。
检测到已安装后，可以隐藏安装提示，优化用户体验。

① 不要过早显示提示——给用户时间了解你的网站价值后再提示安装；
② 提供明确的关闭选项——尊重用户选择，允许他们轻松关闭提示；
③ 使用冷却机制——用户关闭后，不要立即再次显示，建议等待数小时或数天；
④ 清晰的文案——说明安装的好处（如离线使用、更快加载），而非仅说"安装"；
⑤ 在合适的时机触发——如用户完成关键操作后、浏览多页内容后、或滚动到一定深度时；
⑥ 检测已安装状态——避免向已安装用户显示提示。

不是所有浏览器都支持。支持情况如下：
✅ Chrome（桌面+Android）：完全支持 beforeinstallprompt；
✅ Edge（桌面+Android）：完全支持；
✅ Samsung Internet：完全支持；
✅ Opera（Android）：支持；
⚠️ Firefox（Android）：支持 A2HS 但不支持 beforeinstallprompt；
❌ Safari（iOS）：不支持 beforeinstallprompt，需使用自定义引导；
❌ Firefox（桌面）：不支持 PWA 安装。

是的，在 Chromium 浏览器中，注册并激活 Service Worker 是触发 beforeinstallprompt 事件的必要条件。Service Worker 需要至少有一个 fetch 事件监听器。最简单的 Service Worker 示例如下：
self.addEventListener('fetch', e => e.respondWith(fetch(e.request)));
没有 Service Worker，浏览器不会触发安装提示。这是 Google 确保 PWA 具有离线能力的基本要求。