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

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

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