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

许多浏览器都允许您启用并提升安装量 渐进式 Web 应用 (PWA) 界面。 安装(有时称为“添加到主屏幕”)功能可让用户安装 在移动设备或桌面设备上使用 PWA。安装 PWA 会将其添加到用户的 启动器,使其可以像安装的任何其他应用一样运行。

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

<ph type="x-smartling-placeholder">
</ph> Spotify PWA 中提供的“安装应用”按钮 <ph type="x-smartling-placeholder">
</ph> “安装应用”按钮。

在考虑是否提倡安装时,请考虑用户通常采用何种方式 使用 PWA。例如,如果有一组用户多次使用您的 PWA 那么这些用户可能就会受益于 从手机主屏幕或桌面中的“开始”菜单启动应用 操作系统一些办公和娱乐应用也很有用 而对额外屏幕空间造成的影响,则是移除 窗口(在已安装的 standaloneminimal-ui 模式下)。

前提条件

开始之前,请确保您的 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 事件(存储在prompt() deferredPrompt 变量)。向用户显示模态安装对话框,询问 以确认他们想要安装您的 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';
}

在显示模式更改时进行跟踪

如需跟踪用户是否在 standalonebrowser 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 应用不同的背景颜色 PWA,使用条件 CSS:

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

更新应用的图标和名称

如果您需要更新应用名称或提供新图标,该怎么办? 请参阅 Chrome 如何处理 Web 应用清单的更新 ,看看这些更改何时以及如何在 Chrome 中体现出来。