许多浏览器都允许您直接在其界面中启用和推广渐进式 Web 应用 (PWA) 安装。安装(有时称为“添加到主屏幕”)可让用户在其移动设备或桌面设备上安装您的 PWA。安装 PWA 会将其添加到用户的启动器,以便它可以像任何其他已安装的应用一样运行。
除了浏览器提供的安装体验之外,您还可以直接在应用内提供自己的自定义安装流程。
![Spotify PWA 中提供的“安装应用”按钮](https://web.developers.google.cn/static/articles/customize-install/image/install-app-button-provid-c69a76f7a7ce5.png?authuser=5&hl=da)
在考虑是否促进安装时,请考虑用户通常如何使用 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 应用清单的更新。