[譯] 如何在 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