使其可安装

Pete LePage

此故障包含网络清单，其中包含使 Web 应用可安装的必填字段。

并且还有一个默认隐藏的安装按钮。

监听 beforeinstallprompt 事件

当浏览器触发 beforeinstallprompt 事件时，即表示 表明可以安装 Web 应用，并显示安装按钮 。beforeinstallprompt 事件在应用满足 可安装性标准。

通过捕获事件，开发者可以自定义安装并提示用户 在他们认为合适的时机安装您的应用。

  1. 点击 Remix to Edit 以使项目可修改。
  2. 将 beforeinstallprompt 事件处理脚本添加到 window 对象。
  3. 将 event 保存为全局变量；我们稍后需要使用它来显示 提示。
  4. 取消隐藏安装按钮。

代码：

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()。

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

代码：

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 的菜单、迷你信息栏以及 多功能框中的图标即可打开或关闭。您可以 通过监听 appinstalled 来跟踪所有这些安装方式。 事件。

  1. 将 appinstalled 事件处理脚本添加到 window 对象。
  2. 将安装事件记录到分析工具或其他机制中。

代码：

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

深入阅读

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

下面列举了一些您可以执行的操作：