实现可安装

— 更新日期
Appears in: 渐进式 Web 应用

此 glitch 已经包含使渐进式 Web 应用程序可安装所需的关键组件,包括一个非常简单的 service worker 和一个 Web 应用程序清单。它还有一个默认隐藏的安装按钮。

监听 beforeinstallprompt 事件 #

当浏览器触发 beforeinstallprompt 事件时,表明可以安装渐进式 Web 应用程序并且可以向用户显示安装按钮。当 PWA 满足可安装性标准时,将触发 beforeinstallprompt 事件。

  1. Click Remix to Edit to make the project editable.

  2. beforeinstallprompt 事件处理程序添加到 window 对象。

  3. event 保存为全局变量;稍后需要它来显示提示。

  4. 取消隐藏安装按钮。

代码:

window.addEventListener('beforeinstallprompt', (event) => {
// 防止迷你信息栏出现在移动设备上。
event.preventDefault();
console.log('👍', 'beforeinstallprompt', event);
// 隐藏事件,以便以后再触发。
window.deferredPrompt = event;
// 从安装按钮容器中删除 'hidden' 类。
divInstall.classList.toggle('hidden', false);
});

处理安装按钮点击 #

要显示安装提示,请对保存的 beforeinstallprompt 事件调用 prompt()。调用 prompt() 是在安装按钮点击处理程序中完成的,因为 prompt() 必须从用户手势调用。

  1. 为安装按钮添加点击事件处理程序。
  2. 在保存的 beforeinstallprompt 事件上调用 prompt()
  3. 记录提示的结果。
  4. 将保存的 beforeinstallprompt 事件设置为 null。
  5. 隐藏安装按钮。

代码:

butInstall.addEventListener('click', async () => {
console.log('👍', 'butInstall-clicked');
const promptEvent = window.deferredPrompt;
if (!promptEvent) {
// 延迟提示不存在。
return;
}
// 显示安装提示。
promptEvent.prompt();
// Log the result
const result = await promptEvent.userChoice;
console.log('👍', 'userChoice', result);
// 重置延迟提示变量,因为
// prompt() 只能调用一次。
window.deferredPrompt = null;
// 隐藏安装按钮。
divInstall.classList.toggle('hidden', true);
});

跟踪安装事件 #

通过安装按钮安装渐进式 Web 应用程序只是用户安装 PWA 的一种方式。用户还可以使用 Chrome 的菜单、迷你信息栏和多功能框中的图标 来安装。可以通过监听 appinstalled 事件来跟踪所有这些安装方式。

  1. appinstalled事件处理程序添加到 window 对象。
  2. 将安装事件记录到分析或其他机制。

代码:

window.addEventListener('appinstalled', (event) => {
console.log('👍', 'appinstalled', event);
// 清除 deferredPrompt,以便将其收集起来
window.deferredPrompt = null;
});

深入阅读 #

恭喜,您的应用程序现在可以安装了!

以下是您可以执行的一些其他操作:

Last updated: Improve article