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