在 Chrome 76 中,您可以隐藏“添加到主屏幕”迷你信息栏
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
渐进式 Web 应用和迷你信息栏的背景
渐进式 Web 应用 (PWA) 是一种用于创建类似应用、可即时加载、可靠且可安装的网站的模式。
当 PWA 在 Android 上通过可安装性检查清单后,Chrome 系统对话框(称为迷你信息栏)将显示在浏览器窗口底部。
目前,“添加到主屏幕”迷你信息栏与 beforeinstallprompt
事件同时显示。
Chrome 76 中的更改
我们一直在听取社区的意见,了解到开发者希望能够更好地控制何时要求用户安装 PWA。我们听到了您的心声!
从 Chrome 76 开始,您可以通过在 beforeinstallprompt
事件中调用 preventDefault()
来阻止显示迷你信息栏。
beforeinstallprompt
事件可帮助您推广渐进式 Web 应用的安装,让用户可以轻松地将其添加到主屏幕。
我们的社区分享说,将 PWA 安装到主屏幕的用户具有很高的互动度,他们会多次访问应用,在应用中花费的时间更长,并且在适用的情况下,转化率也更高。
Pinterest 使用安装横幅来宣传其 PWA 的可安装性。如需详细了解添加到主屏幕的流程(包括代码示例和其他最佳实践),请参阅添加到主屏幕。
如需在不显示迷你信息栏的情况下宣传 Web 应用,请监听 beforeinstallprompt
事件,然后保存该事件。接下来,更新您的用户界面,以表明您的 PWA 可以安装,例如添加安装按钮、显示安装横幅、使用信息流广告或菜单选项。当用户点击安装元素时,对保存的 beforeinstallprompt
事件调用 prompt()
以显示“添加到主屏幕”模态对话框。
“添加到主屏幕”迷你信息栏的未来
使用“添加到主屏幕”信息栏仍是一项临时措施。我们正在尝试新的界面模式,以便继续为渐进式 Web 应用用户提供安装功能,同时减少浏览体验中的杂乱元素。
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2019-05-20。
[[["易于理解","easyToUnderstand","thumb-up"],["解决了我的问题","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["没有我需要的信息","missingTheInformationINeed","thumb-down"],["太复杂/步骤太多","tooComplicatedTooManySteps","thumb-down"],["内容需要更新","outOfDate","thumb-down"],["翻译问题","translationIssue","thumb-down"],["示例/代码问题","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["最后更新时间 (UTC):2019-05-20。"],[],[]]