在 Android 應用程式中使用網頁內容

Android 可讓開發人員在應用程式中運用網路的強大功能,因此您可以透過顯示特定類型的內容,享受彈性和效率的好處。

這樣一來,您就能將現有的網頁內容無縫整合至原生 Android 應用程式,例如顯示新聞動態消息、互動式教學課程、多媒體廣告,甚至是主辦迷你遊戲,而無須從頭開始建立所有內容。您可以將其視為應用程式中的網路視窗。將網頁內容嵌入應用程式有兩種方式:

  • WebView:會顯示您在內嵌式控制項中控制的網站內容,可讓您在自訂或更新 UI 時享有高度彈性。
  • 自訂分頁:如果使用者點選連結,您希望他們繼續留在應用程式中,而非離開至外部瀏覽器,則可透過使用者預設的瀏覽器 (查看瀏覽器支援功能) 提供完整的應用程式內瀏覽體驗。
Android 應用程式開啟 Google Play 畫面,主要網頁檢視畫面以紅色方塊標示。 自訂分頁開啟「Android 開發人員」網頁,以紅色方框標示。
圖 1. 紅色框線標示的 WebView (左圖) 和自訂分頁 (右圖)。

為什麼要嵌入網頁內容?

  • 效率:重複使用網站現有的程式碼。建構現有的網路技術和內容。
  • 整合:在應用程式中運用第三方供應商提供的外部內容,例如媒體、廣告。
  • 彈性:動態更新內容,不受限於預先定義的 UI,也不需要發布應用程式更新。

何時應使用網頁內容?

在 Android 應用程式中使用網路有三個主要用途:

1. 將網頁內容嵌入應用程式,做為主要或輔助內容:使用 WebView

  • 您可以將自有的網頁內容以內嵌方式顯示,做為主要體驗,這樣就能在自訂或更新 UI 時,享有高度彈性。
  • 在應用程式體驗中顯示其他內容,例如廣告、法律條款和法規,或其他第三方內容,可在行內顯示,也可以以視窗顯示。
Android 應用程式開啟 Google Play 畫面,主要網頁檢視畫面以紅色方塊標示 開啟 Android 應用程式,紅色方塊內顯示輔助文字。
圖 2. 應用程式內嵌的網路內容,其中 WebView 是主要內容 (左側),而支援內容則是輔助內容 (右側)。

2. 使用自訂分頁進行應用程式內瀏覽 (進階用途可使用 WebView)

  • 提供完整的應用程式內瀏覽體驗,如果使用者點選連結,您希望他們能留在應用程式中,而不是離開至外部瀏覽器。
    • 注意:針對平板電腦和摺疊式裝置等大螢幕裝置,還有其他選項可協助應用程式善用額外空間:
    • 應用程式可以使用啟動相鄰多視窗體驗,在分割畫面中開啟網址連結。這樣一來,使用者就能同時在應用程式和瀏覽器之間執行多工作。或
    • 自訂分頁有側邊面板選項,可在相同工作中開啟,但會顯示在現有應用程式內容旁邊。
  • 對於支援自訂分頁的瀏覽器,自訂分頁是由使用者的預設瀏覽器提供支援。
    • 雖然您可以使用 WebView 並提供可高度自訂的應用程式內瀏覽體驗,但我們建議您使用自訂分頁,以便提供即時瀏覽器體驗,並在使用者想要在瀏覽器中開啟網頁連結時,提供流暢的轉換體驗。
網頁:左側以紅框標示的應用程式內連結,右側顯示應用程式內瀏覽器。
圖 3. 點選應用程式內連結 (左圖) 和開啟應用程式內瀏覽器 (右圖)。

3. 應用程式中的登入或驗證流程

Android 建議您使用 Credential Manager 建構登入或驗證流程。如果您發現仍需要在這些體驗中使用嵌入式網頁,請參考以下指南:

  • 有些應用程式會使用 WebView 為使用者提供登入流程,包括使用應用程式專屬的使用者名稱和密碼金鑰 (或密碼)。這可讓開發人員在各平台上統一驗證流程。
  • 如要連結至第三方身分識別服務供應商或登入體驗 (例如「使用…登入」),請使用自訂分頁。啟動自訂分頁可確保使用者的憑證受到保護,並與第三方網站隔離。

如要進一步瞭解如何利用 WebView 進行驗證,請參閱「使用 WebView 驗證使用者」。如要啟動自訂分頁,請參閱「Android 自訂分頁簡介」。

應用程式內登入欄位,左側顯示 WebView。 第三方登入畫面,右側顯示自訂分頁。
圖 4. 應用程式內的登入欄位 (左圖) 和在自訂分頁中開啟的第三方登入 (右圖)。