在 Android 應用程式中啟動 PWA
漸進式網頁應用程式 (PWA) 是一種網頁應用程式,可使用類似應用程式的功能,打造快速、可靠且引人入勝的高品質體驗。
網路的觸及範圍極廣,使用者可透過網路發掘新體驗。但使用者也習慣在作業系統商店中搜尋應用程式。這些使用者通常已熟悉所尋找的品牌或服務,且意圖明確,因此互動指標高於平均水準。
Play 商店是 Android 應用程式商店,開發人員通常會想從 Android 應用程式開啟漸進式網頁應用程式。
「受信任的網路活動」是開放標準,可讓瀏覽器提供完全相容於網頁平台的容器,在 Android 應用程式中算繪 PWA。這項功能已在 Chrome 中推出,Firefox Nightly 則正在開發中。
現有解決方案有限
一直以來,您都能在 Android 應用程式中加入網頁體驗,例如使用 Android WebView 等技術,或是 Cordova 等架構。
Android WebView 的限制在於,它並非用來取代瀏覽器。Android WebView 是開發人員工具,可在 Android 應用程式中使用網頁 UI,但無法完整存取現代網頁平台功能,例如聯絡人挑選器或檔案系統等。
Cordova 的設計目的是彌補 WebView 的不足,但 API 僅限於 Cordova 環境。也就是說,您需要維護額外的程式碼集,才能在 Android 應用程式中使用 Cordova API,與開放式網路上的 PWA 分開。
此外,功能探索通常無法正常運作,Android 版本和原始設備製造商之間的相容性問題也可能造成困擾。使用這些解決方案時,開發人員需要額外的品質保證程序,並產生額外的開發成本,才能偵測及建立解決方法。
受信任的網路活動是 Android 上的網路應用程式專用新容器
開發人員現在可以使用受信任的網路活動做為容器,將 PWA 納入 Android 應用程式的啟動活動。這項技術會利用瀏覽器以全螢幕模式算繪 PWA,確保受信任的網路活動與基礎瀏覽器支援的 Web Platform 功能和 API 相容。此外,還有開放原始碼公用程式,可讓您更輕鬆地使用受信任的網路活動實作 Android 應用程式。
其他解決方案無法提供的另一項優點是,容器會與瀏覽器共用儲存空間。登入狀態和使用者偏好設定會在不同體驗之間順暢共用。
瀏覽器相容性
Chrome 75 以上版本已支援這項功能,Firefox 則是在夜間版本中實作。
品質標準
網頁程式開發人員如要在 Android 應用程式中加入網路內容,應使用「受信任的網路活動」。
受信任的網路活動中的網頁內容必須符合 PWA 安裝資格條件。
此外,為配合使用者對 Android 應用程式的預期行為,Chrome 86 導入了變更,如果無法處理下列情況,系統會視為當機:
- 應用程式啟動時無法驗證數位資產連結。
- 離線網路資源要求未傳回 HTTP 200。
- 導覽要求傳回 HTTP 404 或 5xx 錯誤。
當受信任的網路活動發生上述任一情況時,就會導致 Android 應用程式發生使用者可見的當機情形。請參閱指南,瞭解如何在 Service Worker 中處理這些情境。
應用程式也必須符合 Android 專用的額外條件,例如政策規範。
工具
網頁開發人員如要使用受信任的網路活動,不必學習新技術或 API,就能將 PWA 轉換為 Android 應用程式。Bubblewrap 和 PWABuilder 共同提供開發人員工具,包括程式庫、指令列介面 (CLI) 和圖形使用者介面 (GUI)。
Bubblewrap
Bubblewrap 專案會以 NodeJS 程式庫和指令列介面 (CLI) 的形式產生 Android 應用程式。
如要啟動新專案,請執行工具並傳遞 Web Manifest 的網址:
npx @bubblewrap/cli init --manifest=https://pwa-directory.appspot.com/manifest.json
這項工具也能建構專案,執行下列指令會輸出 Android 應用程式,方便您上傳至 Play 商店:
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。
金鑰的產生方式有很多種,如要找出簽署提供給使用者 APK 的金鑰,最簡單的方法就是從 Play 商店下載 APK。
為避免向使用者顯示損壞的應用程式,請將應用程式部署至封閉測試管道,安裝至測試裝置,然後使用 Peter 的資產連結工具為應用程式產生正確的 assetlinks.json 檔案。在要驗證的網域中,於 /.well-known/assetlinks.json 提供產生的 assetlinks.json 檔案。
後續步驟
漸進式網頁應用程式可提供優質網頁體驗,受信任的網路活動是開啟這些高品質體驗的新方式,只要符合最低品質標準,就能從 Android 應用程式開啟。
如果您剛開始使用漸進式網頁應用程式,請參閱這份指南,瞭解如何建構優質的 PWA。如果開發人員已有 PWA,請使用 Lighthouse 驗證是否符合品質標準。
接著,使用 Bubblewrap 或 PWABuilder 產生 Android 應用程式,將應用程式上傳至 Play 商店的封閉測試管道,並使用 Peter 的資產連結工具將應用程式與 PWA 配對。
最後,將應用程式從封閉測試管道移至正式版!