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

Android 可讓您在應用程式中運用網路功能。因此,您可以靈活且有效率地顯示特定類型的內容。

這樣一來,您就能將現有的網路內容完美整合至 Android 應用程式,例如顯示新聞動態消息、互動式教學課程、多媒體廣告,甚至託管小遊戲,不必從頭開始建構所有內容。您可以將其視為應用程式中的網際網路視窗。將網路內容嵌入應用程式的方法有兩種:

  • WebView:在您希望高度彈性自訂或更新 UI 的位置,內嵌顯示您控制的網路內容。
  • Custom Tabs:使用者點選連結時,由預設瀏覽器提供的完整應用程式內瀏覽體驗 (請參閱瀏覽器支援),可讓使用者留在應用程式中,不必離開至外部瀏覽器,且大部分的瀏覽體驗都立即可用。
Android 應用程式開啟 Google Play,主要網頁檢視畫面醒目顯示。 自訂分頁開啟 Android 開發人員網頁,並醒目顯示。
圖 1. `WebView` (左) 和「自訂分頁」(右) 框線。

為什麼要嵌入網路內容?

在應用程式中嵌入網路內容有幾項好處:

  • 效率:重複使用網站現有的程式碼。以現有的網路技術和內容為基礎。
  • 整合:在應用程式中使用第三方供應商的外部內容,例如媒體和廣告。
  • 彈性:動態更新內容,不受預先定義的使用者介面限制,也不必發布應用程式更新。

網路內容的使用時機

在 Android 應用程式中使用網頁有三種主要用途:

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

  • 在主要體驗中內嵌顯示自己的網路內容,以便靈活自訂或更新 UI。
  • 在應用程式體驗中,以內嵌或視窗形式顯示其他內容,例如廣告、法律條款和法規,或其他第三方內容。
Android 應用程式開啟 Google Play,主要網頁檢視以紅色方塊醒目顯示 Android 應用程式開啟,紅色方塊內有輔助文字。
圖 2. 使用 `WebView`嵌入應用程式的網路內容,做為主要 (左) 和輔助內容 (右)。

2. 使用 Custom Tabs 進行應用程式內瀏覽,或使用 WebView 處理更進階的 用途

  • 提供完整的應用程式內瀏覽體驗,讓使用者點選連結後,仍留在應用程式中,而非離開前往外部瀏覽器。
    • 注意:如果是平板電腦和摺疊式裝置等大螢幕裝置,您可以使用其他選項,協助應用程式充分利用額外空間:
    • 應用程式可以使用啟動相鄰的多視窗模式,在分割畫面中開啟網頁連結。這樣一來,使用者就能同時在應用程式和瀏覽器之間多工處理。或
    • Custom Tabs 具有側邊面板選項,可在同一工作開啟,但位於現有應用程式內容旁邊。
  • Custom Tab 是由使用者的預設瀏覽器提供,適用於支援 Custom Tabs 的瀏覽器。
    • 雖然您可以使用 WebView 提供高度可自訂的應用程式內瀏覽體驗,但建議您使用 Custom Tabs,提供現成的瀏覽器體驗,並在使用者想在瀏覽器中開啟網頁連結時,提供流暢的轉換體驗。
左側是網頁,內含以紅框標示的應用程式內連結,右側則是應用程式內瀏覽器。
圖 3. 點選應用程式內連結 (左) 並開啟應用程式內瀏覽器 (右)。

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

Android 建議使用 Credential Manager 建構登入或驗證流程。如果發現仍需使用嵌入式網頁,請按照下列指引操作:

  • 部分應用程式會使用 WebView 為使用者提供登入流程,包括使用應用程式專屬的使用者名稱和密碼金鑰 (或密碼)。這可讓開發人員整合跨平台的驗證流程。
  • 連結至第三方識別資訊提供者或登入體驗 (例如「使用... 登入」) 時,建議使用 Custom Tabs。啟動 Custom Tab 有助於保護使用者的憑證,因為憑證會與第三方網站隔離。

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

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