在 Android 應用程式中使用 PWA

漸進式網頁應用程式 (PWA) 是一種網頁應用程式,可運用類似應用程式的功能,打造快速、可靠且引人入勝的高品質體驗。

網路的觸及範圍極廣,可為使用者提供強大的功能,讓他們探索全新體驗。但使用者也習慣在作業系統商店中搜尋應用程式。在許多情況下,這些使用者已熟悉所尋找的品牌或服務,且有高度意願,因此會產生高於平均值的參與度指標。

Play 商店是 Android 應用程式商店,開發人員通常會想透過 Android 應用程式開啟漸進式網頁應用程式。

Trusted Web Activity 是開放標準,可讓瀏覽器提供完全相容於網頁平台的容器,在 Android 應用程式中轉譯 PWA。這項功能已在 Chrome 中推出,並在 Firefox Nightly 中進行開發。

您一向可以使用 Android WebView 等技術,或 Cordova 等架構,在 Android 應用程式中加入網頁體驗。

Android WebView 的限制是,它並非用來取代瀏覽器。Android WebView 是開發人員工具,可用於在 Android 應用程式中使用網頁 UI,但無法提供對現代網頁平台功能的完整存取權,例如聯絡人挑選器檔案系統

Cordova 旨在彌補 WebView 的缺點,但 API 則僅限於 Cordova 環境。也就是說,您需要維護額外的程式碼集,才能在開放網站上使用 Cordova API 的 Android 應用程式,而這與 PWA 是分開的。

此外,功能的探索性不一定能發揮預期的效用,Android 版本和原始設備製造商 (OEM) 之間的相容性問題也可能會造成問題。使用其中一種解決方案時,開發人員需要額外的品質管控程序,並為偵測和建立因應措施而額外支付開發成本。

受信任的網路活動是 Android 上網頁應用程式的新容器

開發人員現在可以使用信任的網路活動做為容器,將 PWA 納入 Android 應用程式的啟動活動。這項技術可利用瀏覽器以全螢幕模式轉譯 PWA,確保信任的網路活動與底層瀏覽器的網路平台功能和 API 相容。另外,您也可以使用開放原始碼公用程式,讓導入使用 Trusted Web Activity 的 Android 應用程式變得更簡單。

容器與瀏覽器共用儲存空間,這是其他解決方案所沒有的另一項優勢。登入狀態和使用者偏好設定會在各項體驗中流暢共用。

瀏覽器相容性

這項功能自 Chrome 75 版起便已推出,Firefox 則在 Nightly 版本中實作這項功能。

品質標準

網頁開發人員如要在 Android 應用程式中加入網頁內容,應使用信任的網頁活動。

受信任網路活動中的網站內容必須符合 PWA 安裝標準。

此外,為了符合使用者對 Android 應用程式預期的行為,Chrome 86 引進了變更,如果無法處理下列情況,系統會視為當機:

  • 無法在應用程式啟動時驗證數位資產連結。
  • 無法針對離線網路資源要求傳回 HTTP 200。
  • 導覽要求傳回 HTTP 404 或 5xx 錯誤」

當可信任的網頁活動發生上述任一情況時,就會導致 Android 應用程式發生可見的當機情形。請參閱指南,瞭解如何在服務工作者中處理這些情況。

應用程式也必須符合其他 Android 專屬條件,例如政策遵循性

螢幕截圖:顯示 AirHorn 的 Lighthouse 分數,其中包含 PWA 徽章和 100 分的效能分數。
Lighthouse 中的 PWA 徽章會顯示 PWA 是否通過安裝條件。

工具

想要善用 Trusted Web Activity 的網頁開發人員,不必學習新技術或 API,即可將 PWA 轉換為 Android 應用程式。Bubblewrap 和 PWABuilder 會共同提供開發人員工具,形式包括程式庫、指令列介面 (CLI) 和圖形使用者介面 (GUI)。

氣泡紙

Bubblewrap 專案會以 NodeJS 程式庫和指令列介面 (CLI) 的形式產生 Android 應用程式。

如要啟動新專案,請執行該工具並傳遞 Web 資訊清單的網址:

npx @bubblewrap/cli init --manifest=https://pwa-directory.appspot.com/manifest.json

這項工具也可以建構專案,執行下列指令會輸出可上傳至 Play 商店的 Android 應用程式:

npx @bubblewrap/cli build

執行這項指令後,專案的根目錄中就會出現名為 app-release-signed.apk 的檔案。這是將上傳至 Play 商店的檔案。

PWABuilder

PWABuilder 可協助開發人員將現有網站轉換為漸進式網頁應用程式。它也整合了 Bubblewrap,提供圖形使用者介面,將 PWA 包裝成 Android 應用程式。PWABuilder 團隊已撰寫一篇精彩的網誌文章,說明如何使用這項工具產生 Android 應用程式。

驗證 Android 應用程式中 PWA 的擁有權

開發人員在建構出色的漸進式網頁應用程式後,不會希望其他開發人員未經過授權就使用該應用程式建構 Android 應用程式。為避免這種情況發生,Android 應用程式必須使用名為「Digital Asset Links」的工具,與漸進式網頁應用程式配對。

Bubblewrap 和 PWABuilder 會處理 Android 應用程式所需的設定,但仍有最後一個步驟,也就是將 assetlinks.json 檔案新增至 PWA。

如要產生這個檔案,開發人員需要使用用來簽署使用者下載的 APK 金鑰的 SHA-256 簽名。

您可以透過多種方式產生金鑰,而要找出簽署要提供給使用者的 APK 的金鑰,最簡單的方法就是從 Play 商店下載。

為避免向使用者顯示損毀的應用程式,請將應用程式部署至封閉的測試管道,並將其安裝到測試裝置中,然後使用 Peter 的 Asset Link Tool 為應用程式產生正確的 assetlinks.json 檔案。請在要驗證的網域中,透過 /.well-known/assetlinks.json 提供產生的 assetlinks.json 檔案。

後續步驟

漸進式網頁應用程式可提供優質的網頁體驗。當 Android 應用程式符合最低品質標準時,可透過受信任的網路活動,以全新方式提供高品質體驗。

如果您是漸進式網頁應用程式的新手,請參閱這篇指南,瞭解如何建構優質的 PWA。如果開發人員已擁有 PWA,請使用 Lighthouse 驗證是否符合品質標準。

接著,請使用 BubblewrapPWABuilder 產生 Android 應用程式,將應用程式上傳至 Play 商店的封閉測試管道,然後使用 Peter 的 Asset Link Tool 將應用程式與 PWA 配對。

最後,請將應用程式從封閉測試管道移至正式版!