安装提示

用户可能不熟悉 PWA 安装流程。作为开发者，您将了解邀请用户安装应用的合适时机。默认的浏览器安装提示还可以得到增强。我们来看一下可用的工具。

增强安装对话框

当 PWA 符合安装条件时，浏览器会提供默认安装提示。浏览器会使用您的 Web 应用清单中的 name 和 icons 属性来构建提示。

Microsoft Edge 安装提示。

有些浏览器会使用清单中的推广字段（包括 description、categories 和 screenshots）提升安装提示体验。例如，使用 Android 版 Chrome 时，如果您的 PWA 为 description 和 screenshots 字段提供了值，安装对话框体验会从较小的添加到主屏幕信息栏变成更大、更详细的对话框，类似于应用商店中的安装提示。

请参阅促销字段的实际运用：

beforeinstallprompt 事件

浏览器的安装提示是让用户安装您的 PWA 的第一步。为了实现您自己的安装体验，您的应用仍需符合安装条件：当浏览器检测到您的应用可安装时，就会触发 beforeinstallprompt 事件。您需要实现此事件处理脚本，才能自定义用户体验。具体方法如下：

  1. 监听 beforeinstallprompt 事件。
  2. 保存（稍后需要用到）。
  3. 从界面触发。

查看以下代码，了解 beforeinstallprompt 事件的事件监听器示例，以及该监听器的捕获及后续自定义用途。

// This variable will save the event for later use.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
  // Prevents the default mini-infobar or install dialog from appearing on mobile
  e.preventDefault();
  // Save the event because you'll need to trigger it later.
  deferredPrompt = e;
  // Show your customized install prompt for your PWA
  // Your own UI doesn't have to be a single element, you
  // can have buttons in different locations, or wait to prompt
  // as part of a critical journey.
  showInAppInstallPromotion();
});

然后，如果用户点击您的自定义安装按钮，请使用之前保存的 deferredPrompt 并调用其 prompt() 方法，因为用户仍然需要完成浏览器的安装流程。您所做的只是延迟事件，直到为用户提供正确的上下文来鼓励他们安装 PWA。

通过捕获此事件，您有机会添加提示和激励措施来吸引用户安装您的应用，还可以选择在确定用户互动度更高时提示用户安装。

在以下情况下，事件不会触发：

  • 用户已安装当前的 PWA（仅对 Android 上的桌面设备和 WebAPK 有效）。
  • 应用不符合 PWA 安装条件。
  • 由于其他原因（例如，设备处于自助服务终端模式或不具备相应权限），PWA 无法在当前设备上安装。

给出提示的最佳位置

在何处显示提示取决于您的应用，以及用户何时与您的内容和服务互动最多。捕获 beforeinstallprompt 后，您可以引导用户了解继续使用您的应用的原因，以及他们安装这款应用可以获得的好处。 您可以选择在应用的任何位置显示安装提示。一些常见模式包括：在侧边菜单中，在关键用户历程（例如完成订单）之后，或在注册页面之后显示。如需了解详情，请参阅促进 PWA 安装的模式。

收集分析数据

借助 Analytics（分析），您可以更好地了解在何时何地显示提示。您可以使用 beforeinstallprompt 事件中的 userChoice 属性；userChoice 是一个 promise，它将通过用户所执行的操作来解析。

// Gather the data from your custom install UI event listener
installButton.addEventListener('click', async () => {
  // deferredPrompt is a global variable we've been using in the sample to capture the `beforeinstallevent`
  deferredPrompt.prompt();
  // Find out whether the user confirmed the installation or not
  const { outcome } = await deferredPrompt.userChoice;
  // The deferredPrompt can only be used once.
  deferredPrompt = null;
  // Act on the user's choice
  if (outcome === 'accepted') {
    console.log('User accepted the install prompt.');
  } else if (outcome === 'dismissed') {
    console.log('User dismissed the install prompt');
  }
});

查看实际案例

请尝试在 Chromium 浏览器（桌面版或 Android）中实际应用以下示例。

后备操作

如果浏览器不支持 beforeinstallprompt 或事件未触发，则无法通过其他方式触发浏览器的安装提示。不过，在允许用户手动安装 PWA 的平台（如 iOS）上，您可以向用户显示这些说明。

您应仅在浏览器模式下呈现这些说明；其他显示选项（例如 standalone 或 fullscreen）表示用户已安装相应应用。

如需仅在浏览器模式下呈现元素，请使用 display-mode 媒体查询：

#installInstructions {
   display: none
}
@media (display-mode: browser) {
   #installInstructions {
     display: block
   }
}

Codelab

库

查看以下库，获取有关呈现自定义安装提示的帮助：

资源