过去，只有在特定于平台的应用中才能安装应用。如今，现代 Web 应用可提供可安装的体验，其集成能力和可靠性与平台专用应用相同。
您可以通过不同的方式实现这一目标：
使用不同的分发渠道是覆盖大量用户的有效方法，但选择合适的策略来推广 PWA 安装可能并非易事。
本指南探讨了组合使用不同安装方式的最佳实践，以提高安装率并避免平台竞争和侵蚀效应。涵盖的安装服务包括通过浏览器和 App Store 安装的 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，或平台专用应用提供了更完整的功能集，那么您可能需要宣传您的平台专用应用。
- 轻量级应用：这些应用也可以使用平台专用代码进行构建，但它们通常使用网络技术构建，并打包在平台专用封装容器中。完整的 PWA 也可以上传到商店。（本文稍后会对此进行讨论。）一些公司选择以“精简”体验的形式提供这些功能，还有一些公司也在其旗舰（核心）应用中采用这种方法。
推广轻量级应用
根据 Google Play 研究，APK 大小每增加 6 MB，安装转化率就会降低 1%。也就是说，与大小为 100 MB 的应用相比，大小为 10 MB 的应用的下载完成率要高出大约 30%！
为了解决这个问题，一些公司正在使用其 PWA 使用 Trusted Web Activity (TWA) 在 Play 商店中提供轻量级应用版本。TWA 会将您的 PWA 像组件一样封装在 WebView 中，生成的应用大小通常只有几兆字节。
Oyo 是印度最大的酒店公司之一，他们开发了精简版应用，并使用 TWA 在 Play 商店上架。在撰写本文时，Oyo 应用只有 850 KB，只有其 Android 应用大小的 7%。而且，Oyo 安装完毕后，便会与 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 添加到主屏幕。