Window: beforeinstallprompt 事件

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

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

此事件的典型用途是，当 Web 应用想要提供自己的应用内 UI 来邀请用户安装应用时，而不是使用浏览器提供的通用 UI。这使得应用能够提供更多关于应用的上下文，向用户解释他们为什么可能想要安装它。

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

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

当用户使用应用内安装 UI 安装应用时，应用内安装 UI 将调用保留的BeforeInstallPromptEvent对象的prompt()方法以显示安装提示。

语法

在诸如addEventListener()之类的使用方法中使用事件名称，或设置事件处理程序属性。

js
addEventListener("beforeinstallprompt", (event) => {});

onbeforeinstallprompt = (event) => {};

事件类型

一个BeforeInstallPromptEvent。继承自Event。

Event BeforeInstallPromptEvent

事件属性

继承其父级Event的属性。

BeforeInstallPromptEvent.platforms 只读

返回一个字符串项数组，其中包含分派事件的平台。这是为想要向用户提供版本选择的浏览器提供的，例如“web”或“play”，这将允许用户在 Web 版本和 Android 版本之间进行选择。

BeforeInstallPromptEvent.userChoice 只读

返回一个Promise，该 Promise 解析为一个对象，描述用户在被提示安装应用时的选择。

事件方法

BeforeInstallPromptEvent.prompt()

显示一个提示，询问用户是否要安装该应用。此方法返回一个Promise，该 Promise 解析为一个对象，描述用户在被提示安装应用时的选择。

示例

在以下示例中，一个应用提供了自己的安装按钮，该按钮的id为"install"。最初，该按钮是隐藏的。

html
<button id="install" hidden>Install</button>

beforeinstallprompt处理程序

  • 取消事件，这将阻止浏览器在某些平台上显示其自己的安装 UI
  • 将BeforeInstallPromptEvent对象分配给一个变量，以便稍后使用
  • 显示应用的安装按钮。
js
let installPrompt = null;
const installButton = document.querySelector("#install");

window.addEventListener("beforeinstallprompt", (event) => {
  event.preventDefault();
  installPrompt = event;
  installButton.removeAttribute("hidden");
});

单击时，应用的安装按钮

  • 调用存储的事件对象的prompt()方法，以触发安装提示。
  • 通过清除installPrompt变量并再次隐藏自身来重置其状态。
js
installButton.addEventListener("click", async () => {
  if (!installPrompt) {
    return;
  }
  const result = await installPrompt.prompt();
  console.log(`Install prompt was: ${result.outcome}`);
  installPrompt = null;
  installButton.setAttribute("hidden", "");
});

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅