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

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

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

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

在考虑是否宣传安装时,请考虑用户通常如何使用您的 PWA。例如,如果有一组用户每周使用您的 PWA 多次,那么从手机主屏幕或桌面操作系统的“开始”菜单启动您的应用,可能会让这些用户受益匪浅。某些效率应用和娱乐应用还可以从在已安装的 standaloneminimal-uiwindow-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 中。