Window：beforeinstallprompt 事件
当浏览器检测到网站可以作为渐进式 Web 应用程序（PWA）安装时，会触发 beforeinstallprompt 事件。
此事件触发的时间不确定，但通常在页面加载时发生。
此事件的典型用途是当 Web 应用程序想要提供自己的应用内 UI，邀请用户安装应用程序，而不是使用浏览器提供的通用 UI。这使得应用程序能够提供更多关于应用程序的上下文，向用户解释他们可能想要安装它的原因。
在这种情况下，此事件的处理程序将：
- 保留传入的
BeforeInstallPromptEvent对象的引用。 - 显示其应用内安装 UI（默认应隐藏，因为并非所有浏览器都支持安装）。
当用户使用应用内安装 UI 安装应用程序时，应用内安装 UI 会调用保留的 BeforeInstallPromptEvent 对象的 prompt() 方法来显示安装提示。
语法
在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。
js
addEventListener("beforeinstallprompt", (event) => { })
onbeforeinstallprompt = (event) => { }
事件类型
一个 BeforeInstallPromptEvent。继承自 Event。
事件属性
继承其父级 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", "");
});
规范
| 规范 |
|---|
| 清单孵化 # onbeforeinstallprompt-attribute |
浏览器兼容性
加载中…