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

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 資訊清單加入查詢部分，並宣告符合自訂分頁支援的瀏覽器的意圖篩選器。

<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>

以下是連線至「自訂分頁」服務的完整範例：

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

接下來：瞭解如何調整自訂分頁的大小。