过去，只有在平台专用应用的环境中才能安装应用。如今，现代 Web 应用提供了可安装的体验，其集成水平和可靠性与针对具体平台的应用实现同等水平的集成和可靠性。
您可以通过不同的方式实现此目标：
通过不同的分发渠道，您可以有效覆盖大量用户，但要选择合适的策略来推广 PWA 的安装却并非易事。
本指南探讨了组合使用不同安装选项的最佳实践，以提高安装率并避免平台竞争和侵蚀。涵盖的安装服务包括通过浏览器和 App Store 安装的 PWA，以及平台专用应用。
为什么要使 Web 应用可安装？
已安装的 Progressive Web App 会在独立的窗口（而不是浏览器标签页）中运行。它们可从用户的主屏幕、Dock、任务栏或任务栏中启动。您可以在设备上搜索这些应用，并通过应用切换器在它们之间切换，让它们就像是所安装设备的一部分。
但是同时拥有可安装的 Web 应用和针对具体平台的应用可能会让用户感到困惑。对于一些用户来说，特定于平台的应用可能是最佳选择，但对于其他用户来说，它们可能存在一些缺点：
- 存储空间限制：安装新应用可能意味着删除其他应用，或通过移除有价值的内容来清理空间。这对于使用低端设备的用户而言尤其不利。
- 可用带宽：下载应用的过程既昂贵又缓慢，对于连接速度慢和流量套餐昂贵的用户来说更是如此。
- 阻碍：用户离开网站并前往商店下载应用，会给用户带来额外的不便，并导致用户可以直接在网站上执行操作。
- 更新周期：对平台专用应用进行更改可能需要接受应用审核流程，这可能会减慢更改和实验速度（例如 A/B 测试）。
在某些情况下，不愿意下载针对具体平台的应用的用户所占的比例可能很大，例如那些认为自己不会非常频繁使用应用或不值得花几兆字节的存储空间或数据的用户。您可以通过多种方式确定此细分受众群的规模，例如使用分析设置跟踪“仅移动网站”的百分比用户。
如果此细分受众群的规模相当庞大，则充分表明您需要提供其他方式来添加用户体验。
通过浏览器提升 PWA 的安装
如果您有优质的 PWA，最好优先推广其安装，而不是您针对具体平台的应用。例如，平台专用应用缺少 PWA 提供的功能，或者有一段时间未更新。如果特定平台的应用未针对大屏幕（例如 ChromeOS）进行优化，这也有助于促进 PWA 的安装。
对于某些应用，提升平台专用应用的安装量是业务模式的一个关键部分，在这种情况下，提升平台专用应用的安装量就很有意义。但是，某些用户可能更喜欢上网。如果可以识别该细分，则 PWA 提示就只能向这些用户显示（我们称之为“作为后备的 PWA”）。
将 PWA 作为主要的可安装体验
当 PWA 符合可安装性条件后，大多数浏览器就会显示相应指示，表明 PWA 可以安装。例如，桌面版 Chrome 在地址栏中显示可安装图标，而在移动设备上，则显示迷你信息栏：
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">虽然这对某些体验来说可能已经足够，但如果您的目标是推动 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 构建了其应用的精简版，并使用 TWA 在 Play 商店中提供该应用。在撰写本文时，Oyo 应用的大小仅为 850 KB，仅有其 Android 应用大小的 7%。安装之后，便无法与 Android 应用区分开来：
<ph type="x-smartling-placeholder">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 添加到主屏幕。