过去，应用安装仅在特定于平台的应用程序上下文中才有可能。如今，现代 Web 应用提供可安装的体验，这些体验提供与特定于平台的应用相同级别的集成和可靠性。
您可以通过不同的方式实现此目的
拥有不同的分发渠道是覆盖广泛用户的强大方式，但选择正确的策略来推广您的 PWA 安装可能具有挑战性。
本指南探讨了结合不同安装选项以提高安装率并避免平台竞争和蚕食的最佳实践。涵盖的安装产品包括从浏览器和应用商店安装的 PWA，以及特定于平台的应用。
为什么使您的 Web 应用可安装？
已安装的渐进式 Web 应用在独立窗口而不是浏览器标签页中运行。它们可以从用户的主屏幕、启动器、任务栏或程序坞启动。可以在设备上搜索它们，并使用应用切换器在它们之间跳转，使其感觉像是安装在设备上的一部分。
但是，同时拥有可安装的 Web 应用和特定于平台的应用可能会让用户感到困惑。对于某些用户来说，特定于平台的应用可能是最佳选择，但对于另一些用户来说，它们可能会带来一些缺点
- 存储限制：安装新应用可能意味着删除其他应用，或通过删除有价值的内容来清理空间。这对于低端设备上的用户尤其不利。
- 可用带宽：下载应用可能是一个成本高昂且缓慢的过程，对于连接速度慢且数据流量套餐昂贵的的用户来说更是如此。
- 摩擦：离开网站并转到商店下载应用会产生额外的摩擦，并延迟可能直接在 Web 中执行的用户操作。
- 更新周期：在特定于平台的应用中进行更改可能需要经过应用审核流程，这可能会减慢更改和实验（例如 A/B 测试）的速度。
在某些情况下，不会下载您的特定于平台的应用的用户百分比可能很大，例如：那些认为他们不会经常使用该应用，或者无法证明花费几兆字节的存储空间或数据是合理的。您可以通过多种方式确定此细分市场的大小，例如，通过使用分析设置来跟踪“仅移动 Web 用户”的百分比。
如果此细分市场的大小相当大，则表明您需要提供安装体验的其他方式。
通过浏览器推广 PWA 的安装
如果您拥有高质量的 PWA，那么推广其安装可能比推广特定于平台的应用更好。例如，如果特定于平台的应用缺少 PWA 提供的功能，或者如果它已经有一段时间没有更新。如果特定于平台的应用未针对更大的屏幕（例如 ChromeOS）进行优化，那么推广 PWA 的安装也可能会有所帮助。
对于某些应用，推动特定于平台的应用安装是商业模式的关键部分，在这种情况下，推广特定于平台的应用的安装在商业上是有意义的。但是，某些用户可能会更喜欢停留在 Web 上。如果可以识别出该细分市场，则可以仅向他们显示 PWA 提示（我们称之为“PWA 作为后备”）。
PWA 作为主要可安装体验
一旦 PWA 符合可安装性标准，大多数浏览器都会显示 PWA 可安装的指示。例如，桌面版 Chrome 在地址栏中显示一个可安装图标，而在移动设备上，它会显示一个迷你信息栏
虽然这对于某些体验可能已经足够，但如果您的目标是推动 PWA 的安装，我们强烈建议您监听BeforeInstallPromptEvent，并遵循推广 PWA 安装的模式。
防止您的 PWA 蚕食特定于平台的应用的安装率
在某些情况下，您可能会选择推广特定于平台的应用安装，而不是 PWA，但在这种情况下，我们仍然建议您提供一种机制，允许用户安装您的 PWA。这种后备选项使用户可以获得类似的已安装体验，即使他们无法或不想安装特定于平台的应用。
实施此策略的第一步是定义一个启发式方法，用于确定何时向用户显示 PWA 的安装推广。
例如：PWA 用户是指已看到特定于平台的应用安装提示但未安装特定于平台的应用的用户。他们至少返回站点五次，或者他们单击了应用横幅，但继续使用该网站。
然后，可以按以下方式实施启发式方法
- 显示特定于平台的应用安装横幅。
- 如果用户关闭横幅，请设置包含该信息的 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 在 Play 商店中使用Trusted Web Activities (TWA) 提供轻量级版本的应用。TWA 将您的 PWA 包装在一个类似 WebView 的组件中，生成的应用大小通常只有几兆字节。
Oyo 是印度最大的酒店公司之一，构建了其应用的精简版，并使用 TWA 在 Play 商店中提供。在撰写本文时，Oyo 应用仅为 850 KB，仅为其 Android 应用大小的 7%。安装后，它与他们的 Android 应用没有区别
Oyo 在商店中保留了旗舰版和“精简版”应用版本，为用户提供了选择。
提供轻量级 Web 体验
直观地看，低端设备上的用户可能比高端手机上的用户更倾向于下载轻量级版本的应用。因此，如果可以识别用户的设备，则可以优先显示轻量级应用安装横幅，而不是较重的特定于平台的应用版本。
在 Web 上，可以获取设备信号并将其大致映射到设备类别（例如，“高”、“中”或“低”）。您可以通过不同的方式获取此信息，可以使用 JavaScript API 或客户端提示。
使用 JavaScript
使用 JavaScript 属性，例如 navigator.hardwareConcurrency、navigator.deviceMemory 和 navigator.connection，您可以分别获取有关设备 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 添加到主屏幕。