BeforeInstallPromptEvent

实验性： 这是一个 实验性技术
在生产环境中使用此功能之前，请仔细查看 浏览器兼容性表格。

非标准： 此功能是非标准的，并且不在标准跟踪中。不要在面向 Web 的生产网站上使用它：它不会对每个用户都有效。实现之间也可能存在很大的不兼容性，并且行为在未来可能会发生变化。

BeforeInstallPromptEvent 是 beforeinstallprompt 事件的接口，该事件在用户被提示将网站“安装”到移动设备主屏幕之前，在 Window 对象上触发。

此接口继承自 Event 接口。

Event BeforeInstallPromptEvent

构造函数

BeforeInstallPromptEvent()

创建一个新的 BeforeInstallPromptEvent 对象。

实例属性

从其父级 Event 继承属性。

BeforeInstallPromptEvent.platforms 只读

返回一个字符串项目数组，包含触发事件的平台。这适用于希望向用户展示版本选择的 User Agent，例如“web”或“play”，允许用户选择 Web 版本或 Android 版本。

BeforeInstallPromptEvent.userChoice 只读

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

实例方法

BeforeInstallPromptEvent.prompt()

显示一个提示，询问用户是否要安装应用程序。此方法返回一个 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 的浏览器中加载。

另请参阅