许多浏览器都允许您启用并提升安装量 渐进式 Web 应用 (PWA) 界面。 安装(有时称为“添加到主屏幕”)功能可让用户安装 在移动设备或桌面设备上使用 PWA。安装 PWA 会将其添加到用户的 启动器,使其可以像安装的任何其他应用一样运行。
除了浏览器提供的安装体验之外, 您可以直接在应用中提供自己的自定义安装流程。
<ph type="x-smartling-placeholder">![Spotify PWA 中提供的“安装应用”按钮](https://web-dot-google-developers.gonglchuangl.net/static/articles/customize-install/image/install-app-button-provid-c69a76f7a7ce5.png?hl=zh-cn)
在考虑是否提倡安装时,请考虑用户通常采用何种方式
使用 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
事件(存储在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';
}
在显示模式更改时进行跟踪
如需跟踪用户是否在 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 应用不同的背景颜色 PWA,使用条件 CSS:
@media all and (display-mode: standalone) {
body {
background-color: yellow;
}
}
更新应用的图标和名称
如果您需要更新应用名称或提供新图标,该怎么办? 请参阅 Chrome 如何处理 Web 应用清单的更新 ,看看这些更改何时以及如何在 Chrome 中体现出来。