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

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();

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