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

借助 Chrome 地址栏(万能搜索框)中的新安装按钮,您可以轻松安装渐进式 Web 应用。

在桌面设备上,系统通常不会向用户指明 PWA 是否可安装,如果可安装,安装流程会隐藏在三点状菜单中。

在 Chrome 76(2019 年 6 月中旬的 Beta 版)中,我们在地址栏(万能搜索框)中添加了安装按钮,以便用户更轻松地在桌面设备上安装渐进式 Web 应用。如果某个网站符合渐进式 Web 应用可安装性条件,Chrome 会在地址栏中自动显示安装图标。点击该按钮会提示用户安装 PWA。

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

添加您自己的安装提示

如果您的 PWA 有使用情形需要用户安装您的应用(例如,如果您有用户每周使用您的应用超过一次),您应在应用的 Web 界面中宣传安装 PWA。

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

用于促进用户安装 PWA 的模式

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

  • 自动浏览器宣传,例如地址栏中的安装按钮。
  • 应用界面宣传,其中界面元素显示在应用界面中,例如横幅、标题或导航菜单中的按钮等。
  • 内嵌式促销模式会在网站内容中穿插促销信息。

如需了解详情,请参阅促进 PWA 安装(移动设备)中的模式。该指南侧重于移动设备,但其中的许多模式也适用于桌面设备,或者可以轻松修改为适用于桌面设备的体验。