此页面由 Cloud Translation API 翻译。

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

Pete LePage

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

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

在考虑是否促进安装时，请考虑用户通常如何使用 PWA。例如，如果有一组用户在一周内多次使用您的 PWA，这些用户可能会受益于从手机主屏幕或桌面操作系统的“开始”菜单启动应用的更便捷。在安装的 standalone 或 minimal-ui 模式下，从窗口中移除浏览器工具栏会产生额外的屏幕空间，从而使一些效率和娱乐应用受益。

前提条件

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

提升安装

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

监听 beforeinstallprompt 事件。
保存 beforeinstallprompt 事件，以便稍后触发安装流程。
提醒用户您的 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 媒体查询。iOS 版 Safari 尚不支持此功能，因此您必须改为检查 navigator.standalone，它会返回一个布尔值，指示浏览器是否正在独立模式下运行。

function getPWADisplayMode() {
  const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
  if (document.referrer.startsWith('android-app://')) {
    return 'twa';
  } else if (navigator.standalone || isStandalone) {
    return 'standalone';
  }
  return 'browser';
}

跟踪显示模式的变化

如需跟踪用户是否在 standalone 和 browser tab 之间发生更改，请监听 display-mode 媒体查询的更改。

window.matchMedia('(display-mode: standalone)').addEventListener('change', (evt) => {
  let displayMode = 'browser';
  if (evt.matches) {
    displayMode = 'standalone';
  }
  // Log display mode change to analytics
  console.log('DISPLAY_MODE_CHANGED', displayMode);
});

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

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

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

更新应用的图标和名称

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