1. 歡迎
在本實驗室中，您將使用已部署的現有漸進式網頁應用程式，並將其包裝成應用程式，在 Google Play 商店中發布。
課程內容
- 如何使用 Bubblewrap 將漸進式網頁應用程式封裝至 Google Play 商店
- 簽署金鑰的定義和使用方式
- 瞭解如何在 Google Play 開發人員管理中心建立新應用程式，並設定測試版本，以便在發布前測試應用程式
- 什麼是 Digital Asset Links，以及如何將其新增至 Web 應用程式
注意事項
- 什麼是漸進式網頁應用程式
- 如何使用指令列工具
- 基本的 Bash 殼層指令，或如何將這些指令轉換為所選殼層的指令
軟硬體需求
- 已在網路上發布的漸進式網頁應用程式，可供您進行變更
- 已安裝 Bubblewrap 指令列介面，且可供使用
- Google Play 開發人員帳戶
- 現有的簽署金鑰 (如果您已在 Google Play 上發布應用程式)
- 用於測試的 Android 或 ChromeOS 裝置
不符合退款資格的項目
2. 將 PWA 包裝成泡泡
Bubblewrap 是一種工具，只要執行幾個 CLI 指令，就能輕鬆將漸進式網頁應用程式包裝成 Android App Bundle。這項工具會產生 Android 專案，並以受信任的網路活動形式啟動 PWA。
首先，請為專案建立目錄，然後移至該目錄：
$ mkdir my-pwa && cd my-pwa
接著，執行 Bubblewrap 指令列工具，為要上傳至 Play 的 Android 應用程式套件產生設定和 Android 專案：
$ bubblewrap init --manifest=https://my-pwa.com/manifest.json
這裡會使用 PWA 的網頁應用程式資訊清單檔案位置，初始化 Bubblewrap。這會根據 Web 應用程式資訊清單產生預設設定，並啟動控制台精靈，讓您變更預設設定。按照精靈的指示，變更工具產生的任何值。
簽署金鑰
上傳應用程式套件時，Google Play 商店會要求使用憑證 (通常稱為簽署金鑰) 進行數位簽署。這是自行簽署的憑證，與透過 HTTPS 提供應用程式服務時使用的憑證不同。
建立應用程式時，Bubblewrap 會要求提供金鑰路徑。如果您使用現有的 Play 商店應用程式資訊，則必須新增該資訊所用金鑰的路徑。
如果您沒有現有的簽署金鑰，且要在 Play 商店建立新的商店資訊，可以使用 Bubblewrap 提供的預設值，讓系統為您建立新的金鑰：
Bubblewrap 輸出內容
初始化 Bubblewrap 專案並完成精靈後，系統會建立下列項目：
- twa-manifest.json：專案設定，反映在 Bubblewrap 精靈中選擇的值。您會想使用版本管控系統追蹤這個檔案，因為如有需要，這個檔案可用於重新產生整個 Bubblewrap 專案。
- Android 專案檔案 - 目錄中的其餘檔案是產生的 Android 專案。這個專案是 Bubblewrap 建構指令使用的來源。您也可以選擇使用版本控管系統追蹤這些檔案。
- (選用) 簽署金鑰 - 如果選擇讓 Bubblewrap 為您建立簽署金鑰，金鑰會輸出至精靈中說明的路徑。請務必將金鑰存放在安全的地方，並限制可存取金鑰的人數。這是用來證明 Play 商店中的應用程式來自您的憑證。
有了這些檔案，我們現在擁有建構 Android 應用程式套件所需的一切。
建構 Android App Bundle
在您執行 Bubblewrap 初始化指令的相同目錄中，執行下列指令 (您需要簽署金鑰的密碼)：
$ bubblewrap build
建構指令會產生兩個重要檔案：
- app-release-bundle.aab：PWA 的 Android App Bundle。這個檔案會上傳至 Google Play 商店。
- app-release-signed.apk：Android 封裝格式，可使用
bubblewrap install指令將應用程式直接安裝至開發裝置。
3. 試試看 - Bubblewrap
現在輪到您了！運用上一個步驟學到的知識，嘗試完成下列事項：
- 建立目錄，存放產生的 Android 專案。
- 使用 Bubblewrap 和 PWA 的網頁應用程式資訊清單初始化該目錄。
- 產生新的簽署金鑰，或重複使用現有金鑰 (如有)。
- 從產生的 Android 專案建構 Android App Bundle。
4. 將應用程式加入 Google Play 商店
現在您已取得 PWA 的 Android 應用程式套件，可以上傳至 Google Play 商店！註冊開發人員帳戶後，即可前往 Play 管理中心登入並開始使用。
建立應用程式
登入後，畫面上會顯示所有應用程式。頁面頂端附近有個「建立應用程式」按鈕，點選後會顯示下圖畫面，引導您建立新的 Android 應用程式資訊。
您需要填寫多個欄位，包括應用程式名稱、預設語言、是應用程式還是遊戲、免費或付費，以及多項聲明。您必須同意聲明才能建立應用程式，因此請務必先詳閱並瞭解聲明內容，再表示同意。
填妥所有資訊並點選表單底部的「建立應用程式」按鈕後，系統會將您帶往新應用程式的資訊主頁。在資訊主頁中，您會看到工作檢查清單，列出設定、開始測試及發布應用程式時需要完成的工作。
設定內部測試
內部測試是個好方法，可讓您快速向選定的信任測試人員發布應用程式，不必經過審查。查看「立即開始測試」核對清單中的工作，然後選取「選取測試人員」。
按一下該工作，即可前往「內部測試」頁面。您可以在這裡管理應用程式的測試設定。如要再次前往這個頁面，請開啟側欄的「發布」選單，然後點選「測試」部分。首先，請建立測試人員的電子郵件名單，以便測試應用程式。如要建立名單，請按一下頁面「測試人員」部分中的「建立電子郵件名單」連結。系統會開啟彈出式視窗，讓您建立電子郵件清單。
在這個彈出式視窗中，您可以為電子郵件名單命名，並手動輸入電子郵件地址，或上傳要使用的電子郵件地址 CSV 檔。完成後，按下「儲存變更」按鈕。您隨時可以返回已建立的電子郵件清單，視需要新增或移除電子郵件地址。新增測試人員後，即可建立測試版本。按一下頁面頂端的「建立新版本」按鈕。
建立測試版本
按一下「建立新版本」按鈕後，系統會提示您完成多個部分。第一個是「應用程式完整性」，您可以在這裡選擇應用程式簽署金鑰的管理方式。預設選項是讓 Google 管理簽署金鑰，這是建議選項，因為這樣既安全，萬一您遺失上傳金鑰，應用程式也能復原。
Play 應用程式簽署
上傳及完成應用程式
選擇簽署金鑰的管理方式後，系統會要求您將應用程式套件上傳至版本。如要這麼做，請將 Bubblewrap 產生的 app-release-bundle.aab 檔案拖曳至表單。如要完成發布，請填寫其餘發布詳細資料，然後依序點選「儲存」、「檢查發布內容」和「開始向內部測試群組推出」按鈕，開始發布。這樣一來，內部測試人員就能使用您的應用程式！返回「內部測試」頁面的「測試人員」分頁，複製連結並分享給測試人員，讓他們存取您的應用程式。
5. 立即試用 - 建立應用程式
現在輪到您了！運用上一個步驟學到的知識，嘗試完成下列事項：
- 在 Play 管理中心為 PWA 建立新應用程式。
- 為應用程式設定內部測試，並將自己新增為測試人員。
- 上傳應用程式套件，並為應用程式建立測試版本。
- 在 Android 或 ChromeOS 裝置上，使用測試連結從 Play 商店安裝應用程式！
6. Digital Asset Links
如果您已在 Play 中測試 PWA，可能會發現 PWA 並非以全螢幕模式執行。這是因為您尚未透過 Digital Asset Links 檔案驗證網站擁有權。雖然 Bubblewrap 可以設定及建構 Android 應用程式套件，但您必須更新網頁應用程式，才能完成連結。
取得應用程式的 SHA-256 指紋
如要設定 PWA 的數位資產連結，您需要用於簽署使用者手機上接收套件的憑證 SHA-256 指紋。
使用 Play 應用程式簽署功能
如果您在建立版本時為應用程式設定 Play 應用程式簽署 (先前建議的做法)，可以在 Play 管理中心找到 SHA-256 指紋。請注意，這個憑證與上傳應用程式時使用的憑證不同。如要取得指紋，請在 Play 管理中心的應用程式中，依序前往「發布」->「設定」->「應用程式完整性」。「應用程式簽署金鑰憑證」下方會顯示多個選項。複製 SHA-256 憑證指紋的值。
不使用 Play 應用程式簽署
如果您選擇停用 Play 應用程式簽署功能，用來簽署最終應用程式的金鑰，會與您用來將應用程式上傳至 Play 管理中心的金鑰相同。您可以使用 Java 的 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 金鑰的十六進位值。
建立 Digital Asset Links 檔案
Bubblewrap 可以管理您擷取的簽章指紋，並為您產生正確的 Digital Asset Links 檔案。如要使用 Bubblewrap 新增指紋，請在「使用 Bubblewrap 包裝 PWA」期間建立的相同目錄中執行下列指令，並將 <fingerprint> 換成上一步複製的指紋。
$ bubblewrap fingerprint add <fingerprint>
這個指令會將指紋新增至應用程式的指紋清單，並產生 assetlinks.json 檔案。將這個檔案上傳至 PWA 的相同來源中的 .well-known 目錄。
7. 立即試用 - Digital Asset Links
現在輪到您了！運用上一個步驟學到的知識，嘗試完成下列事項：
- 找出應用程式的 SHA-256 指紋。
- 為應用程式產生 Digital Asset Links 檔案。
- 將 Digital Asset Links 檔案上傳至 PWA。
- 使用 API 和測試應用程式，確認 Digital Asset Links 檔案設定正確。
8. 測驗你的知識
完成前，請先回答下列問題，驗收學習成果。請勿偷看答案！
Sally 使用 Bubblewrap 產生 Android 專案後，會將產生的 ______ 檔案提交至版本管控系統，以便隨時重建專案。
Jack 希望 QA 團隊測試他的 PWA Android 應用程式。他將 Android App Bundle ______ 到內部測試群組。
Oogie Boogie 的 PWA Android 應用程式並非以全螢幕模式執行。如要修正這個問題，他們會取得「______」的 SHA-256 憑證指紋，並上傳至與 PWA 位於相同來源的 Digital Asset Links 檔案 (位於「______」)。
9. 測驗你的知識 - 答案
「測驗你的知識」問題的答案！
- Sally 使用 Bubblewrap 產生 Android 專案後，會將產生的 ______ 檔案提交至版本管控系統，以便隨時重建專案。
- 答案：twa-manifest.json
- 章節：使用 Bubblewrap 包裝 PWA
- Jack 希望 QA 團隊測試他的 PWA Android 應用程式。他將 Android App Bundle ______ 到內部測試群組。
- 答案：簽署及上傳
- 章節：將應用程式新增至 Google Play 商店
- Oogie Boogie 的 PWA Android 應用程式並非以全螢幕模式執行。如要修正這個問題，他們會取得「______」的 SHA-256 憑證指紋，並上傳至與 PWA 位於相同來源的 Digital Asset Links 檔案 (位於「______」)。
- 答案：簽署金鑰、/.well-known/assetlinks.json
- 專區：Digital Asset Links
10. 恭喜！
恭喜！您已學會如何將 PWA 新增至 Google Play 商店！
準備好後，請嘗試自行完成下列步驟：
- 建立應用程式的正式版
- 進一步瞭解更多應用程式發布選項，包括僅限 ChromeOS 的版本，以及包含行動裝置適用的 Android 應用程式和 ChromeOS 適用的 PWA。
- 瞭解如何為應用程式設定 Play 結帳服務，並在 PWA 中和在後端導入這項服務。
祝您編寫程式一切順利！