浏览器触发 beforeinstallprompt 需要满足以下条件：

• HTTPS：网站必须通过 HTTPS 提供服务（localhost 除外）。
• 有效的 manifest.json：包含 name、short_name、start_url、icons（至少 192x192 和 512x512）、display（推荐 standalone）。
• 已注册的 Service Worker：需要有效的 Service Worker 控制页面。
• 用户未安装：用户尚未将该 PWA 安装到设备上。
• 用户交互：用户需要与页面有一定的交互（如点击、滚动等），浏览器会判断用户是否对网站感兴趣。

标准用法如下：

let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault(); // 阻止默认弹出
  deferredPrompt = e; // 保存事件
  // 显示自定义安装按钮
  installBtn.style.display = 'block';
});
installBtn.addEventListener('click', async () => {
  if (!deferredPrompt) return;
  deferredPrompt.prompt();
  const { outcome } = await deferredPrompt.userChoice;
  console.log('用户选择:', outcome); // 'accepted' 或 'dismissed'
  deferredPrompt = null;
});

注意：prompt() 只能调用一次，调用后事件即被消耗。需要在用户手势（点击）中调用。

iOS Safari 的 PWA 支持与传统 Chromium 浏览器不同：

• iOS 16.4 之前：不支持 beforeinstallprompt，用户需要手动点击分享按钮 → "添加到主屏幕"。许多网站会显示自定义引导横幅来提示用户。
• iOS 16.4+：Safari 开始支持部分 PWA 安装 API，但仍有限制。manifest 中的 related_applications 等字段被支持。
• 推荐做法：检测是否为 iOS 设备，如果是则显示自定义引导横幅，教用户如何通过分享菜单添加到主屏幕。

Service Worker 是 PWA 的核心组件，对于安装至关重要：

• 安装条件：Chromium 浏览器要求有活跃的 Service Worker 才会触发 beforeinstallprompt。
• 离线支持：Service Worker 可以缓存资源，使 PWA 在离线时也能加载。
• 推送通知：配合 Push API 实现推送通知功能。
• 后台同步：支持后台数据同步。

一个最简单的 Service Worker 注册示例：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

常见排查步骤：

1. 确认使用 HTTPS（或 localhost）。
2. 检查 manifest.json 是否有效，所有必填字段是否完整，图标路径是否正确。
3. 确认 Service Worker 已注册并成功激活（可在 Chrome DevTools → Application → Service Workers 查看）。
4. 检查是否已经安装过该 PWA（已安装则不会再次触发）。
5. 确保有足够的用户交互（浏览器需要判断用户对网站有持续兴趣）。
6. 在 Chrome 中，可以访问 chrome://flags 查看相关 PWA 标志是否被禁用。
7. 使用 Lighthouse 审计工具检查 PWA 配置是否完整。