用户可能不熟悉 PWA 安装流程。作为开发者,您将了解邀请用户安装应用的合适时机。默认的浏览器安装提示还可以得到增强。我们来看一下可用的工具。
增强安装对话框
当 PWA 符合安装条件时,浏览器会提供默认安装提示。浏览器会使用您的 Web 应用清单中的 name
和 icons
属性来构建提示。
有些浏览器会使用清单中的推广字段(包括 description
、categories
和 screenshots
)提升安装提示体验。例如,使用 Android 版 Chrome 时,如果您的 PWA 为 description
和 screenshots
字段提供了值,安装对话框体验会从较小的添加到主屏幕信息栏变成更大、更详细的对话框,类似于应用商店中的安装提示。
请参阅促销字段的实际运用:
beforeinstallprompt 事件
浏览器的安装提示是让用户安装您的 PWA 的第一步。为了实现您自己的安装体验,您的应用仍需符合安装条件:当浏览器检测到您的应用可安装时,就会触发 beforeinstallprompt
事件。您需要实现此事件处理脚本,才能自定义用户体验。具体方法如下:
- 监听
beforeinstallprompt
事件。 - 保存(稍后需要用到)。
- 从界面触发。
查看以下代码,了解 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 安装的模式。
收集分析数据
借助 Analytics(分析),您可以更好地了解在何时何地显示提示。您可以使用 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
库
查看以下库,获取有关呈现自定义安装提示的帮助: