更丰富的 PWA 安装界面

穆斯塔法·库尔图尔杜
Mustafa Kurtuldu
阿德里安娜·加拉 (Adriana Jara)
Adriana Jara

简介

移动设备和设备供应商应用商店的引入改变了用户在如何发现、评估和安装软件方面的思维模式。用户现在非常熟悉应用商店以及通过应用商店提供的其他信息,例如应用的相关背景信息、社交反馈、评分等,以至于在桌面设备操作系统(包括 ChromeOS、Mac 和 Windows)中逐渐出现应用商店隐喻。

面对当今的安装途径,面对挑战

目前,如果用户想要安装 PWA,系统会显示信息栏和模态叠加层,其中包含最基本的信息。如果用户继续安装,进程就过快了,而且没有向用户提供相关背景信息。这违背了他们对安装应用的预期,可能会让他们对发生的情况感到困惑。

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

为了让开发者提供与原生体验相当的安装体验,Chrome 将推出一种新的安装界面,即更丰富的安装,它允许开发者向其清单文件添加说明和屏幕截图,并使其显示在 Chrome(Android 版)的底部动作条对话框中。

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

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

扩展了更丰富的安装界面。
扩展了更丰富的安装界面。
收起了更丰富的安装界面。
收起了更丰富的安装界面。

向后兼容性

未在清单文件中添加任何屏幕截图的网站将继续收到现有提示。根据开发者社区的接受程度和用户反应,此情况将来可能会发生变化。

预览界面

此界面支持 Android 版 Chrome 94 和桌面版 Chrome 108

此功能在 squoosh.app 上启用,可以在那里预览。

实施步骤

若要显示更丰富的安装界面对话框,开发者需要在 screenshots 数组中为相应外形规格至少添加一张屏幕截图。description 字段不是必需的,但建议填写。内容对话框是使用 screenshotsdescription 字段的内容构建的,旨在使体验更接近应用商店安装。此界面可以帮助用户识别他们正在向设备添加应用,随着可用空间更多,开发者可以在用户安装应用时提供具体背景信息。

例如,开发者可以使用 description 字段来突出显示应用的功能,从而激励用户将其保留在自己的设备上;通过 screenshots,他们可以使用平台应用提供的所有轻松访问功能,独立呈现 Web 应用的外观和风格。

如需了解详细规范并了解如何将其添加到应用中的指南,请参阅内容更丰富的安装界面模式

反馈

未来,我们将考虑添加其他数据(例如类别和应用评分),但这些数据将会基于开发者和用户的反馈。

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