关于前端:关于-beforeinstallprompt-事件

当浏览器检测到网站能够作为渐进式 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 事件来提供更个性化的用户体验。开发人员能够依据应用程序的需要和用户的行为来决定何时显示装置提醒，而不是让浏览器主动显示。