[译] 如何在 Google Play 应用商店中发布 PWA

时间  2019-11-17 标签 如何 google play 应用 商店 发布 pwa

PWA（Progressive Web Apps，渐进式网络应用）已经面世了有一段时间了。然而，每当我向客户介绍 PWA 时，他们都会问一样的问题：“个人客户能从应用商店下载安装这种 PWA 吗？” 之前的答案是不能，但自从 Chrome 72 发布以后答案就不同了，由于该版本增长了一种叫作 TWA（Trusted Web Activities，受信式网络应用）的新功能。javascript

TWA 使用一种全新的方式来集成你的 Web 应用内容（好比 PWA）到 Android 应用，它使用了一种基于 Custom Tabs 的协议。css

在本文中，我会借助 Netguru 现有的 PWA（Wordguru）来逐步说明如何使 PWA 支持直接从 Google Play 应用商店安装。html

对 Android 开发者来讲，某些咱们将要说起的内容可能听起来很傻，但本文是从前端开发者的角度来写的，特别是没有用过 Android Studio 或者作过 Android 应用的前端开发者。同时要注意，咱们在本文中探讨的不少概念都仅支持 Chrome 72 及以上版本，所以颇有实验性、很超前。前端

步骤一：配置一个 TWA 项目

配置 TWA 并不须要写 Java 代码，但你须要安装 Android Studio（译者注：原文给出的 Android Studio 连接打不开，可访问 developer.android.google.cn/studio）。若是你以前开发过 iOS 或 Mac 软件，那你会感受到 Android Studio 很是像 Xcode，它提供了良好的开发环境，旨在简化 Android 开发过程。那么，快去安装吧，我们稍后再见。java

在 Android Studio 中新建一个 TWA 项目

把 Android Studio 安装稳当了吗？嗯……我也听不到你的回答，就当你已经装好了吧。打开 Android Studio，点击 “开始一个新的 Android Studio 项目（Start a new Android Studio project）”。在这里，咱们选择 “不添加 Activity（Add No Activity）” 选项，以便咱们手动配置项目。android

尽管配置过程至关直观，但仍是要明白下面这些概念：ios

  • 名称（Name）：应用的名称（我敢打赌你确定知道这个）。
  • 包名称（Package name）：Android 应用在 Play 应用商店的惟一标识。这个包名称必须是独一无二的，所以我建议你用 PWA 的 URL 的倒序字符串（如 com.netguru.wordguru）。
  • 保存位置（Save location）：项目在本地的保存位置。
  • 语言（Language）：容许你选择一门特定的编程语言，但由于咱们用到的应用已是写好的了，因此此项不用设置。保留默认选项 —— Java —— 就好。
  • 最低 API 版本（Minimum API level）：这是咱们用到的 Android API 版本，支持库（后面会说到）须要该配置项。咱们选择 API 19 版本。

在这些选项下面还有几个复选框。它们与本次实践无关，因此让它们保持未选中状态，而后点击 “完成（Finish）”。git

添加 TWA 支持库

TWA 不能没有支持库。好在咱们仅需修改两个文件就好了，而且这两个文件都在同一个项目文件夹中：Gradle Scripts。它们俩的文件名都是 build.gradle，但咱们能够经过圆括号中的描述文字区分两者。github

在此我要介绍一款 Android 应用专用的 Git 包管理工具，叫作 JitPack。它功能很强大，而最基本的功能就是可让应用的发布变得垂手可得。虽然它是付费服务，但若是这是你首次在 Google Play 应用商店发布应用，我得说这笔开销物有所值。web

笔者提示：这里不是给 JitPack 打广告。之因此值得一提，是由于本文是写给不熟悉 Android 应用开发或者没有在 Google Play 应用商店发布过应用的人看的，本文读者使用它来管理一个与应用商店直连的 Android 应用代码库会很轻松。言外之意，这个工具并不是开发必需品。

打开 JitPack 后，就能够把本身的项目接入了。打开刚才看到的 build.gradle (Project: Wordguru) 文件，作以下修改以便让 JitPack 管理应用代码库。

allprojects {
  repositories {
    ...
    maven { url 'https://jitpack.io' }
    ...
  }
}
复制代码

如今打开另外一个 build.gradle 文件。咱们可在此文件中添加项目所需的依赖包，固然咱们确实要添加一个：

// build.gradle (模块：app)

dependencies {
  ...
  implementation 'com.github.GoogleChrome:custom-tabs-client:a0f7418972'
  ...
}
复制代码

TWA 使用 Java 8 的功能，所以咱们要启用 Java 8。咱们要在刚才的文件中添加 compileOptions 字段：

// build.gradle (模块：app)

android {
  ...
  compileOptions {
    sourceCompatibility JavaVersion.VERSION_1_8
    targetCompatibility JavaVersion.VERSION_1_8
  }
  ...
}
复制代码

还要添加 manifestPlaceholders 这一组变量，咱们在下一小节再细说它们。就目前而言，权且先把下列代码加上，用来定义应用的托管域名、默认 URL 和应用名称：

// build.gradle (模块：app)

android {
  ...
  defaultConfig {
    ...
    manifestPlaceholders = [
      hostName: "wordguru.netguru.com",
      defaultUrl: "https://wordguru.netguru.com",
      launcherName: "Wordguru"
    ]
    ...
  }
  ...
}
复制代码

在 Android 应用配置清单（Manifest）中提供应用细节

每一个 Android 应用都有一个 Android 应用说明（Android App Manifest），它提供了应用的基本细节，例如操做系统支持、包信息、设备兼容性以及其余诸多信息，这些信息有助于 Google Play 应用商店显示该应用的运行条件。

这里咱们真正关心的是 Activity（<activity>）。Activity 被用于实现用户界面，表明的正是 “TWA” 中的 “A”。

有趣的是，咱们在 Android Studio 中配置项目时，却选择了 “不添加 Activity（Add No Activity）” 选项，那是由于咱们的应用说明是空的，只包含应用标签。

先打开 manifest 文件。咱们要把已有的 package 值换成本身的应用 ID，并把 label 值换成对应的 launcherName 变量 —— 上个小节中咱们在 manifestPlaceholders 变量组中定义过。

接着，咱们要真正给 TWA 添加 Activity 组件了，即在 <application> 标签中添加一个 <activity> 标签。

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.netguru.wordguru"> // 重点

  <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="${launcherName}" // 重点 android:supportsRtl="true" android:theme="@style/AppTheme">

    <activity android:name="android.support.customtabs.trusted.LauncherActivity" android:label="${launcherName}"> // 重点

      <meta-data android:name="android.support.customtabs.trusted.DEFAULT_URL" android:value="${defaultUrl}" /> // 重点

      
      <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>

      
      <intent-filter android:autoVerify="true">
        <action android:name="android.intent.action.VIEW"/>
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE"/>
        <data android:scheme="https" android:host="${hostName}"/> // 重点
      </intent-filter>
    </activity>
  </application>
</manifest>
复制代码

到这里，乡亲们，我们就完成第一步了。接着走第二步。

步骤二：验证网站与应用之间的关系

TWA 须要把 Android 应用和 PWA 联结起来。所以咱们要用到数字资产连接（Digital Asset Links）。

该链接的两端都必须设置，TWA 是应用端，而 PWA 是网站端。

咱们得再次修改 manifestPlaceholders，才能创建链接。这回，咱们要添加一个额外的元素，叫作 assetStatements，它记录着 PWA 的相关信息。

// build.gradle (模块：app)

android {
  ...
  defaultConfig {
    ...
    manifestPlaceholders = [
      ...
      assetStatements: '[{ "relation": ["delegate_permission/common.handle_all_urls"], ' +
        '"target": {"namespace": "web", "site": "https://wordguru.netguru.com"}}]'
      ...
    ]
    ...
  }
  ...
}
复制代码

此时咱们要新增一个 meta-data 标签到 application 中。此标签告知 Android 应用，咱们想要与 manifestPlaceholders 中指定的应用创建链接。

<manifest
  xmlns:android="http://schemas.android.com/apk/res/android"
  package="${packageId}">

  <application> ... <meta-data android:name="asset_statements" android:value="${assetStatements}" /> ... </application> </manifest>
复制代码

这就好了！咱们已经创建了应用到网站的链接关系。如今进入从网站到应用的联结过程。

要想创建反方向的链接关系，咱们得建立一个 .json 文件，该文件的路径为应用的 /.well-known/assetlinks.json。该文件可用 Android Studio 内置的生成器生成。你看，我没骗你吧，Android Studio 能简化开发过程！

生成此文件须要设置 3 个值：

  • 托管网站域名（Hosting site domain）：这是 PWA 的 URL（如 https://wordguru.netguru.com/）。
  • 应用包名称（App package name）：这是 TWA 的包名称（如 com.netguru.wordguru）。
  • 应用包密钥（App package fingerprint）（SHA256）：这是一个惟一的加密哈希值，基于 Google Play 应用商店的密钥库生成。

咱们已经有了前两个值。而最后一个值，要借助 Android Studio 生成。

先要生成带签名的 APK。在 Android Studio 中找到：构建（Build） → 生成带签名的包或 APK（Generate Signed Bundle or APK） → APK：

接下来，若是你已经有了密钥库，就使用已有的；若是没有，那就点击 “新建（Create new）…” 建立一个。

接着就把表单填完。务必记住这些凭证，它们是你的应用的签名，可以确认你对应用的拥有权。

上述操做会建立一个密钥库文件，该文件被用来生成应用包密钥（SHA256）。此文件及其重要，由于它能证实你拥有此应用。若是此文件丢失，你将再也没法在应用商店更新对应的应用。

接着咱们来选包（bundle）的类型。这里要选 “release”，由于它能够为咱们生成一个生产环境的应用。咱们还须要检查签名版本。

这步操做将生成 APK 文件，稍后会把它发布在 Google Play 应用商店里。建立密钥库后，就要用它生成所需的应用包密钥（SHA256 格式）。

再回到 Android Studio，找到工具（Tools） → 应用连接助手（App Links Assistant）。来到第 3 步，“发起网站链接（Declare Website Association）”，填写所需信息：Site domain 和 Application ID。以后，选择上一步生成的密钥库文件。

表单填写完毕后，点击 “生成数字资产连接文件（Generate Digital Asset Links file）”，就会生成 assetlinks.json 文件。若是你打开该文件，你会看到这样的内容：

[{
  "relation": ["delegate_permission/common.handle_all_urls"],
  "target": {
    "namespace": "android_app",
    "package_name": "com.netguru.wordguru",
    "sha256_cert_fingerprints": ["8A:F4:....:29:28"]
  }
}]
复制代码

这正是咱们须要在应用的 /.well-known/assetlinks.json 路径下使用的文件。我就不讲解怎么在该路径下使用该文件了，由于这因项目而异，超出本文讨论范畴。

咱们能够点击 “链接并验证（Link and Verify）” 按钮来测试链接关系。若是一切顺利，你就能看到 “成功（Success）！” 这样的确认信息。

666！咱们成功地在 Android 应用和 PWA 之间创建了双向链接关系。完成了这一步，前途就一片光明了。

步骤三：上传必需物料（assets）

Google Play 应用商店须要一些物料来确保应用可以详尽展现。具体来讲，咱们须要：

  • 应用图标（App Icons）：咱们须要各类尺寸的图标，包括 48 x 4八、72 x 7二、96 x 9六、144 x 144 和 192 x 192 等等。或者咱们可使用 适应性 icon。
  • 高清图标（High-res Icon）：这是一个尺寸为 512 x 512 的 PNG 图片，在应用商店里处处都会用到它。
  • 功能图（Feature Graphic）：这是一个尺寸为 1024 x 500 的 JPG 图片或者 24 位的 PNG（无 alpha 通道）图片，应用商店用来展现应用的具体功能。
  • 截屏（Screenshots）：Google Play 应用商店会用这些截屏图片来展现应用的不一样界面，以便用户在下载前查看。

作完这些工做，咱们就能够进入 Google Play 应用商店的开发者控制台发布应用啦！

步骤四：光荣发布！

让咱们临门一脚，上传应用到应用商店吧。

咱们须要在 Google Play 控制台 中，把以前生成的 APK 文件（在 AndroidStudioProjects 目录下）上传。上传过程恕不赘述，由于引导程序很清晰明了，会一步一步地指导咱们完成发布过程。

应用的审查和核准可能须要几个小时，核准后就会陈列在应用商店中了。

若是你找不到 APK 文件了，你能够再新建一个：构建（Build） → 生成带签名的包或 APK（Generate signed bundle / APK） → 构建 APK（Build APK）、传入已经生成的密钥库文件、填写生成密钥库时用的别名和密码便可。生成 APK 文件后，你会看到一个提示窗口，点击其中的 “文件位置（Locate）” 连接，就能直达文件目录。

恭喜恭喜，你的应用在 Google Play 应用商店发布啦！

成功！咱们成功地把 PWA 发布到 Google Play 应用商店了。这个过程没有咱们想得那么难，但仍是付出了一些努力的，相信我，当你看见你本身作的应用跻身于大千世界中，你会获得极大的知足感。

有必要指出，这项功能还是很是超前的，我暂时把它看做是实验性功能。我不推荐你如今就用这项功能发布产品，由于它仅支持于 Chrome 72 及以上版本 —— 低于 Chrome 72 的版本中，也能安装 TWA，但应用会当即崩溃，这可不是什么最佳用户体验。

并且，官方发布的 custom-tabs-client 目前还不支持 TWA。若是你好奇为什么咱们不用官方库版本，反而用 GitHub 的原生连接，喏，这就是缘由。

若是发现译文存在错误或其余须要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。

联系我们 沪ICP备13005482号-10