更丰富的 PWA 安装界面

简介

移动设备以及设备供应商应用商店的引入改变了用户发现、评估和安装软件的思维模式。用户现在已经非常熟悉应用商店,以及通过应用商店提供的其他信息,例如应用的背景信息、社交反馈、评分等。

解决现有安装途径的难题

目前,如果用户想要安装 PWA,系统会显示信息栏和模态叠加层,其中包含最少的信息。如果用户继续安装,进程结束得太快,并且无法向用户提供上下文。这违背了他们安装应用的预期,并且可能会让他们对发生的情况感到困惑。

PWA 安装界面示例。
PWA 安装界面示例。

为了让开发者提供与原生体验相当的安装式体验,Chrome 将推出新的安装途径“富媒体安装”,以便开发者向其清单文件添加说明和屏幕截图,并让该文件显示在 Chrome(Android 版)的底部动作条对话框中。

Chrome 中的底部动作条界面示例。
Chrome 中的 bottomsheet 界面示例。

这样,开发者就有机会创建更具吸引力的安装流程,更好地满足用户的期望,并模仿他们现有的安装体验思维模式。

已展开更丰富的安装界面。
展开了更丰富的安装界面。
已收起更丰富的安装界面。
已收起信息更丰富的安装界面。

向后兼容性

如果网站的清单文件中未至少添加一张屏幕截图,该网站将继续收到现有的提示。未来这一要求可能会有所变化,具体取决于开发者社区的接受程度以及用户的反应。

预览界面

此界面适用于 Android 设备上的 Chrome 94 和桌面设备上的 Chrome 108

此功能已在 squoosh.app 上启用,并可在此处预览。

实现

如需显示更丰富的安装界面对话框,开发者需要在 screenshots 数组中为相应设备类型添加至少一个屏幕截图。description 字段不是必需的,但建议填写。内容对话框使用 screenshotsdescription 字段的内容构建而成,使体验更接近于应用商店安装。此界面有助于用户识别他们是否是在向自己的设备添加应用,并且有更多可用的空间,开发者可以在安装应用时为其用户提供具体的背景信息。

例如,开发者可以使用 description 字段来突出显示应用的功能,激励用户将其保留在设备中,而借助 screenshots,他们可以将 Web 应用的外观和风格呈现为独立应用,并获享平台应用所具有的所有轻松访问功能。

如需查看详细规范以及将其添加到应用的指南,请访问富媒体安装界面模式

反馈

将来,我们将考虑添加其他数据(例如类别和应用评分),但我们会根据开发者和用户的反馈来决定是否添加。

在接下来的几个月里,我们希望了解开发者如何探索这种新的界面模式,并想听听您的反馈意见。请填写此表单与我们联系