如何提供您自己的应用安装体验

Pete LePage

发布日期：2020 年 2 月 14 日

许多浏览器都允许您直接在其界面中启用并推广渐进式 Web 应用 (PWA) 的安装。安装（以前称为“添加到主屏幕”）功能可让用户将您的 PWA 添加到其移动设备或桌面设备。安装 PWA 会将其添加到用户的启动器中，以便像任何其他已安装的应用一样运行。

除了浏览器提供的安装体验之外，您还可以直接在应用内提供自己的自定义安装流程。

Spotify PWA 中提供的“安装应用”按钮。

在考虑是否宣传安装时，请考虑用户通常如何使用您的 PWA。例如，如果有一组用户每周多次使用您的 PWA，那么他们可能会受益于从手机主屏幕或桌面操作系统中的“开始”菜单启动您的应用所带来的便利。在已安装的 standalone、minimal-ui 或 window-control-overlay 模式下，移除窗口中的浏览器工具栏后，可获得额外的屏幕空间，这也有利于某些效率类和娱乐类应用。

前提条件

在开始之前，请确保您的 PWA 满足可安装性要求，这些要求通常包括具有Web 应用清单。

宣传安装

如需表明您的渐进式 Web 应用可安装，并提供自定义应用内安装流程，请执行以下操作：

  1. 监听 beforeinstallprompt 事件。
  2. 保存 beforeinstallprompt 事件，以便稍后触发安装流程。
  3. 提醒用户您的 PWA 可安装，并提供一个按钮或其他元素来启动应用内安装流程。

监听 beforeinstallprompt 事件

如果您的渐进式 Web 应用满足所需的安装条件，浏览器会触发 beforeinstallprompt 事件。保存对该事件的引用，并更新界面以指示用户可以安装您的 PWA。

// Initialize deferredPrompt for use later to show browser install prompt.
let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent the mini-infobar from appearing on mobile
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can install the PWA
  showInstallPromotion();
  // Optionally, send analytics event that PWA install promo was shown.
  console.log(`'beforeinstallprompt' event was fired.`);
});

应用内安装流程

如需提供应用内安装功能，请提供一个按钮或其他界面元素，供用户点击或点按以安装您的应用。当用户点击或点按该元素时，请对保存的 beforeinstallprompt 事件（存储在 deferredPrompt 变量中）调用 prompt()。它会向用户显示一个模态安装对话框，要求用户确认是否要安装您的 PWA。

buttonInstall.addEventListener('click', async () => {
  // Hide the app provided install promotion
  hideInstallPromotion();
  // Show the install prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  const { outcome } = await deferredPrompt.userChoice;
  // Optionally, send analytics event with outcome of user choice
  console.log(`User response to the install prompt: ${outcome}`);
  // We've used the prompt and can't use it again, throw it away
  deferredPrompt = null;
});

userChoice 属性是一个 Promise，它会解析为用户的选择。 您只能对延迟事件调用一次 prompt()。如果用户关闭了该提示，您需要等到 beforeinstallprompt 事件再次触发（通常是在 userChoice 属性解析后立即触发）。

检测 PWA 何时成功安装

您可以使用 userChoice 属性来确定用户是否从您的界面内安装了应用。不过，如果用户从地址栏或其他浏览器组件安装您的 PWA，userChoice 将无法提供帮助。 您应改为监听 appinstalled 事件，无论使用何种机制安装 PWA，只要安装成功，就会触发该事件。

window.addEventListener('appinstalled', () => {
  // Hide the app-provided install promotion
  hideInstallPromotion();
  // Clear the deferredPrompt so it can be garbage collected
  deferredPrompt = null;
  // Optionally, send analytics event to indicate successful install
  console.log('PWA was installed');
});

检测 PWA 的启动方式

CSS display-mode 媒体查询用于指示 PWA 的启动方式，即在浏览器标签页中启动还是作为已安装的 PWA 启动。这样一来，便可根据应用的启动方式应用不同的样式。例如，您可以将其配置为在作为已安装的 PWA 启动时始终隐藏“安装”按钮并提供“返回”按钮。

跟踪 PWA 的启动方式

如需跟踪用户启动 PWA 的方式，请使用 matchMedia() 测试 display-mode 媒体查询。

function getPWADisplayMode() {
  if (document.referrer.startsWith('android-app://'))
    return 'twa';
  if (window.matchMedia('(display-mode: browser)').matches)
    return 'browser';
  if (window.matchMedia('(display-mode: standalone)').matches || navigator.standalone)
    return 'standalone';
  if (window.matchMedia('(display-mode: minimal-ui)').matches)
    return 'minimal-ui';
  if (window.matchMedia('(display-mode: fullscreen)').matches)
    return 'fullscreen';
  if (window.matchMedia('(display-mode: window-controls-overlay)').matches)
    return 'window-controls-overlay';

  return 'unknown';
}

跟踪显示模式何时发生变化

如需跟踪用户是否在 browser 和其他显示模式之间切换，请监听 display-mode 媒体查询的变化。

// Replace "standalone" with the display mode used in your manifest
window.matchMedia('(display-mode: standalone)').addEventListener('change', () => {
  // Log display mode change to analytics
  console.log('DISPLAY_MODE_CHANGED', getPWADisplayMode());
});

根据当前显示模式更新界面

如需在 PWA 作为已安装的 PWA 启动时为其应用不同的背景颜色，请使用条件 CSS：

@media all and (display-mode: standalone) {
  body {
    background-color: yellow;
  }
}

更新应用的图标和名称

如果您需要更新应用名称或提供新图标，该怎么办？ 请参阅Chrome 如何处理对 Web 应用清单的更新，了解这些更改何时以及如何反映在 Chrome 中。