在 Chrome 76 中，您可以隐藏“添加到主屏幕”迷你信息栏

Penny McLachlan
Penny McLachlan
X GitHub

渐进式 Web 应用和迷你信息栏的背景

渐进式 Web 应用 (PWA) 是一种用于创建类应用即时加载、可靠且可安装的网站的模式。

当您的 PWA 通过 Android 上的可安装性核对清单时，浏览器窗口底部会显示一个名为迷你信息栏的 Chrome 系统对话框。

目前，“添加到主屏幕”迷你信息栏与 beforeinstallprompt 事件同时显示。

Chrome 76 中的变化

我们一直在倾听社区的意见，了解到开发者希望更好地控制何时要求用户安装 PWA。我们听到了您的心声！

从 Chrome 76 开始，您可以通过对 beforeinstallprompt 事件调用 preventDefault() 来阻止显示迷你信息栏。

beforeinstallprompt 事件可以帮助您宣传渐进式 Web 应用的安装，以便用户轻松将其添加到自己的主屏幕。我们的社区已表明，将 PWA 安装到主屏幕的用户具有很高的互动度，其重复访问量和在应用中停留时间都更多，并且在适用的情况下，转化率会更高。

示例：Pinterest 使用安装横幅来提升其 PWA 的可安装性。
使用安装横幅提升 PWA 可安装性的 Pinterest 示例。如需详细了解“添加到主屏幕”流程，包括代码示例和其他最佳实践，请参阅添加到主屏幕。

如需在没有迷你信息栏的情况下推广您的 Web 应用，请监听 beforeinstallprompt 事件，然后保存该事件。接下来，更新您的界面以指明您的 PWA 可以安装，例如通过添加安装按钮、显示安装横幅、使用信息流促销信息或菜单选项。当用户点击安装元素时，对已保存的 beforeinstallprompt 事件调用 prompt()，以显示“添加到主屏幕”模态对话框。

“添加到主屏幕”迷你信息栏的未来

使用“添加到主屏幕”信息栏仍是一项临时措施。我们正在实验新的界面模式，这些模式将继续让渐进式 Web 应用用户能够安装，并且实现这一目标的方式可以减少浏览体验的混乱情况。