Android 自訂分頁總覽

「自訂分頁」是 Android 瀏覽器的一項功能,可讓應用程式開發人員直接在應用程式中新增自訂瀏覽器體驗。

自智慧型手機問世以來,網路內容已成為行動應用程式的一部分,但較舊選項對開發人員來說可能是一大挑戰。啟動實際瀏覽器需要大量環境切換,無法供使用者自訂,但 WebView 不支援網路平台的所有功能,也不會與瀏覽器共用狀態,也會增加維護負擔。

相較於開啟外部瀏覽器,自訂分頁可提供更優質的使用者體驗。這種素材資源可讓使用者在瀏覽時留在應用程式當中,提升參與度,並降低使用者放棄應用程式的風險。為此,您可以利用使用者偏好的瀏覽器直接操作,並自動共用其所提供的狀態和功能。您不需要編寫自訂程式碼來管理要求、權限授予權限或 Cookie 儲存庫。

自訂分頁有什麼功能?

使用「自訂」分頁時,任何轉譯引擎都能透過使用者偏好的瀏覽器載入網頁內容。任何 API 或網路平台功能皆可使用,您可在「自訂」分頁中使用。訪客的瀏覽工作階段、已儲存的密碼、付款方式和地址都會顯示起來,就像先前一樣。

我可以在自訂分頁中自訂哪些內容?

相當關心!自訂分頁可讓您精細控管許多瀏覽器 Chrome 和使用者體驗。在應用程式中,您可以使用 Intent 啟動「自訂」分頁。呼叫此意圖時,您可以在 CustomTabIntent 中新增一些屬性,以取得您想要的確切體驗。此處會列出您可以新增的部分自訂項目。

配合應用程式的其餘部分自訂入場和結束動畫

行動瀏覽器切換畫面,結束於自訂分頁中載入的網站

根據應用程式的品牌元素修改工具列的顏色。

行動瀏覽器畫面轉換到自訂分頁,畫面顯示與網站相符的顏色

色彩一致性,即使在淺色和深色主題之間切換,也能持續使用應用程式。

即使在淺色和深色主題間切換,色彩一致性也能隨應用程式使用。

瀏覽器工具列和選單的自訂動作和項目。

顯示選單的自訂分頁,包含自訂項目。

控制「自訂」分頁的啟動高度,在與網路商店互動時進行影片串流等操作。

自訂分頁開啟,並顯示已設定的高度。

使用者可以將自訂分頁最小化,以便與基礎應用程式互動,並隨時還原,同時保留所有進度以繼續先前的應用程式。這樣一來,使用者除了關閉自訂分頁之外,也能順暢地在網頁和原生應用程式之間進行多工處理。自 Chrome 122 Beta 版起,自訂分頁已預設啟用這項功能。

將自訂分頁縮到最小,以便與背景應用程式互動。

這並非一切。自訂分頁非常強大,仍處於開發階段。在這些功能推出時,每個瀏覽器都需要新增支援功能。雖然幾乎所有平台都提供一定程度的支援,但您必須瞭解使用者的瀏覽器有哪些可用或可能無法使用的功能。請參閱功能比較表,快速檢查熱門 Android 瀏覽器中各種功能的可用性。

您現在可以在 GitHub 上使用範例進行測試。

何時該使用自訂分頁?

載入網頁內容並沒有一種「正確」的方式。在某些情況下,WebView 是最適合使用的技術。舉例來說,如果您在應用程式中代管自己的內容,或是需要直接從應用程式插入 JavaScript。如果應用程式將使用者導向網域以外的網址,則「自訂分頁」中的內建共用狀態可能是比較好的選擇。自訂分頁的其他優點包括:

  1. 安全性:自訂分頁使用 Google 的安全瀏覽功能,保護使用者和裝置不受危險網站侵擾。
  2. 效能最佳化:
    1. 在背景預先為瀏覽器暖機,同時避免從應用程式中竊取資源。
    2. 推測網址優先載入,藉此縮短頁面載入時間。
  3. 生命週期管理:在分頁使用期間,系統不會移除啟動自訂分頁的應用程式,其重要性會提高至「前景」層級。
  4. 共用 Cookie jar 和權限模型,讓使用者不必登入與其連結的網站,也不必重新授予權限。
  5. 啟用數據節省模式等瀏覽器功能時,系統會一併共用此功能,讓網頁載入速度更快、更便宜。
  6. 在所有裝置上保持同步自動完成功能,提升表單填寫效率。
  7. 使用者可以透過整合式返回按鈕返回應用程式。

自訂分頁與受信任的網路活動

Trusted Web Activities 是擴充自訂分頁通訊協定,並共享大部分好處。但與其提供自訂 UI,開發人員也可以直接開啟瀏覽器分頁,不需提供任何 UI。如果開發人員想在自有的 Android 應用程式中以全螢幕模式開啟自己的漸進式網頁應用程式

哪些國家/地區可以使用「自訂分頁」?

「自訂分頁」是 Android 平台上的瀏覽器支援的功能,這個 API 最初是由 Chrome 導入,45 版。大多數 Android 瀏覽器都支援此通訊協定。

我們正在針對這個專案提供意見回饋、問題和建議,因此建議你前往 crbug.com 回報問題,並且透過 Twitter @ChromiumDev 提問。

開始探索

除了 GitHub Demo 之外,還有一些指南可以協助你開始使用自訂分頁。

如有問題,請查看 StackOverflow 上的 chrome-custom-tabs 標記。