自首次推出“添加到主屏幕”横幅以来,我们一直致力于更清晰地标记渐进式 Web 应用,并简化用户的安装方式。我们的最终目标是在所有平台上的多功能框中提供一个安装按钮,在 Chrome 68 中,我们正针对这一目标进行一些更改。
具体变化
从 Android 版 Chrome 68(2018 年 7 月稳定版)开始,Chrome 将不再显示“添加到主屏幕”横幅。如果网站符合添加到主屏幕的条件,Chrome 会显示迷你信息栏。然后,如果用户点击迷你信息栏,或者您通过用户手势对 beforeinstallprompt
事件调用 prompt()
,Chrome 会显示一个模态“添加到主屏幕”对话框。
A2HS 横幅 Chrome 67 及更低版本
当网站符合“添加到主屏幕”条件,并且网站没有针对 beforeinstallprompt
事件调用 preventDefault()
时自动显示
或
对 beforeinstallprompt
事件调用 prompt()
即可显示。
迷你信息栏 Chrome 68 及更高版本
在网站符合“添加到主屏幕”条件时显示如果用户将其关闭,则只有在经过足够长的时间(大约 3 个月)后才会显示。
无论是否对 beforeinstallprompt
事件调用 preventDefault()
,都会显示。
在未来的 Chrome 版本中,引入多功能框安装按钮后,此界面处理方式将被移除。
A2HS 对话框
在 Chrome 68 及更高版本中,通过用户手势对 beforeinstallprompt
事件调用 prompt()
即可显示。
或
当用户在 Chrome 68 及更高版本中点按迷你信息栏时显示。
或
在所有 Chrome 版本上,当用户从 Chrome 菜单中点击“添加到主屏幕”后,系统就会显示此图标。
迷你信息栏
迷你信息栏是一个 Chrome 界面组件,不受网站控制,但可由用户轻松关闭。一旦被用户关闭,它将不会再次显示,直到一段足够长的时间(目前为 3 个月)过后才会再次显示。无论网站是否针对 beforeinstallprompt
事件执行了 preventDefault()
操作,只要网站符合添加到主屏幕条件,系统都会显示迷你信息栏。
您可以指明您的应用可以通过某个界面进行安装,界面随后将显示模态安装提示,而不是在网页加载时提示用户(权限请求的反模式)。例如,此桌面 PWA 会在用户个人资料名称的正上方添加一个“安装应用”按钮。
通过用户手势提示安装您的应用会让用户感觉没有那么垃圾,并且会提高他们点击“添加”而非“取消”的可能性。在应用中集成“安装”按钮意味着,即使用户选择今天不安装您的应用,明天或准备安装时,该按钮仍会存在。
监听 beforeinstallprompt
事件
如果您的网站符合“添加到主屏幕”条件,Chrome 将触发 beforeinstallprompt
事件,保存对该事件的引用,并更新您的界面,以表明用户可以将您的应用添加到其主屏幕。
let installPromptEvent;
window.addEventListener('beforeinstallprompt', event => {
// Prevent Chrome <= 67 from automatically showing the prompt
event.preventDefault();
// Stash the event so it can be triggered later.
installPromptEvent = event;
// Update the install UI to notify the user app can be installed
document.querySelector('#install-button').disabled = false;
});
如果应用已安装,则不会触发 beforeinstallprompt
事件(请参阅添加到主屏幕条件)。但是,如果用户稍后卸载了应用,那么每次浏览网页时都会再次触发 beforeinstallprompt
事件。
显示包含 prompt()
的对话框
如需显示“添加到主屏幕”对话框,请通过用户手势对已保存的事件调用 prompt()
。Chrome 将显示模态对话框,提示用户将应用添加到其主屏幕。然后,监听 beforeinstallprompt
事件的 userChoice
属性返回的 promise。在提示显示且用户做出响应后,promise 会返回一个包含 outcome
属性的对象。
btnInstall.addEventListener('click', () => {
// Update the install UI to remove the install button
document.querySelector('#install-button').disabled = true;
// Show the modal add to home screen dialog
installPromptEvent.prompt();
// Wait for the user to respond to the prompt
installPromptEvent.userChoice.then(choice => {
if (choice.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
// Clear the saved prompt since it can't be used again
installPromptEvent = null;
});
});
您只能对延迟事件调用一次 prompt()
。如果用户在对话框中点击“取消”,您需要等到在下一个页面导航时触发 beforeinstallprompt
事件。与传统的权限请求不同,点击“取消”不会阻止对 prompt()
的后续调用,因为必须在用户手势中调用它。
其他资源
如需了解详情,请参阅应用安装横幅,其中包括:
beforeinstallprompt
活动详情- 跟踪用户对“添加主屏幕”提示的响应
- 跟踪应用是否已安装
- 确定您的应用是否作为安装版应用运行