將漸進式網頁應用程式新增至 Google Play

將漸進式網頁應用程式新增至 Google Play

程式碼研究室簡介

subject上次更新時間:11月 10, 2021
account_circle作者:Google 員工

1. 歡迎參加本課程

在這個研究室中,您會使用現有的已部署漸進式網頁應用程式,並將該應用程式包裝至應用程式中,再透過 Google Play 商店發布。

課程內容

  • 如何使用 Bubblewrap 針對 Google Play 商店建立漸進式網頁應用程式
  • 簽署金鑰的定義和使用方式
  • 如何在 Google Play 中建立新的應用程式,以及如何設定測試版本,以便在發布前測試應用程式
  • 什麼是數位資產連結,以及如何將這些連結加入你的 WebView

注意事項

軟硬體需求

  • 這個漸進式網頁應用程式已在網際網路上發布,您可以修改下列內容:
  • 已安裝 Bubblewrap 指令列介面並可供使用
  • Google Play 開發人員帳戶
  • 現有的簽署金鑰 (如果您已在 Google Play 中推出應用程式)
  • 要測試的 Android 或 Chrome 作業系統裝置

無法涵蓋的項目

  • 將 PWA 設為僅限 Android 或 Chrome 作業系統裝置使用
  • 同一應用程式中為 Chrome 作業系統部署 PWA,以及行動裝置專用的 Android 應用程式。
  • 如何在 PWA 中遵守 Google Play 付款政策

2. 您的 PWA 簡介

Bubblewrap 能讓您將漸進式網路應用程式納入 Android App Bundle,就像執行幾項 CLI 指令一樣。方法很簡單,只要產生一個 Android 專案,即可透過信任的網路活動啟動 PWA。

若要開始使用,請為專案建立目錄,並將該目錄加入其中:

$ mkdir my-pwa && cd my-pwa

接著,執行 Bubblewrap 指令列工具,為要上傳到 Play 的 Android App Bundle 產生設定和 Android 專案:

$ bubblewrap init --manifest=https://my-pwa.com/manifest.json

Bubblewrap 會在初始化 PWA 與 Web App Manifest 檔案的位置進行初始化。這項操作會從「網頁應用程式資訊清單」產生預設設定,並啟動控制台精靈,讓您變更預設設定。按照精靈變更工具產生的任何值。

Bubblewrap CLI 精靈顯示來自 Airairner 的初始化作業,網域已覆寫 example.com,並覆寫起始網址。

簽署金鑰

Google Play 商店要求應用程式套件在上傳時須使用憑證數位簽署 (通常稱為簽署金鑰)。這是自行簽署的憑證,與透過 HTTPS 提供應用程式的憑證不同

Bubblewrap 會在建立應用程式時要求您提供金鑰的路徑。若您現有的應用程式資訊已用於應用程式,那麼您必須將該路徑加入該清單所使用的金鑰。

Bubblewrap CLI 精靈會詢問使用者現有簽署金鑰的位置和名稱。

如果您沒有 Play 簽署金鑰,且正在 Play 商店建立新商店資訊,您可以使用 Bubblewrap 提供的預設值,讓該金鑰為您建立新的金鑰:

Bubblewrap CLI 精靈會詢問使用者是否想要建立新的簽署金鑰。

輸出氣泡輸出

初始化 Bubblewrap 專案並完成精靈後,系統會建立下列項目:

  • twa-manifest.json:專案設定,反映 Bubblewrap 精靈選擇的值。建議您使用版本控制系統追蹤這個檔案,因為必要時可以再產生整個 Bubblewrap 專案。
  • Android 專案檔案 - 目錄中的其餘檔案是系統產生的 Android 專案。這項專案是 Bubblewrap 建構指令的來源。您也可以選擇使用版本控制系統追蹤這些檔案。
  • (選擇性) 簽署金鑰 - 如果您選擇由 Bubblewrap 為您建立簽署金鑰,金鑰就會輸出至精靈中說明的位置。請務必將金鑰存放在安全的地方,並限制可存取該金鑰的使用者人數;這是使用金鑰證明 Play 商店上的應用程式是由您提供。

現在有了這些檔案,我們就能建立 Android App Bundle 所需的一切功能。

打造 Android App Bundle

在執行 Bubblewrap's 初始化指令的同一個目錄中,執行下列指令 (您必須要有簽署金鑰的密碼):

$ bubblewrap build

Bubblewrap CLI 輸出內容,用於建立專案、要求簽署金鑰的密碼,以及顯示不同版本的 Android 應用程式。

建構指令會產生兩個重要檔案:

  • app-release-bundle.aab - 您的 PWA's Android App Bundle。這就是您要上傳到 Google Play 商店的檔案。
  • app-release-Signed.apk - 一種 Android 封裝格式,可使用 bubblewrap install 指令將應用程式直接安裝至開發裝置。

3. 馬上試試 - Bubblewrap

現在輪到你了!請使用先前步驟所學,嘗試完成下列事項:

  1. 建立目錄以存放您產生的 Android 專案。
  2. 使用 Bubblewrap 和 PWA 的 Web Manifest 來初始化該目錄。
  3. 產生新的簽署金鑰,或使用現有的金鑰 (如有)。
  4. 使用產生的 Android 專案建立 Android App Bundle。

4. 將應用程式加入 Google Play

您的 PWA 現已推出 Android App Bundle,現在可以將該檔案上傳到 Google Play 商店了!註冊開發人員帳戶後,您可以前往 Play 管理中心登入並開始設定。

建立應用程式

登入後,您就會看到一個畫面,其中會列出您的所有應用程式。畫面頂端會顯示「建立應用程式」按鈕。只要點選該按鈕,畫面就會顯示以下畫面,引導您建立新的 Android 應用程式資訊。

畫面上顯示 Play 管理中心的「建立應用程式」表單。

這裡有眾多欄位可供填寫,包括應用程式名稱、預設語言、應用程式/遊戲、免費或付費應用程式,以及多種聲明內容。您必須同意這些聲明,才能建立應用程式。因此,請務必先詳閱這些說明並予以瞭解,再同意這些聲明。

填妥所有資訊,然後按一下表單底部的 [建立應用程式] 按鈕後,系統就會將您帶往新應用程式的資訊主頁。在資訊主頁中,您會看到設定、執行測試及發布應用程式所須完成的工作檢查清單。

設定內部測試

執行內部測試是將應用程式快速發布的絕佳方式,不必讓您選取的一群測試人員接受審查。查看「立即開始測試」檢查清單中的工作,然後選取 [選取測試人員]

立即開始測試檢查清單

按一下該工作,即可前往「內部測試」頁面。您可以在這裡管理應用程式的測試設定。如要開啟這項功能,請在側欄的「版本」選單底下開啟「測試」部分。首先,您必須建立測試人員的電子郵件名單來測試應用程式。如要這麼做,請在頁面的「測試人員」部分中點選 [建立電子郵件名單] 連結。這樣就會開啟彈出式視窗,供您建立電子郵件名單。

彈出式視窗顯示建立電子郵件名單的表單,其中包括清單名稱、電子郵件地址、上傳 CSV 檔案檔案的連結,以及顯示上傳電子郵件地址的區域。

在這個彈出式視窗中,您會為電子郵件名單命名,並且可以手動輸入電子郵件地址,也可以上傳 CSV 檔案來使用。完成後,請按一下 [儲存變更] 按鈕。您可以返回先前建立的電子郵件清單,視需要新增或移除電子郵件地址。新增測試人員後,您就可以開始建立測試版。按一下頁面頂端的 [建立新版本] 按鈕。

內部測試頁面,其中的箭頭指向 [建立新版本] 按鈕。

建立測試版

按一下 [建立新版本] 按鈕後,系統會要求您瀏覽幾個部分。第一種是「應用程式完整性」,可讓您選擇管理應用程式簽署金鑰的方式。預設選項是讓 Google 管理你的簽署金鑰。由於這是安全的上傳選項,因此即使遺失上傳金鑰,應用程式也能順利還原。

Play 應用程式簽署

流程圖:從左到右顯示開發人員及其上傳金鑰,接著簽署應用程式並傳送給 Google。接著,Google 會提供應用程式簽署金鑰,並使用該金鑰簽署應用程式,再將金鑰提供給使用者

上傳及敲定應用程式

選擇管理簽署金鑰的管理方式後,系統會要求您將應用程式套件上傳至版本。如要這麼做,請將 Bubblewrap 產生的 app-release-bundle.aab 檔案拖曳至表單中。如要完成發布,請填入其他版本詳細資訊,然後依序按一下 [儲存] > [檢查版本],最後再點選 [開始推出內部測試] 按鈕,開始發布版本。以便內部測試人員存取您的應用程式!返回「內部測試」頁面的「測試人員」分頁中,您可以複製連結並提供給測試人員,讓對方存取您的應用程式。

內部測試頁面,其中的箭頭指向複製連結連結,以便與測試人員分享測試連結。

5. 馬上試試 - 建立應用程式

現在輪到你了!請使用先前步驟所學,嘗試完成下列事項:

  1. 在 Play 管理中心為 PWA 建立新的應用程式。
  2. 為應用程式設定內部測試,並將自己新增為測試人員。
  3. 上傳應用程式套件,並為您的應用程式建立測試版。
  4. 使用測試連結在 Android 或 Chrome 作業系統裝置上安裝 Play 商店應用程式!

6. Digital Asset Links

如果你已在 Google Play 中測試 PWA,可能會發現該遊戲並未以全螢幕顯示。你尚未透過數位資產連結檔案驗證網站擁有權。雖然 Bubblewrap 可以設定及建立 Android 應用程式套件,但您必須更新網頁應用程式才能完成連結。

取得您應用程式的 SHA-256 指紋

如要設定 PWA 的數位資產連結,您需要用於簽署使用者在手機上接收的套件憑證,以取得憑證的 SHA-256 指紋。

使用 Play 應用程式簽署功能

如果您在建立版本時 (先前) 為應用程式設定了 Play 應用程式簽署功能,可以在 Play 管理中心找到 SHA-256 指紋。提醒您,這個憑證與用來上傳應用程式的憑證不同。如要取得指紋,請在 Play 管理中心的應用程式中前往「版本 - 設定應用程式」。「應用程式簽署金鑰憑證」底下會列出多個選項。複製 SHA-256 憑證指紋的值。

「應用程式完整性」畫面,畫面中以方框特別標出 SHA-256 憑證指紋。

不使用 Play 應用程式簽署功能

如果您選擇停用 Play 應用程式簽署功能,用於簽署最終應用程式的金鑰就會與您用來將應用程式上傳至 Play 管理中心的金鑰相同。您可以使用 Java's keytool 擷取指紋:

$ keytool -list -v \
   
-keystore <keystore-file-path> \
   
-alias <key-alias> \
   
-keypass <key-password> \
   
-storepass <store-password> | grep SHA256

$     SHA256
: BD:92:64:B0:1A:B9:08:08:FC:FE:7F:94:B2...

如要使用這個選項,您必須瞭解簽署金鑰的路徑和相關的密碼。複製 SHA256 金鑰的十六進位值。

Bubblewrap 可以管理您擷取的簽名指紋,並為您產生正確的 Digital Asset Links 檔案。如要使用 Bubblewrap 新增指紋,請在 Bubblewraping Your PWA 中建立的目錄內執行下列指令,並將 <fingerprint> 替換為您在前一個步驟中複製的指紋。

$ bubblewrap fingerprint add <fingerprint>

這個指令會將指紋新增至應用程式的指紋清單,並產生 assetlinks.json 檔案。將這個檔案上傳至 PWA 的「來源」中的 .well-known 目錄。

7. 馬上試試 - 數位資產連結

現在輪到你了!請使用先前步驟所學,嘗試完成下列事項:

  1. 找出應用程式的 SHA-256 指紋。
  2. 產生應用程式的 Digital Asset Links 檔案。
  3. 將 Digital Asset Links 檔案上傳到 PWA。
  4. 使用 API 和測試應用程式,確認已正確設定 Digital Asset Links 檔案。

8. 測驗您的瞭解程度

完成測驗前,請先測試自己的知識,看看您學到了哪些知識。千萬別停下腳步!

在使用 Bubblewrap 產生 Android 專案後,Sally 將產生的 ______ 檔案提交至其版本控制系統,如此一來,她就能隨時重建專案。

小傑想讓品質確保小組測試自己的 PWA Android 應用程式。他______將自己的 Android App Bundle 設為內部測試群組。

Oogie Boogie 的 PWA Android 應用程式無法以全螢幕執行。如要解決這個問題,對方會取得 ______ 的 SHA-256 憑證指紋,並上傳至 ______ 的「數位資產連結」檔案 (檔案來源為 ______)。

9. 測試自己的知識 - 解答

「測試你的知識」問題解答!

  1. 在使用 Bubblewrap 產生 Android 專案後,Sally 將產生的 ______ 檔案提交至其版本控制系統,如此一來,她就能隨時重建專案。
  2. 小傑想讓品質確保小組測試自己的 PWA Android 應用程式。他______將自己的 Android App Bundle 設為內部測試群組。
  3. Oogie Boogie 的 PWA Android 應用程式無法以全螢幕執行。如要解決這個問題,對方會取得 ______ 的 SHA-256 憑證指紋,並上傳至 ______ 的「數位資產連結」檔案 (檔案來源為 ______)。

10. 恭喜!

恭喜!你已成功學習如何將 PWA 新增到 Google Play 商店!

當您準備好自行操作時,請自行嘗試下列後續步驟:

祝您一切順利!