当浏览器检测到网站可以作为渐进式 Web 应用程序安装时，会触发 beforeinstallprompt 事件。

没有保证触发此事件的时间，但它通常发生在页面加载时。

此事件的典型用途是，当 Web 应用程序想要提供自己的应用程序内 UI 邀请用户安装该应用程序时，而不是浏览器提供的通用 UI 时。

这使应用程序能够提供有关应用程序的更多上下文，向用户解释为什么他们可能想要安装它。

在这种情况下，该事件的处理程序将：

保留对传入其中的 BeforeInstallPromptEvent 对象的引用
显示其应用内安装 UI（默认情况下应隐藏，因为并非所有浏览器都支持安装）。

当用户使用应用内安装界面安装应用时，应用内安装界面会调用保留的BeforeInstallPromptEvent对象的prompt()方法来显示安装提示。

例如，开发人员可能不希望在用户首次访问站点时立即显示安装提示。使用 beforeinstallprompt 事件，开发人员可以阻止浏览器的默认安装提示，然后在更合适的时间（例如用户完成了某些交互后）再显示提示。

下面是一个简单的 beforeinstallprompt 示例：

let deferredPrompt;window.addEventListener('beforeinstallprompt', (e) => {
  // 阻止 Chrome 67 及更早版本自动显示提示
  e.preventDefault();
  // 保存事件以便稍后使用
  deferredPrompt = e;
  // 更新 UI 以通知用户可以添加到主屏幕
  addBtn.style.display = 'block';});addBtn.addEventListener('click', (e) => {
  // 隐藏我们的用户界面，显示安装提示
  addBtn.style.display = 'none';
  // 显示之前保存的提示
  deferredPrompt.prompt();
  // 等待用户的响应以决定是否安装应用程序
  deferredPrompt.userChoice.then((choiceResult) => {
      if (choiceResult.outcome === 'accepted') {
        console.log('用户接受了安装提示');
      } else {
        console.log('用户拒绝了安装提示');
      }
      deferredPrompt = null;
    });});

在这个例子中，我们首先在全局作用域中定义了一个变量 deferredPrompt 以保存 beforeinstallprompt 事件。当 beforeinstallprompt 事件触发时，我们阻止了默认的安装提示，并将事件保存在 deferredPrompt 中。此外，我们还更新了用户界面，告诉用户他们可以安装 Web 应用程序。

然后，我们添加了一个点击事件监听器到安装按钮。当用户点击安装按钮时，我们隐藏用户界面的安装按钮，并显示之前保存的安装提示。我们还添加了一个对用户的响应进行监听的 Promise，以判断用户是否接受了安装提示。

这个例子展示了如何使用 beforeinstallprompt 事件来提供更个性化的用户体验。开发人员可以根据应用程序的需求和用户的行为来决定何时显示安装提示，而不是让浏览器自动显示。

ITPub博客

关于 beforeinstallprompt 事件

最新文章