使其可安装
通过集合保持井井有条根据您的偏好保存内容并进行分类。

Pete LePage

此 Glitch 包含 web manifest，其中包含使 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 应用只是用户安装它的方式之一。他们还可以使用 Chrome 菜单、迷你信息栏，以及通过 omnibox 中的图标进行安装。您可以通过监听 appinstalled 事件来跟踪所有这些安装方式。

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

代码

window.addEventListener('appinstalled', (event) => {
  console.log('👍', 'appinstalled', event);
  // Clear the deferredPrompt so it can be garbage collected
  window.deferredPrompt = null;
});

延伸阅读

恭喜，您的应用现在已可安装！

以下是一些您可以做的其他事情