将 PWA 发布到主要应用商店：原因和方法

从 Google Play 商店开始，一个又一个的应用程序市场加入了欢迎渐进式 Web 应用程序（什么是渐进式 Web 应用程序？）进入他们的商店的潮流，使其成为软件交付的新方法。 考虑到这一切，如果不利用这种新发现的技术来更好地扩展您的应用程序的范围，那将是一种浪费。

为了让您更清楚地了解整个 Progressive Web App 运动，特别是发布过程，今天我们将回顾主要应用市场中 PWA 的当前状态，以及如何将 PWA 发布到上述商店。

为什么要将 Progressive Web App 发布到主要应用商店？

过去，渐进式 Web 应用程序仅限于 Web 安装（添加到主屏幕）。 然而，随着时间的推移，谷歌和微软等应用市场开始认识到 PWA 的潜力，并采取措施推动未来采用这项技术。

如果你有能力和资金，我们的专业意见是你应该去做——让你的 PWA 全平台化。 毕竟，Twitter、Uber 和 Spotify 等大品牌都加入了这一行列，并取得了骄人的成绩，证明这项技术确实不只是营销，值得考虑。 微软自己甚至更进一步，计划将渐进式 Web 应用程序作为 Windows 的主要体验。

 推荐阅读：渐进式 Web 应用程序的 12 个最佳示例。

如何将您的 PWA 发布到主要应用商店

谷歌游戏商店

作为 PWA 运动的先行者，看到 Google Play 商店张开双臂支持 Progressive Web Apps 也就不足为奇了。 有了TWA （受信任的 Web 活动），整个发布序列变得更加容易，应该很快就会结束。

要求

• 已安装 Android Studio
• 一个谷歌开发者账户
• 一个工作且经过质量检查的渐进式 Web 应用程序。

第 1 步：克隆 TWA Starter Android App 并修改

• 使用以下命令克隆svgomg-twa项目：

 git 克隆 https://github.com/GoogleChromeLabs/svgomg-twa.git

• 使用File > New > Import Project将项目导入 Android Studio。

在/app/build.gradle中，根据您的目的修改twaManifest 。 可以在 build.gradle 文件中找到有关更改内容和更改方式的详细信息。

注意： applicationId应该遵循<com>.<your-brand>.<your-app>的格式

修改后，您的/app/build.gradle应如下所示：

 def twaManifest = [
    applicationId: 'com.simicart.app',
    hostName: 'simicart.com', // 在 TWA 中打开的域。
    launchUrl: '/', // TWA 的起始路径。 必须与域相关。
    name: 'SimiCart PWA', // Android 启动器上显示的名称。
    themeColor: '#ED8A19', // 用于状态栏的颜色。
    navigationColor: '#303F9F', // 用于导航栏的颜色。
    backgroundColor: '#bababa', // 用于启动画面背景的颜色。
    enableNotifications: false, // 设置为 true 以启用通知委托。
    // 在此处为您的应用添加快捷方式。 每个快捷方式都必须包含以下字段：
    // - 名称：将显示在快捷方式中的字符串。
    // - short_name: 如果 |name| 使用较短的字符串太长。
    // - url：启动应用程序的 URL 的绝对路径（例如“/create”）。
    // - 图标：可绘制文件夹中用作图标的资源的名称。
    快捷键：[
        name: '打开 SimiCart', 
        short_name: '打开', 
        网址：'/打开'， 
        图标：“飞溅”
    ]
,
    // 移除闪屏时要播放的淡出动画的持续时间（以毫秒为单位）。
    splashScreenFadeOutDuration: 300
]

第 2 步：创建密钥库并验证 APK

验证您的 APK 需要密钥存储或上传密钥。 要创建密钥库，请启动Android Studio并导航至Build → Generate Signed Bundle/APK并填写必填字段。

创建密钥库后，您需要使用以下命令从中提取SHA256指纹：

 keytool -list -v -keystore ~/dlbr-keystore.jks -alias twa -storepass •••••• -keypass •••••• 

 条目类型：PrivateKeyEntry
...
证书指纹：
         沙1：...
         SHA256：2A：9B：A8：64：32：0A：69：99 ...：？ 复制这一行

第 3 步：配置数字资产链接

需要数字资产链接来验证您的 Web 内容的所有权，该链接稍后可用于链接到您的 APK。

生成语句文件

使用您之前提取的SHA256指纹，并使用 Statement List Generator 和 Tester 生成一个语句文件。

生成报表文件后，下一步是创建一个可公开访问的文件，其中包含来自数字资产工具的信息。 该文件应放置在您的网络主机中，并位于以下位置：

 .well-known/assetlinks.json

此文件的位置取决于您的 Web 应用程序的构建过程，但通常它应该位于已部署的目录上，即“public”或“dist”目录。

一切完成后，下一步也是最后一步是部署您的应用程序。

第 4 步：在 Google Play 上构建和发布您的应用

使用默认设置的 Google Play 控制台，转到所有应用程序 → 创建应用程序。

创建内部测试

导航到应用发布 → 内部测试跟踪 → 创建发布以创建应用的内部测试跟踪。

构建签名的 APK

在 Android Studio 中，导航到Build → Generate Signed Bundle/APK并使用我们之前提取的SHA256密钥存储。 请确保选中两个签名版本框。

上传 APK

您现在处于此过程的末尾。 要上传您的 apk，只需前往 Google Play 商店、 App Releases → Internal Test Track → Edit Release 。

不要忘记填写商品详情

必须先填写所有必填字段，然后才能将您的应用列入审核流程。 这些字段是重要信息所必需的，例如定价详细信息、商品详情、内容评级等。此过程完成后，您应该会看到四个绿色复选标记️，表示所有必填字段均已填写。

就是这样。 您的 PWA 现在已准备好进行审核，并将在几个小时内可供公开下载。

苹果应用商店

在所有主要的应用程序市场中，Apple App Store 可能只是对 PWA 最不欢迎甚至敌视的一个，考虑到史蒂夫乔布斯是第一个设想未来充满渐进式 Web 应用程序的人，这有点讽刺。

完整的 Safari 引擎位于 iPhone 内部。 因此，您可以编写令人惊叹的 Web 2.0 和 Ajax 应用程序，它们的外观和行为都与 iPhone 上的应用程序完全相同。 而且这些应用程序可以与 iPhone 服务完美集成。 他们可以拨打电话、发送电子邮件、在 Google 地图上查找位置。

史蒂夫·乔布斯，2007

在 iOS 中，PWA 在功能方面受到严重限制。 不支持推送通知，仅部分支持 Web 应用程序清单，并且 New App Gallery 等新功能通常完全忽略 PWA。 正因为如此，根据 Apple 的 App Store Review Guidelines，Apple App Store 不欢迎 PWA 才有意义：

您的应用程序应包含功能、内容和 UI，使其超越重新打包的网站。 如果您的应用程序不是特别有用、独特或“类似应用程序”，则它不属于 App Store。

最低功能，App Store 审核指南

由于 Apple 竭尽全力削弱 PWA 的所有功能，因此任何发布 PWA 的努力——即使使用像 Cordova 这样的原生应用程序包装器——都是徒劳的。 目前，我们只能希望未来的 iOS 版本能够为 PWA 带来更好的支持，但截至目前，将 PWA 发布到 Apple App Store 是不可能的，这就是为什么如果你的大多数目标受众应该考虑使用原生应用程序的方法。使用基于 iOS 的设备。

 阅读更多：iOS 14 Beta 上的 PWA：细微变化

微软商店

正如我们在 Windows 10 和 PWA：软件交付的未来一文中所述，微软已经为渐进式 Web 应用商店奠定了相当长的一段时间，并且正在逐步成为现实。 来自更受欢迎品牌的 PWA 已经遍布整个应用市场，并为其他人效仿提供了不亚于示范性的结果。

与谷歌一样，微软也欢迎PWA，此外——他们甚至计划用混合应用来普及和取代原生 UWP 应用——一种封装在原生 shell 中的渐进式 Web 应用。

从理论上讲，将 Progressive Web App 发布到 Microsoft Store 根本不需要你付出任何努力，因为它最初计划是一个使用 Bing 作为高质量 PWA 的爬行机制的自动过程。 但是，整个事情仍处于试验阶段，并没有像计划的那样有效，这就是为什么您需要手动提交您的 PWA作为 Windows 应用程序包(.appx)。 但别担心，这个过程并不像某个应用商店那样令人伤脑筋。

要求

• Windows 开发人员中心帐户
• PWA 构建器
• 符合商店政策的工作且经过质量检查的渐进式 Web 应用程序

第 1 步：为您的应用保留名称

在 Microsoft Store 中发布应用的第一步是保留名称。 如果你想知道如果一个疯狂的小伙子决定保留所有存在的名字会发生什么：别担心，名字保留将在 3 个月后过期。

填写必填字段并将其记在某处，因为稍后将需要此信息。

第 2 步：使用 PWABuilder 生成 AppX

如上所述，PWABuilder 是生成可在主要应用市场上发布的功能包的好方法。 它是市场上最早由 Microsoft 开发的工具之一，专门用于推动 PWA 的采用。

生成清单

在 PWABuilder 上，输入您的 PWA 的 URL，然后单击Get started 。 请注意，此步骤至关重要，因为它会自动识别和/或填充manifest.json中缺少的信息，而并非专门为 Microsoft Store 构建的 PWA 通常需要这些信息。

 推荐阅读：PWA Manifest：以简单的方式创建您的 Web 应用程序清单

下一步是为你的 PWA 构建服务工作者，但假设你的应用程序是一个典型的渐进式 Web 应用程序，其中服务工作者已经集成，这一步将被跳过，我们将继续进行最后一步——获取你的 .appx 包。

生成 AppX

单击生成 AppX 后，您应该会看到类似这样的弹出窗口：

这是早期信息可以派上用场的地方。 填写这些字段，将显示一个包含 .appx 包的下载框。 下载它，您现在就可以将 PWA 发布到 Microsoft Store。

如果您想在将 PWA 发布到商店之前对其进行测试，则始终可以选择通过启用开发人员模式来对其进行 Windows 测试→右键单击test_install.ps1 →使用 PowerShell 运行。 这样做会自动将您的 PWA 添加到您的桌面和“开始”菜单，从中可以启动和测试它以查看一切是否正常。

第 3 步：将您的应用包提交到 Microsoft Store

要将 PWA 发布到 Microsoft Store，你需要导航到之前下载的 .zip 中的包文件夹。 此文件夹中包含您需要发布到 Microsoft Store 的所有内容。 为澄清起见，此文件夹不包含您的任何代码，因为它仅用作您在网络上的 PWA 和其他不相关的商店元数据的定向机制。

找到 windows.appx 后，前往开发中心的提交页面并填写所需信息：

完成所有步骤并填写所有必填字段后，“提交到商店”按钮应亮起，表示您的 PWA 现在已准备好进行审核过程。 这个过程需要一个小时到几天才能完成； 一旦结束，您的 PWA 将获得认证并可供公共/私人下载（取决于您在开发中心的可用性设置）。

结论

毕竟，也许您仍然想知道为什么要构建一个渐进式 Web 应用程序 - 更不用说通过所有这些麻烦来发布一个。 你问这些基本问题是对的。

Progressive Web App 一步一步证明自己是软件交付的未来，也是 Web 技术演进的下一个自然步骤。 到目前为止，它已经在电子商务世界的任何地方广泛使用，其中跨所有设备的统一和引人入胜的体验是高转化率的关键。

作为一项新技术，按原样构建一个 Progressive Web App 已经足够困难了。 使用 SimiCart，您不再需要担心Magento PWA的开发阶段，因为我们提供了市场上完整且最具成本效益的解决方案。