过去，只有在平台专用应用的上下文中才能安装应用。如今，现代 Web 应用提供可安装的体验，其集成水平和可靠性与针对具体平台的应用实现相同水平的集成和可靠性。
您可以通过以下不同方式实现此目的：
拥有不同的分发渠道是覆盖大量用户的有效方式，但选择合适的策略来宣传 PWA 的安装可能并非易事。
本指南探讨了结合使用不同安装选项的最佳实践，以提高安装率并避免平台竞争和侵蚀。涵盖的安装服务包括通过浏览器和 App Store 安装的 PWA，以及平台专用应用。
为什么要使您的 Web 应用可安装？
已安装的渐进式 Web 应用会在独立窗口（而非浏览器标签页）中运行。它们可从用户的主屏幕、Dock、任务栏或任务栏中启动。用户可以在设备上搜索这些应用，并使用应用切换器在这些应用之间跳转，从而让这些应用看起来像是安装在设备上的一部分。
但是，同时提供可安装的 Web 应用和平台专用应用可能会让用户感到困惑。对于某些用户，平台专用应用可能是最佳选择，但对于其他用户，它们可能会存在一些缺点：
- 存储空间限制：安装新应用可能意味着删除其他应用，或者通过移除有价值的内容来清理空间。对于使用低端设备的用户来说，这尤其不利。
- 可用带宽：下载应用的过程既昂贵又缓慢，对于连接速度慢和流量套餐昂贵的用户来说更是如此。
- 阻碍：用户离开网站并前往商店下载应用，会给用户带来额外的不便，并导致用户可以直接在网站上执行操作。
- 更新周期：对平台专用应用进行更改可能需要接受应用审核流程，这可能会减慢更改和实验速度（例如 A/B 测试）。
在某些情况下，不愿意下载针对具体平台的应用的用户所占的比例可能很大，例如那些认为自己不会非常频繁使用应用或不值得花几兆字节的存储空间或数据的用户。您可以通过多种方式确定此细分受众群的规模，例如，使用分析设置来跟踪“仅限移动网站”用户所占的百分比。
如果此细分受众群体的规模相当可观，则表明您需要提供安装体验的替代方式。
通过浏览器提升 PWA 的安装
如果您有优质的 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，或者该平台专用应用提供了更完整的功能集，则可能需要推广平台专用应用。
- 轻量级应用：这些应用也可以使用平台专用代码构建，但通常使用网络技术构建，并打包到平台专用封装容器中。您也可以将完整 PWA 上传到商店。（本文的后面部分会对此进行介绍。）一些公司选择以“精简”体验的形式提供这些体验，另一些公司也已将其用于旗舰（核心）应用。
推广轻量级应用
根据 Google Play 研究，APK 的大小每增加 6 MB，安装转化率就会降低 1%。也就是说，10 MB 的应用的下载完成率可能比 100 MB 的应用高 30% 左右！
为了解决这个问题，一些公司正在利用 PWA，使用 Trusted Web Activity (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';`
使用客户端提示
您还可以通过客户端提示在 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 来将 PWA 添加到主屏幕。