过去,只有在平台专用应用的上下文中才能安装应用。如今,现代 Web 应用提供可安装的体验,其集成度和可靠性与平台专用应用相当。
您可以通过以下不同方式实现此目的:
拥有不同的分发渠道是覆盖大量用户的有效方式,但选择合适的策略来宣传您的 PWA 安装可能并非易事。
本指南探讨了结合使用不同安装选项的最佳实践,以提高安装率并避免平台竞争和侵蚀。涵盖的安装产品包括通过浏览器和应用商店安装的 PWA,以及平台专用应用。
为什么要将 Web 应用转换为可安装的应用?
已安装的渐进式 Web 应用会在独立窗口(而非浏览器标签页)中运行。用户可以从主屏幕、底部固定栏、任务栏或搁架启动这些应用。用户可以在设备上搜索这些应用,并使用应用切换器在这些应用之间跳转,从而让这些应用看起来像是安装在设备上的一部分。
但是,同时提供可安装的 Web 应用和平台专用应用可能会让用户感到困惑。对于某些用户,平台专用应用可能是最佳选择,但对于其他用户,它们可能会存在一些缺点:
- 存储空间限制:安装新应用可能意味着删除其他应用,或者通过移除有价值的内容来清理空间。对于使用低端设备的用户来说,这尤其不利。
- 可用带宽:下载应用可能是一个费时费力的缓慢过程,对于网速较慢且数据流量套餐价格较高的用户来说,下载过程更是如此。
- 摩擦:离开网站并前往应用商店下载应用会造成额外的摩擦,并延迟用户可以直接在网站上执行的操作。
- 更新周期:在特定平台的应用中进行更改可能需要完成应用审核流程,这可能会拖慢更改和实验(例如 A/B 测试)的速度。
在某些情况下,不会下载您专属平台的应用的用户所占的百分比可能会很高,例如:认为自己不会经常使用该应用的用户,或者不认为下载该应用值得占用几兆字节的存储空间或流量。您可以通过多种方式确定此细分受众群的规模,例如,使用分析设置来跟踪“仅限移动网站”用户所占的百分比。
如果此细分受众群体的规模相当可观,则表明您需要提供安装体验的替代方式。
通过浏览器宣传 PWA 的安装
如果您拥有优质的 PWA,不妨优先推广其安装,而不是推广特定平台的应用。例如,如果特定平台的应用缺少 PWA 提供的功能,或者已经有一段时间没有更新。如果特定平台的应用未针对较大的屏幕(例如 ChromeOS)进行优化,则也可能有助于推广 PWA 的安装。
对于某些应用,提高特定平台应用的安装量是其业务模式的关键部分,在这种情况下,宣传特定平台应用的安装具有商业意义。但有些用户可能更喜欢使用网页版。如果可以识别出该细分受众群体,则仅向其显示 PWA 提示(我们称之为“将 PWA 用作后备”)。
将 PWA 作为主要可安装体验
当 PWA 满足可安装性条件后,大多数浏览器都会显示 PWA 可供安装。例如,桌面版 Chrome 会在地址栏中显示可安装的图标,而在移动设备上,则会显示一个迷你信息栏:
虽然这对于某些体验来说可能已经足够,但如果您的目标是提高 PWA 的安装量,我们强烈建议您监听 BeforeInstallPromptEvent
,并遵循促进 PWA 安装的模式。
防止 PWA 侵蚀特定平台的应用安装率
在某些情况下,您可能会选择优先推广特定平台的应用,而不是 PWA,但在这种情况下,我们仍建议您提供一种机制,让用户能够安装 PWA。借助此回退选项,无法或不想安装您专属平台的应用的用户可以获得类似的安装体验。
若要实现此策略,第一步是定义何时向用户显示 PWA 的安装促销活动。
示例:PWA 用户是指已看到平台专用应用安装提示但未安装平台专用应用的用户。他们至少回访了该网站 5 次,或者点击了应用横幅,但选择继续使用网站。
然后,可以通过以下方式实现启发词语:
- 显示平台专用应用安装横幅。
- 如果用户关闭横幅,请设置包含相应信息的 Cookie(例如
document.cookie = "app-install-banner=dismissed"
)。 - 使用另一个 Cookie 来跟踪用户对网站的访问次数(例如
document.cookie = "user-visits=1"
)。 - 编写一个函数(例如
isPWAUser()
),该函数使用之前存储在 Cookie 中的信息以及getInstalledRelatedApps()
API 来确定用户是否属于“PWA 用户”。 - 当用户执行有意义的操作时,调用
isPWAUser()
。如果该函数返回 true 且之前保存了 PWA 安装提示,您可以显示 PWA 安装按钮。
通过应用商店宣传您的 PWA 的安装
您可以使用不同的技术(包括 PWA 技术)构建适用于应用商店的应用。在将 PWA 融入原生环境中,您可以找到可用于实现此目的的技术的摘要。
在本部分中,我们将商店中的应用分为两类:
- 平台专用应用:这些应用大多使用平台专用代码构建而成。其大小取决于平台,但在 Android 上通常大于 10MB,在 iOS 上通常大于 30MB。如果您没有 PWA,或者平台专用应用提供的功能更为全面,则可能需要宣传平台专用应用。
- 轻量应用:这些应用也可以使用平台专用代码构建,但通常是使用 Web 技术构建,并封装在平台专用封装容器中。您也可以将完整的 PWA 上传到这些商店。(本文的后面部分会对此进行介绍。)有些公司选择以“精简版”体验的形式提供这些功能,而有些公司也将此方法用于其旗舰(核心)应用。
推广轻量级应用
根据 Google Play 研究,APK 的大小每增加 6 MB,安装转化率就会降低 1%。这意味着,10 MB 的应用的下载完成率可能比 100 MB 的应用高出约 30%!
为解决此问题,一些公司利用其 PWA 通过可信 Web 活动 (TWA) 在 Play 商店中提供应用的轻量版。TWA 会将您的 PWA 封装在类似于 WebView 的组件中,生成的应用大小通常只有几兆字节。
Oyo 是印度最大的酒店管理公司之一,该公司打造了应用的 Lite 版本,并使用 TWA 在 Play 商店中发布了该版本。在撰写本文时,Oyo 应用只有 850 KB,仅为 Android 应用大小的 7%。安装后,它与 Android 应用没有区别:
Oyo 在商店中保留了主打应用和“精简版”应用版本,为用户提供了选择。
提供轻量 Web 体验
直观地讲,与使用高端手机的用户相比,使用低端设备的用户可能更倾向于下载轻量版应用。因此,如果可以识别用户的设备,您可以优先显示轻量应用安装横幅,而不是更重的平台专用应用版本。
在网站上,您可以获取设备信号,并将其大致映射到设备类别(例如“高”“中”或“低”)。您可以通过不同的方式获取此信息,包括使用 JavaScript API 或客户端提示。
使用 JavaScript
您可以使用 navigator.hardwareConcurrency、navigator.deviceMemory 和 navigator.connection 等 JavaScript 属性,分别获取有关设备 CPU、内存和网络状态的信息。例如:
const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';`
使用客户端提示
您还可以通过 Client Hints 在 HTTP 请求标头中推断设备信号。下面展示了如何使用客户端提示针对设备内存实现上述代码:
首先,告知浏览器您希望在任何第一方请求的 HTTP 响应标头中接收设备内存提示:
HTTP/1.1 200 OK
Content-Type: text/html
Accept-CH: Device-Memory
然后,您将开始在 HTTP 请求的请求标头中接收 Device-Memory
信息:
GET /main.js HTTP/1.1
Device-Memory: 0.5
您可以在后端使用此信息存储包含用户设备类别的 Cookie:
app.get('/route', (req, res) => {
// Determine device category
const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';
// Set cookie
res.setCookie('Device-Category', deviceCategory);
…
});
最后,创建您自己的逻辑来将此信息映射到设备类别,并在每种情况下显示相应的应用安装提示:
if (isDeviceMidOrLowEnd()) {
// show "Lite app" install banner or PWA A2HS prompt
} else {
// show "Core app" install banner
}
总结
在用户的主屏幕上显示图标是应用最具吸引力的功能之一。鉴于过去只有从应用商店安装的应用才能这样做,因此一些公司可能会认为,展示应用商店安装横幅就足以说服用户安装他们的应用。目前,有更多选项可供用户安装应用,包括在应用商店中提供轻量应用体验,以及通过提示用户直接从网站将 PWA 添加到主屏幕。