暖機和預先擷取：使用自訂分頁服務

Sebastian Benz

本指南第三部分將著重於自訂分頁服務，以及在應用程式中使用這項服務可帶來更好使用者體驗的原因：

  • 立即開啟外部內容：使用 warmup() 會在使用者點選連結之前，在背景啟動瀏覽器程序，開啟連結時可節省最多 700 毫秒的時間。mayLaunchUrl() 會預先擷取網頁。同時使用這兩個 API 可讓網頁立即載入，大幅改善自訂分頁整合的使用者體驗。
  • 更妥善處理已最小化的自訂分頁：只要在啟動自訂分頁時連線至自訂分頁服務，並使用相同的 CustomTabSession，Chrome 就能在啟動新分頁前移除先前已最小化的自訂分頁，提供更一致的使用者體驗。

必要步驟如下：

  1. 使用 CustomTabsClient.getPackageName(...) 檢查預設瀏覽器是否支援自訂分頁。如果是，請使用 CustomTabsClient.bindCustomTabsService() 繫結至 CustomTabsService。

  2. 連線至 CustomTabsService 後，請在 CustomTabsServiceConnection.onCustomTabsServiceConnected() 回呼中執行以下操作：

    a. 使用 CustomTabsClient.warmup() 暖機瀏覽器程序。b. 使用 CustomTabsClient.newSession() 建立新的 CustomTabsSession。

  3. 您可以選擇使用 CustomTabsSession.mayLaunchUrl()，預先載入使用者可能會造訪的網頁。

  4. 啟動新的自訂分頁時，請使用建構函式 new CustomTabsIntent.Builder(session) 將 CustomTabsSession 傳遞至 CustomTabsIntent.Builder。

如果應用程式以 Android API 級別 30 為目標版本，CustomTabsClient.getPackageName(...) 就會要求您在 Android 資訊清單中新增查詢專區，宣告與支援自訂 Tabs 的瀏覽器相符的意圖篩選器。

<manifest xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools">   …    <queries>         <intent>             <action android:name="android.support.customtabs.action.CustomTabsService" />         </intent>     </queries> </manifest>

以下是如何連線至 Custom Tabs 服務的完整範例：

private CustomTabsClient mClient; private CustomTabsSession mSession;  private CustomTabsServiceConnection mConnection = new CustomTabsServiceConnection() {     @Override     public void onCustomTabsServiceConnected(             @NonNull ComponentName name,             @NonNull CustomTabsClient client     ) {         mClient = client;         // Warm up the browser process         mClient.warmup(0 /* placeholder for future use */);         // Create a new browser session         mSession = mClient.newSession(new CustomTabsCallback());         // Pre-render pages the user is likely to visit         // you can do this any time while the service is connected         mSession.mayLaunchUrl(Uri.parse("https://developers.android.com"), null, null);     }      @Override     public void onServiceDisconnected(ComponentName name) {         mClient = null;         mSession = null;     } };  private void bindCustomTabService(Context context) {     // Check for an existing connection     if (mClient != null) {         // Do nothing if there is an existing service connection         return;     }      // Get the default browser package name, this will be null if     // the default browser does not provide a CustomTabsService     String packageName = CustomTabsClient.getPackageName(context, null);     if (packageName == null) {         // Do nothing as service connection is not supported         return;     }     CustomTabsClient.bindCustomTabsService(context, packageName, mConnection); }  @Override protected void onCreate(Bundle savedInstanceState) { …     bindCustomTabService(this);     findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {         @Override         public void onClick(View view) {             String url = "https://developers.android.com";             CustomTabsIntent intent = new CustomTabsIntent.Builder(mSession)                     .build();             intent.launchUrl(MainActivity.this, Uri.parse(url));         }     }); }

在 Android 上，Android 應用程式可處理網址。舉例來說，如果使用者已安裝 Facebook 應用程式，並點選 Facebook 貼文的連結，通常會希望連結在 Facebook 應用程式中開啟，而不是在瀏覽器中開啟。

根據預設，自訂分頁會在安裝的 Android 應用程式中開啟連結。不過，一旦建立 CustomTabsServiceConnection，這項行為就會停止運作，所有網址都會改為在自訂分頁中開啟。為了改善使用者體驗，建議您使用下列程式碼重新啟用這項行為：

CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder()     .setSendToExternalDefaultHandlerEnabled(true)     .build();

接下來，請參閱這篇文章，瞭解如何調整自訂分頁體驗的大小。