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

Android 可讓開發人員在應用程式中運用網頁功能,因此您能受益於顯示特定類型內容的彈性和效率。

這樣一來,您就能將現有的網頁內容順暢整合至原生 Android 應用程式,例如顯示新聞動態、互動式教學課程、廣告,甚至代管迷你遊戲,不必從頭開始建構所有內容。您可以將其視為應用程式內的網際網路視窗。將網頁內容嵌入應用程式的方式有兩種:

  • WebView:顯示您控制的內嵌網頁內容,方便您高度彈性地自訂或更新 UI。
  • 自訂分頁: 使用者點選連結時,系統會使用預設瀏覽器 (請參閱瀏覽器支援) 提供完整的應用程式內瀏覽體驗,讓使用者留在應用程式中, 不必前往外部瀏覽器,且瀏覽體驗大多是開箱即用。
Android 應用程式開啟 Google Play,主要網頁檢視畫面以紅色方塊標示。 自訂分頁開啟 Android 開發人員網頁,並以紅框標示。
圖 1. 以紅色標示的 WebView (左) 和自訂分頁 (右)。

為什麼要嵌入網頁內容?

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

何時使用網頁內容?

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

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

  • 將自己的網頁內容內嵌顯示為主要體驗,方便您高度彈性地自訂或更新 UI。
  • 在應用程式體驗中,以內嵌或視窗形式顯示其他內容,例如廣告、法律條款和法規,或其他第三方內容。
Android 應用程式開啟 Google Play,主要網頁檢視畫面以紅色方塊醒目顯示 Android 應用程式開啟,紅色方塊內顯示支援的文字。
圖 2. 應用程式內嵌的網頁內容,左側為主要內容 (使用 WebView),右側為輔助內容。

2. 使用自訂分頁進行應用程式內瀏覽,或使用 WebView 進行更進階的用途

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

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

Android 建議使用 Credential Manager 建構登入或驗證流程。如果發現仍需使用 Embedded Web 才能提供這些體驗,請參閱下列指引:

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

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

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