在 Android 應用程式中使用 PWA

在 Android 應用程式中啟動 PWA

漸進式網頁應用程式 (PWA) 是一種網頁應用程式,可利用類似應用程式的功能,建立快速、可靠且吸引人的優質體驗。

網路的觸及範圍極為廣泛,且提供強大的功能,方便使用者發掘新體驗。不過,使用者也會在作業系統商店中搜尋應用程式。這些使用者大多已熟悉他們要尋找的品牌或服務,且意圖明確,導致參與度指標高於平均參與度指標。

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

可信任網路活動是一項開放標準,可讓瀏覽器提供完全與網頁平台相容的容器,能夠在 Android 應用程式中轉譯 PWA。這項功能適用於 Chrome,以及 Firefox Nightly 的開發中。

現有解決方案受到限制

一直以來,只要使用 Android WebViewCordova 等架構,即可將網路體驗納入 Android 應用程式。

Android WebView 的這項限制不可用於取代瀏覽器。Android WebView 是一項開發人員工具,可用於在 Android 應用程式中使用網頁 UI,但無法提供聯絡人挑選器檔案系統等新式網路平台功能的完整存取權。

Cordova 旨在增強 WebView 的缺點,但 API 隨後僅限於 Cordova 環境。也就是說,除了在開放網路的 PWA 之外,您需要保留額外的程式碼集,才能針對 Android 應用程式使用 Cordova API。

此外,功能曝光度通常不一定如預期運作,Android 版本和原始設備製造商 (OEM) 之間的相容性問題也可能是問題。使用其中一個解決方案時,開發人員需要額外的品質查驗程序,並會產生額外的開發成本,以便偵測及建立解決方法。

「Trusted Web Activity」是 Android 上網頁應用程式的新容器

開發人員現在可以使用可信任網路活動做為容器,納入 PWA 做為 Android 應用程式的啟動活動。這項技術會運用瀏覽器以全螢幕顯示 PWA,確保可信任網路活動與基礎瀏覽器本身的 Web Platform 功能和 API 具備相同的相容性。此外,您也可以使用開放原始碼公用程式,更輕鬆地使用受信任的網路活動實作 Android 應用程式。

其他解決方案沒有的另一個優點是,容器與瀏覽器共用儲存空間。跨體驗流暢共用登入狀態和使用者偏好設定。

瀏覽器相容性

這項功能自 75 版起已在 Chrome 推出,而 Firefox 會在夜間版本導入這項功能。

品質標準

如要讓網頁程式開發人員將網路內容納入 Android 應用程式,應使用受信任的網路活動。

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

此外,為了符合使用者預期 Android 應用程式的行為,Chrome 86 推出了一項變更,在未處理下列情境的情況下,即視為當機:

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

「受信任網路活動」發生上述任一情況時,會導致 Android 應用程式發生明顯當機情形。請參閱指南,瞭解如何在服務工作站處理這些情境。

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

螢幕截圖顯示 AirHorn 的 Lighthouse 分數,加上 PWA 徽章和效能分數 100。
Lighthouse 中的 PWA 徽章會顯示 PWA 是否達到安裝條件。

工具

即使網頁開發人員想利用受信任網路活動,也不必學習新技術或 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,藉此提供 GUI 介面,以便將這些 PWA 納入 Android 應用程式中。PWABuilder 團隊撰寫了一篇精彩網誌文章,說明如何使用這項工具產生 Android 應用程式。

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

想要建構優質的漸進式網頁應用程式的開發人員,不希望其他開發人員在未經許可的情況下使用該應用程式建構 Android 應用程式。為了避免這種情況,Android 應用程式必須使用名為 Digital Asset Links 的工具與漸進式網頁應用程式配對。

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

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

金鑰產生方式有很多種。如要找出向使用者提供 APK 簽署的金鑰,最簡單的方法是從 Play 商店下載該金鑰。

為避免向使用者顯示故障的應用程式,請將應用程式部署至封閉的測試版本,將其安裝至測試裝置中,然後使用 Peter 的資產連結工具產生應用程式的正確 assetlinks.json 檔案。請在驗證的網域內,將產生的 assetlinks.json 檔案提供給 /.well-known/assetlinks.json

後續步驟

Progressive Web App 提供優質的網頁體驗。「信任的網路活動」是一種新方式,只要符合最低品質標準,就能在 Android 應用程式上開啟這些優質體驗。

如果您剛開始使用漸進式網頁應用程式,請參閱建構優質 PWA 的指南。若是已經安裝 PWA 的開發人員,請使用 Lighthouse 驗證其是否符合品質標準。

接著,使用 BubblewrapPWABuilder 產生 Android 應用程式,然後將應用程式上傳至 Play 商店的封閉測試管道,然後使用 Peter 的資產連結工具將該應用程式與 PWA 配對。

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