快速入門指南

Peter Conn
Peter Conn

Trusted Web Activities 的設定程序可能有點困難,如果只想在畫面上顯示網站的話,更是如此。本指南將逐步引導您建立使用 Trusted Web Activities 的基本專案,並涵蓋所有必要知識。

完成本指南後,你將能:

  • 已使用 Bubblewrap 建構使用受信任的網路活動並通過驗證的應用程式。
  • 瞭解簽署金鑰的使用時機。
  • 能夠判斷建構 Android 應用程式時使用的簽名。
  • 瞭解如何建立基本的 Digital Asset Links 檔案。

你必須符合下列條件,才能按照本指南的說明操作:

  • 在開發電腦上安裝 Node.js 10 以上的版本。
  • 已連接 Android 手機或模擬器,且為開發程序做好準備 (使用實體手機時,請啟用 USB 偵錯功能)。
  • 在開發手機上支援「受信任網路活動」的瀏覽器。Chrome 72 以上版本支援 Chrome 72 以上版本。我們將於日後陸續支援其他瀏覽器。
  • 你要在「受信任網路活動」中查看的網站。

信任的網路活動可讓 Android 應用程式啟動全螢幕瀏覽器分頁,而不使用任何瀏覽器 UI。這項功能僅適用於您擁有的網站,而且您可以設定 Digital Asset Links 來證明這一點。我們稍後會進一步說明

啟動受信任的網路活動後,瀏覽器會檢查 Digital Asset Links 是否進行檢查,這稱為「驗證」。如果驗證失敗,瀏覽器會改回使用「自訂分頁」顯示您的網站。

安裝並設定 Bubblewrap

Bubblewrap 是一組適用於 Node.js 的程式庫和指令列工具 (CLI),可協助開發人員使用受信任的網路活動,在 Android 應用程式中產生、建構及執行漸進式網頁應用程式。

您可使用下列指令安裝 CLI:

npm i -g @bubblewrap/cli

設定環境

首次執行 Bubblewrap 時,系統會提供自動下載並安裝必要的外部依附元件。建議您允許該工具執行上述動作,因為此工具可保證依附元件設定正確。如要使用現有的 Java Development Kit (JDK) 或 Android 指令列工具安裝,請參閱 Bubblewrap 說明文件

初始化並建構專案

如要初始化納入 PWA 的 Android 專案,請執行 init 指令:

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

Bubblewrap 會讀取網路資訊清單,要求開發人員確認要在 Android 專案中使用的值,然後使用這些值產生專案。專案產生後,請執行下列指令產生 APK:

bubblewrap build

執行

建構步驟會輸出名為 app-release-signed.apk 的檔案。這個檔案可安裝在開發裝置上以便進行測試,或上傳至 Play 商店進行發布。

Bubblewrap 提供在本機裝置上安裝並測試應用程式的指令。在開發裝置連接至電腦的情況下執行:

bubblewrap install

或者,您也可以使用 ADB 工具。

adb install app-release-signed.apk

應用程式現在應會顯示在裝置啟動器中。開啟應用程式時,您會發現網站是以「自訂分頁」啟動,而非「受信任的網路活動」,這是因為我們尚未設定 Digital Asset Links 驗證,但首先...

圖形使用者介面 (GUI) 替代方案

PWA Builder 提供的 GUI 介面會使用 Bubblewrap 程式庫,用於產生受信任的網路活動專案。如要進一步瞭解如何使用 PWA Builder 建立可開啟 PWA 的 Android 應用程式,請參閱這篇網誌文章

簽署金鑰注意事項

Digital Asset Links 會考量 APK 簽署的金鑰,以及使用錯誤簽章的常見原因,是導致驗證失敗的常見原因。(請注意,失敗驗證表示您必須以「自訂分頁」的形式啟動網站,並在頁面頂端顯示瀏覽器使用者介面)。當 Bubblewrap 建構應用程式時,系統會在 init 步驟建立設有金鑰的 APK。不過,您在 Google Play 發布應用程式時,系統可能會根據您選擇的簽署金鑰處理方式,為您建立另一個金鑰。進一步瞭解簽署金鑰,以及金鑰與 Bubblewrap 和 Google Play 的關係

Digital Asset Links 本質上是指向您網站的檔案,以及指向您網站的部分中繼資料。

建立 assetlinks.json 檔案後,請將檔案上傳至您的網站 (相對於根層級 .well-known/assetlinks.json),以便瀏覽器正確驗證應用程式。請參閱 Digital Asset Links 相關章節,進一步瞭解 Digital Asset Links 與簽署金鑰之間的關係。

正在檢查瀏覽器

受信任的網路活動會嘗試遵循使用者瀏覽器的預設選項。 如果使用者的預設瀏覽器支援「Trusted Web Activities」,系統就會啟動該瀏覽器。因此,如果已安裝的瀏覽器支援「Trusted Web Activities」,系統就會選擇該活動。 最後,預設行為會改回「自訂分頁」模式。

這表示如果要對 Trusted Web Activities 執行偵錯,請確認您使用的是自己認為的瀏覽器。你可以使用下列指令來查看目前使用的瀏覽器:

> adb logcat -v brief | grep -e TWAProviderPicker
D/TWAProviderPicker(17168): Found TWA provider, finishing search: com.google.android.apps.chrome

後續步驟

希望您已按照本指南的指示,就能取得可正常運作的「受信任網路活動」,且能有足夠的知識,在驗證失敗時進行偵錯。如果沒有,請參閱更多網頁程式開發人員適用的 Android 概念,或是依據這些文件提交 GitHub 問題。

接下來,建議您從建立應用程式圖示著手。完成後,您可以考慮將應用程式部署至 Play 商店。