應用程式內瀏覽器可讓使用者不必離開應用程式,就能享有完整的網頁體驗。Android 提供兩種主要 API,可用於實作應用程式內瀏覽器:自訂分頁和 WebView。如果連結或廣告會導向網頁,請使用應用程式內瀏覽器。您可以直接在應用程式中開啟該頁面,如圖 1 所示。
選擇自訂分頁或 WebView 是重大的架構決策,會影響開發速度、使用者體驗,以及您對 UI 的控制程度。
快速比較
請參考下表,判斷哪項工具符合您的需求:
| 功能 | WebView | 自訂標籤 |
|---|---|---|
| 主要用途 | 建構混合式應用程式,以網頁做為主要或輔助內容,顯示多媒體廣告、應用程式廣告活動或服務條款頁面。 | 顯示外部網站的內容 (例如新聞報導或產品頁面)。 |
| UI 控制項 | Full:這是一個 View 元件,可以放在任何位置。您可以控制所有周圍的 UI。 |
受限。您可以設定工具列顏色主題,並新增一些自訂動作。 |
| 資料和工作階段 | 沙箱化。不會與使用者的主要瀏覽器共用 Cookie 或登入資訊。 | 共用。它會使用使用者的預設瀏覽器工作階段,包括 Cookie 和儲存的密碼。 |
| 原生 <-> 網頁橋接 | 可以。您可以使用 JavaScript 橋接,在網路內容和原生應用程式程式碼之間進行深度雙向通訊。 | 受限。您可以使用 window.postMessage() 方法傳遞基本字串。 |
| 開發人員工作 | 高:您必須自行管理生命週期、導覽和效能。 | 低:只要幾行程式碼就能導入。 |
WebView
WebView 是一種檢視畫面,可讓網頁成為應用程式版面配置不可或缺的一部分。雖然功能強大,但處理起來比自訂分頁複雜。
WebView 可載入遠端或本機網路內容、執行 JavaScript,並在網路內容和原生應用程式程式碼之間啟用雙向通訊。如要進一步瞭解其功能,請參閱「WebView 的功能」。
您也可以使用 WebView 提供網頁應用程式,或在應用程式中顯示線上網頁。例如,您需要定期更新的使用者協議。詳情請參閱「在 WebView 中建構網頁應用程式」。
選擇 WebView 的理由
以下是適合使用 WebView 的幾種情境:
- 混合式應用程式:您要建構的應用程式同時包含網路內容和原生元件 (例如導覽列或懸浮動作按鈕)。
- 第一方內容:您的網路內容是應用程式體驗的核心互動部分,例如文件編輯器或設計畫布。
- 完整 UI 控制項:您需要修改網頁本身的內容,或在網頁上疊加原生 UI 元素。
- 深入分析:您需要詳細瞭解使用者在 WebView 中的參與度和活動。
主要取捨
使用 WebView 時,請考量下列幾項重要取捨:
- 效能:WebView 可能會耗用大量記憶體。如果未謹慎管理,可能會發生效能問題或 ANR (應用程式無回應錯誤)。
- 安全性與維護:您必須負責強化安全性及管理生命週期。包括使用
WebViewCompat.saveState()管理程序重建期間的狀態保留,並遵守 Android 的 1 MB 儲存狀態交易限制。不過,WebView 更新會透過 Google Play 在全球發布,因此您不必擔心基礎引擎過時。
自訂標籤
自訂分頁是將使用者導向外部網址的絕佳選擇,因為這類分頁提供快速、安全且容易使用的瀏覽器視窗,可在應用程式上方滑動。
選擇自訂分頁的原因
以下是適合使用自訂分頁的情境:
- 外部連結:當使用者輕觸不屬於您的網站連結時,自訂分頁會將他們保留在應用程式情境中,同時提供完整的瀏覽器體驗。
- 易於整合:這是最簡單的方法,可讓您快速啟用嵌入式網頁體驗。
- 共用狀態:由於與使用者的預設瀏覽器共用 Cookie,使用者不必再次登入已造訪過的網站。
- 第三方登入:瀏覽器會安全地處理憑證,因此非常適合第三方登入流程 (例如「使用 Google 帳戶登入」或「使用 Facebook 帳戶登入」)。
雖然大多數瀏覽器都支援自訂分頁,但部分瀏覽器提供的自訂選項較多。詳情請參閱「瀏覽器支援」。
在 Jetpack Compose 中使用網路內容
使用 Jetpack Compose 建構時,您可以同時使用自訂分頁和 WebView:
- 自訂分頁:由於自訂分頁使用
Intent,因此您可以從 Compose 函式中的任何Context啟動,完美整合。 - WebView:Compose 尚未提供原生 WebView 可組合函式,因此您必須使用
AndroidView將標準 WebView 嵌入版面配置。
其他資源
如要使用 WebView 或 Custom Tabs API 開發 Android 裝置網頁,請參閱下列文件: