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

Chrome 地址栏(多功能框)中新增了安装按钮,让您轻松安装渐进式 Web 应用。

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

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

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

添加您自己的安装提示

如果您的 PWA 具有对用户安装应用有帮助的用例,例如,如果您有每周使用应用超过一次的用户,则应在应用的 Web 界面中宣传 PWA 的安装。

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

用于推广 PWA 安装的模式

您可以通过以下三种主要方式来宣传 PWA 的安装:

  • 自动浏览器宣传,例如地址栏安装按钮。
  • 应用界面宣传:界面元素出现在应用界面中,例如横幅、标题或导航菜单中的按钮等。
  • 内嵌促销模式将促销内容与网站内容交织在一起。

如需了解详情,请参阅宣传 PWA 安装(移动设备)的模式。虽然这些模式主要针对移动设备,但其中许多模式也适用于桌面设备,或者可以轻松修改以适应桌面设备体验。