Pete LePage
此问题包含一个 Web 清单，其中包含使 Web 应用可安装所需的字段。
它还具有一个默认处于隐藏状态的安装按钮。
监听 beforeinstallprompt 事件
当浏览器触发 beforeinstallprompt 事件时，表示可以安装 Web 应用，并且可以向用户显示安装按钮。当应用符合可安装性条件时，系统会触发 beforeinstallprompt 事件。
通过捕获该事件，开发者可以自定义安装流程，并在他们认为最合适的时间提示用户进行安装。
- 点击 Remix to Edit 即可修改项目。
- 将
beforeinstallprompt事件处理脚本添加到window对象。 - 将
event保存为全局变量；我们稍后需要它来显示提示。 - 取消隐藏安装按钮。
代码：
window.addEventListener('beforeinstallprompt', (event) => {
// Prevent the mini-infobar from appearing on mobile.
event.preventDefault();
console.log('👍', 'beforeinstallprompt', event);
// Stash the event so it can be triggered later.
window.deferredPrompt = event;
// Remove the 'hidden' class from the install button container.
divInstall.classList.toggle('hidden', false);
});
处理安装按钮点击
如需显示安装提示，请对已保存的 beforeinstallprompt 事件调用 prompt()。调用 prompt() 是在安装按钮点击处理程序中完成的，因为必须通过用户手势调用 prompt()。
- 为安装按钮添加点击事件处理脚本。
- 对已保存的
beforeinstallprompt事件调用prompt()。 - 记录提示的结果。
- 将已保存的
beforeinstallprompt事件设为 null。 - 隐藏“安装”按钮。
代码：
butInstall.addEventListener('click', async () => {
console.log('👍', 'butInstall-clicked');
const promptEvent = window.deferredPrompt;
if (!promptEvent) {
// The deferred prompt isn't available.
return;
}
// Show the install prompt.
promptEvent.prompt();
// Log the result
const result = await promptEvent.userChoice;
console.log('👍', 'userChoice', result);
// Reset the deferred prompt variable, since
// prompt() can only be called once.
window.deferredPrompt = null;
// Hide the install button.
divInstall.classList.toggle('hidden', true);
});
跟踪安装事件
通过安装按钮安装 Web 应用只是用户安装 Web 应用的一种方式。他们还可以使用 Chrome 的菜单、迷你信息栏，以及通过多功能框中的图标。您可以通过监听 appinstalled 事件来跟踪所有这些安装方式。
- 将
appinstalled事件处理脚本添加到window对象。 - 将安装事件记录到 Google Analytics 或其他机制。
代码：
window.addEventListener('appinstalled', (event) => {
console.log('👍', 'appinstalled', event);
// Clear the deferredPrompt so it can be garbage collected
window.deferredPrompt = null;
});
深入阅读
恭喜，您的应用现已可供安装！
您还可以执行以下操作：