PWA 安装体验：beforeinstallprompt 与 appinstalled

---

title: PWA 安装体验：beforeinstallprompt 与 appinstalled

keywords:

• beforeinstallprompt
• appinstalled
• 安装提示
• manifest
• 用户引导

description: 使用 beforeinstallprompt 与 appinstalled 管理 PWA 安装提示与事件，提供合适的引导与埋点，并处理平台差异与回退策略。

categories:

• 文章资讯
• 软件教程

---

概述

PWA 安装体验依赖 manifest 与 Service Worker 等信号。beforeinstallprompt 事件允许在符合条件时显示自定义安装 UI；appinstalled 用于安装完成埋点与后续引导。

用法/示例

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