設定 Trusted Web Activities 可能很困難,尤其是當您只想顯示網站時。本指南說明如何建立使用 Trusted Web Activities 的小型專案。
完成本指南後,您將:
- 已使用 Bubblewrap 建構應用程式,該應用程式使用受信任的網路活動並通過驗證。
- 瞭解簽署金鑰的使用時機。
- 能夠判斷 Android 應用程式的建構簽章。
- 瞭解如何建立基本的 Digital Asset Links 檔案。
如要按照本指南操作,您需要:
- Node.js 10 以上版本。
- 已連線並設定為開發用途的 Android 手機或模擬器。 啟用 USB 偵錯功能 (如果使用實體手機)。
- 支援受信任的網路活動的行動瀏覽器。
- 您想在受信任的網路活動中查看的網站。
您可以在 Android 應用程式中使用「受信任的網路活動」,啟動全螢幕瀏覽器分頁,且不會顯示任何瀏覽器 UI。這項功能僅限您擁有的網站使用。設定 Digital Asset Links 即可證明擁有權。
啟動「受信任的網路活動」時,瀏覽器會驗證數位資產連結。如果驗證失敗,瀏覽器會改為以自訂分頁顯示網站。
安裝及設定 Bubblewrap
Bubblewrap 是一組程式庫和 Node.js 的指令列工具 (CLI),可協助開發人員使用「受信任的網路活動」,在 Android 應用程式中產生、建構及執行漸進式網頁應用程式。
執行下列指令來安裝 CLI:
npm i -g @bubblewrap/cli
設定環境
首次執行 Bubblewrap 時,系統會詢問是否要自動下載及安裝必要外部依附元件。建議您允許自動下載,確保依附元件設定正確無誤。如要使用現有的 Java Development Kit (JDK) 或 Android 指令列工具安裝,請參閱 Bubblewrap 說明文件。
初始化及建構專案
初始化封裝 PWA 的 Android 專案:
bubblewrap init --manifest=https://my-twa.com/manifest.json
Bubblewrap 會讀取 Web 應用程式資訊清單,要求開發人員確認要在 Android 專案中使用的值,然後使用這些值產生專案。
專案產生後,請執行下列指令來產生 APK:
bubblewrap build
執行
建構步驟會輸出名為 app-release-signed.apk 的檔案。這個檔案可安裝在開發裝置上進行測試,或上傳至 Play 商店發布。
Bubblewrap 提供指令,可在本機裝置上安裝及測試應用程式。將開發裝置連線至電腦,然後執行下列指令:
bubblewrap install
或者,您也可以使用 adb 工具。
adb install app-release-signed.apk
應用程式現在應該會顯示在裝置啟動器中。
開啟應用程式時,您會發現網站是以自訂分頁啟動,而非以受信任的網路活動啟動。這是因為我們尚未設定 Digital Asset Links 驗證。
Bubblewrap 的圖形使用者介面 (GUI) 替代方案
PWA Builder 提供 GUI 介面,可使用 Bubblewrap 程式庫產生受信任的網路活動專案。如需相關操作說明,請參閱這篇文章,瞭解如何使用 PWA Builder 建立可開啟 PWA 的 Android 應用程式。
簽署金鑰
Digital Asset Links 會考量 APK 的簽署金鑰,因此驗證失敗的常見原因就是使用錯誤的簽章。(請注意,如果驗證失敗,系統會以自訂分頁的形式啟動網站,且網頁頂端會顯示瀏覽器 UI)。Bubblewrap 建構應用程式時,會使用 init 步驟中設定的金鑰建立 APK。不過,在 Google Play 發布應用程式時,系統可能會為您建立其他金鑰,具體情況取決於您選擇如何處理簽署金鑰。進一步瞭解簽署金鑰,以及簽署金鑰與 Bubblewrap 和 Google Play 的關係。
設定資產連結檔案
Digital Asset Links 基本上是由網站上指向應用程式的檔案,以及應用程式中指向網站的一些中繼資料所組成。
建立 assetlinks.json 檔案後,請將檔案上傳至網站 (.well-known/assetlinks.json 相對於根目錄),讓瀏覽器正確驗證應用程式。如要進一步瞭解數位資產連結與簽署金鑰的關係,請參閱這篇深入探討數位資產連結的文章。
檢查瀏覽器
受信任的網路活動會盡量遵守使用者預設的瀏覽器選擇。如果使用者的預設瀏覽器支援 Trusted Web Activities,系統就會啟動該瀏覽器。 如果沒有,系統會選擇任何支援 Trusted Web Activities 的已安裝瀏覽器。 最後,預設行為是改回 Custom Tabs 模式。
也就是說,如果您要偵錯與信任的網路活動相關的項目,請務必使用您認為的瀏覽器。您可以使用下列指令檢查使用的瀏覽器:
> adb logcat -v brief | grep -e TWAProviderPicker
D/TWAProviderPicker(17168): Found TWA provider, finishing search: com.google.android.apps.chrome
後續步驟
希望您已按照本指南操作,順利建立可用的信任的網頁活動,並具備足夠的知識,在驗證失敗時進行偵錯。如果不是,請參閱更多適用於網頁開發人員的 Android 概念。
接下來,請為應用程式建立圖示。完成後,您就可以考慮將應用程式部署至 Play 商店。