在桌面设备上为渐进式 Web 应用安装地址栏

渐进式 Web 应用可通过 Chrome 地址栏(多功能框)中的新安装按钮轻松安装。

在桌面设备上,通常不会向用户指明渐进式 Web 应用是可安装的,如果是,则安装流程会隐藏在三点状菜单中。

在 Chrome 76(2019 年 6 月中旬推出 Beta 版)中,我们在地址栏(多功能框)中添加了一个安装按钮,让用户能够更轻松地在桌面设备上安装渐进式 Web 应用。如果网站符合渐进式 Web 应用可安装性标准,Chrome 会自动在地址栏中显示安装图标。点击该按钮会提示用户安装 PWA。

与其他安装事件一样,您可以监听 appinstalled 事件,以检测用户是否安装了您的 PWA。

添加您自己的安装提示

如果您的 PWA 用例适合用户安装您的应用(例如,如果您的用户每周不止一次使用您的应用),您应该在应用的网页界面中推广您的 PWA 安装。

如需添加您自己的自定义安装按钮,请监听 beforeinstallprompt 事件。触发后,保存对该事件的引用,并更新界面,让用户知道他们可以安装您的渐进式 Web 应用。

促进 PWA 安装的模式

您可以通过以下三种主要方式促进 PWA 安装:

  • 浏览器自动推广,例如地址栏安装按钮。
  • 应用界面提升:即在应用界面中显示界面元素,例如横幅、标题或导航菜单中的按钮等。
  • 内嵌促销模式会在网站内容中交错显示促销。

如需了解详情,请查看升级 PWA 安装(移动设备)的模式。它侧重于移动设备,但许多模式也适用于桌面设备,或者可以轻松修改以适用于桌面设备体验。