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

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

在桌面设备上,通常不会告知用户 Progressive Web App 是否可安装,如果可以安装,安装流程会隐藏在三点状菜单中。

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

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

添加您自己的安装提示

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

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

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

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

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

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