安装提示

用户可能不熟悉 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 安装的模式。

正在收集分析数据

借助分析功能，您可以更好地了解何时以及在何处显示提示。您可以使用 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

库

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

资源