使用嵌入式網頁進行應用程式內瀏覽

應用程式內瀏覽器可讓使用者在應用程式中享受完整的網路體驗,不必離開應用程式。Android 提供兩種主要 API 來實作應用程式內瀏覽器:自訂分頁WebView。如果有連結或廣告會將使用者帶往網頁,請使用應用程式內瀏覽器。如圖 1 所示,您可以在應用程式中直接開啟該頁面。

紅色方塊中的應用程式內連結,以及指向另一個畫面的箭頭,該畫面顯示以自訂分頁開啟的連結。
圖 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 的裝置開發網頁,請參閱下列文件: