自首次推出“添加到主屏幕”横幅以来，我们一直致力于更清晰地标记渐进式 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活动详情- 跟踪用户对“添加主屏幕”提示的响应
- 跟踪应用是否已安装
- 确定您的应用是否作为安装版应用运行