如何在 Google Play 商店发布 PWA

如果您从事 Web 开发，您可能听说过渐进式 Web 应用 (PWA)这个术语。它已经流行了一段时间，绝对不再是新鲜事物。事实上，许多大型出版物和网站都已经实现了 PWA 所需的功能。这篇博文的目的并非让您熟悉 PWA 或向您推销它，而是想在深入探讨如何在 Google Play 商店上发布这样的应用之前，至少用一段话来解释一下我们讨论的核心概念。

如果您熟悉 PWAs 或不关心“为什么”，请直接跳到在 Google Play 上发布 PWA。

如果您只想查看最终结果 - Google Play 中的 fpvtips。基于 PWA，网址为 - www.fpvtips.com

渐进式 Web 应用

拥有 PWA 有什么好处？有很多。包括提升网站整体性能、在用户离线时提供内容、通过 HTTPS 保护内容、在多种设备上安装应用的能力（包括最近支持的桌面安装）。

简而言之，PWA 必须包含一个清单文件和一个 Service Worker（以及许多其他内容，完整清单请见此处）。清单文件（称为manifest.webmanifest）描述了许多应用细节，例如不同的徽标资源、主题颜色、背景颜色、应用名称等。您可以点击此处了解更多关于清单文件的信息。

以下是我的 PWA 的清单文件 - www.fpvtips.com

{
  "name": "fpvtips.com",
  "short_name": "FPVtips",
  "start_url": "/",
  "background_color": "#ffffff",
  "theme_color": "#1960a0",
  "display": "minimal-ui",
  "icons": [
    {
      "src": "icons/icon-48x48.png?v=3b3221797eeeddae218baf403c63f18d",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "icons/icon-72x72.png?v=3b3221797eeeddae218baf403c63f18d",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "icons/icon-96x96.png?v=3b3221797eeeddae218baf403c63f18d",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "icons/icon-144x144.png?v=3b3221797eeeddae218baf403c63f18d",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "icons/icon-192x192.png?v=3b3221797eeeddae218baf403c63f18d",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icons/icon-256x256.png?v=3b3221797eeeddae218baf403c63f18d",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "icons/icon-384x384.png?v=3b3221797eeeddae218baf403c63f18d",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "icons/icon-512x512.png?v=3b3221797eeeddae218baf403c63f18d",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Service Worker 本质上是一些脚本，用于支持离线网页体验。如果用户在没有网络连接的情况下尝试访问你应用的某个路由，通常会遇到问题，无法获取任何内容。Service Worker 的作用是，它们会在用户首次访问时自行安装，并在后续访问时，通过在请求到达网络之前拦截请求，自行提供内容。我这里说的有点过于简单了，其实有很多策略可以应用。总的来说，至少对我来说，Service Worker 很快就会变得非常复杂。我想我只是个普通的开发者，而不是一个忍者/摇滚明星开发者😉。你可以在 Google 开发者基础网站上了解更多关于 Service Worker 的信息。

幸运的是，有一个项目可以帮你更轻松地设置 Service Worker，比自己从头编写整个功能要容易得多。如果你想采用这种方法，可以看看Workbox 。

更幸运的是，许多现代 Web 框架都支持创建 PWA，因此您无需手动操作。这真是太棒了！React 领域有一些项目，例如Gatsby和Create React App（仅举几例），它们让您可以轻松启动并运行全新的 PWA。如果我没记错的话，Vue CLI 工具也允许您轻松创建 PWA。

好了，接下来我要开始介绍我的项目了，也算是对 PWA 的简单介绍。我正在运行一个使用Gatsby构建的 PWA 项目www.fpvtips.com。我的项目源代码已开源，请访问https://github.com/jumpalottahigh/fpvtips。

我非常喜欢用 Gatsby 构建应用，因为它让我能够使用 React 和 GraphQL，部署性能至上的体验，轻松创建 PWA，而且用它构建应用本身就是一种乐趣。你可以在这里了解更多关于我为什么喜欢 JAMstack、Gatsby 和 Netlify 的原因。

好了，你按照上面的步骤操作，已经用 Gatsby 搭建好了基本的 PWA 设置。你运行了：

npx gatsby new my-pwa

然后，你gatsby-config.js通过取消注释启用了离线插件。没错，这真的就这么简单💜。运行gatsby build并拖放名为 Netlify 的输出文件夹public，几秒钟内就能在互联网上高效地启动并运行，这真是加分项。太疯狂了吧？都2019年了，都说 Web 开发难啊。

现在开始说正事。一段时间以来，你可以将网站打包到 Web 视图中，然后将该混合应用部署到 Google Play 商店。但是，如果用户没有网络连接，你就没那么幸运了。现在，有一个更好的方法，不需要任何 Web 视图上的花招。这就是可信 Web 活动 (TWA)。我不会深入探讨细节，如果你想了解更多，可以自行阅读。

可以这么说，我偶然发现了Sven Budak 的这篇文章和Fireship.io 的这段视频，其中详细介绍了如何使用 TWA 设置 PWA 以发布到 Google Play。

但是在我们深入了解我按照 Sven 在他的文章中概述的方法设置的经验（以及从那时起我必须添加的一些更改）之前，请注意，有一种更简单的方法可以通过使用名为pwa2apk的服务来完成此操作。

让我们将 PWA 发送到 Google Play

首先，获取一份Android Studio的副本并将其与要下载的任何软件包一起安装到您的计算机上。
向Google 支付 25 美元，即可获得被称为 Google Android 开发人员的权利:)。
克隆这个代码库 - https://github.com/GoogleChromeLabs/svgomg-twa。这才是真正的亮点。这个样板文件已经完全设置好了，所以除了修改一些字符串之外，我们什么都不用做。
在 Android Studio 中打开该项目，找到文件app/src/build.gradle并根据您的项目编辑以下内容：

def twaManifest = [
    applicationId: 'com.fpvtips',
    hostName: 'fpvtips.com', // The domain being opened in the TWA.
    launchUrl: '/', // The start path for the TWA. Must be relative to the domain.
    name: 'FPVTIPS', // The name shown on the Android Launcher.
    themeColor: '#1960a0', // The color used for the status bar.
    backgroundColor: '#ffffff', // The color used for the splash screen background.
    enableNotifications: false // Set to true to enable notification delegation
]

5.创建一个签名的构建 apk。

第一次您必须创建一个新的密钥库。

填写所有详细信息并记住密码，我们稍后会需要它。

在终端中运行此命令：

keytool -list -v -keystore PATH_TO_YOUR_KEYSTORE -alias KEYSTORE_ALIAS -storepass YOUR_PASSWORD -keypass YOUR_PASSWORD

对我来说，此时出现了一些问题。如果您收到一条消息keytool is not recognized，则可能需要将 Java 添加到路径中；或者，如果您比较懒（像我一样），可以直接从 Java 安装目录的 bin 目录中调用 keytool；或者，也可以切换到 Java 安装目录下的 /bin/ 目录，然后从那里运行它。

这就是我运行命令的方式（我只是删除了密码，但你明白我的意思）：

cd C:/Program\ Files/Java/jre1.8.0_211/bin/
 ./keytool -list -v -keystore D:/Program\ Files/Android/Android\ Studio/fpvtips-keystore -alias key0 -storepass MY_PASSWORD -keypass MY_PASSWORD

如果一切顺利，您将获得一个SHA256文件，您需要将其复制以进行下一步。复制时，请注意字符串前面的空格。

6. 前往Google Digital Asset Links，使用其声明列表生成器和测试器工具。填写信息。粘贴SHA256，然后点击Generate Statement。复制输出的 JSON 文件。

7. 在站点根目录下创建一个名为的文件.well-known，文件名为assetlinks.json。将上一步中的 JSON 粘贴到该文件中。发布此文件使其生效。对于 Gatsby，您需要在目录下创建目录和文件名static。在生产环境中，这些内容会被复制到站点根目录。

/app/release/app-release.apk8.再次构建一个签名的 apk 并找到或类似位置下的文件。

9.通过控制台在 Google Play中创建一个新应用。

App releases10.通过转到并将 APK 拖放到放置区来上传 APK文件。

11.填写所有必需信息并等待审核。

从“应用发布”选项卡开始，你最终可以发布应用的测试版或正式版。我直接选择了正式版。无论如何，你都需要填写一堆信息，虽然实际花费的时间比你最初想象的要少，但还是有点麻烦。

一个很好的指标是灰色复选标记图标，当您完成某个部分后，它会变成绿色。

如果您已完成所有操作，在某些情况下，您可能需要等待几分钟（对我来说不到一个小时）进行审核，然后您的应用才会在 Google Play 商店中上线。

如果您需要快速生成大量图片（您确实需要），可以依赖这款出色的工具——Android Asset Studio。如果您想解决 Google Play 控制台中关于资源优化的警告，请创建一个新的构建版本，但选择 App Bundle 而不是 APK。这样就能创建一个优化的软件包。

就这样 :) 恭喜！你成功将 PWA 推送到 Google Play 商店！太棒了！如果你想联系我，请在Twitter或Github上关注我。

文章来源：https://dev.to/jumpalottahigh/how-to-publish-a-pwa-on-the-google-play-store-2bid