PWA 安装体验：beforeinstallprompt 与 appinstalled

--- title: PWA 安装体验：beforeinstallprompt 与 appinstalled keywords: - beforeinstallprompt - appinstalled - 安装提示 - manifest - 用户引导 description: 使用 beforeinstallprompt 与 appinstalled 管理 PWA 安装提示与事件，提供合适的引导与埋点，并处理平台差异与回退策略。 categories: - 文章资讯 - 软件教程 --- ## 概述 PWA 安装体验依赖 manifest 与 Service Worker 等信号。`beforeinstallprompt` 事件允许在符合条件时显示自定义安装 UI；`appinstalled` 用于安装完成埋点与后续引导。 ## 用法/示例 ```js let deferred addEventListener('beforeinstallprompt', e => { e.preventDefault() deferred = e // 显示“安装”按钮 }) document.getElementById('install').addEventListener('click', async () => { if (!deferred) return const res = await deferred.prompt() deferred = null }) addEventListener('appinstalled', () => { // 安装完成：埋点与欢迎引导 }) ``` ## 工程建议 - 合理触发安装提示（如用户高参与度时），避免干扰；遵守平台政策与节流。 - 记录展示与接受率，优化时机与文案；为不支持平台提供引导页。 - 确保 manifest 与 SW 信号完整，含图标与名称等必要字段。 ## 参考与验证 - MDN：`beforeinstallprompt` — https://developer.mozilla.org/docs/Web/API/BeforeInstallPromptEvent - web.dev：Installability — https://web.dev/learn/pwa/installable