อุ่นเครื่องและดึงข้อมูลล่วงหน้า: ใช้บริการแท็บที่กำหนดเอง

Sebastian Benz

ส่วนที่สามของคู่มือนี้มุ่งเน้นที่บริการแท็บที่กำหนดเอง และเหตุผลที่การใช้บริการดังกล่าวในแอปพลิเคชันของคุณสร้างประสบการณ์ของผู้ใช้ที่ดียิ่งขึ้น:

  • เปิดเนื้อหาภายนอกทันที: การใช้ warmup() จะทำให้กระบวนการของเบราว์เซอร์เริ่มต้นทำงานในเบื้องหลังก่อนที่ผู้ใช้จะคลิกลิงก์และประหยัดเวลาได้ถึง 700 มิลลิวินาทีเมื่อเปิดลิงก์ mayLaunchUrl() ดึงข้อมูลหน้าล่วงหน้า การใช้ API ทั้งสองร่วมกันจะช่วยให้หน้าเว็บโหลดได้ทันที ซึ่งช่วยปรับปรุงประสบการณ์ของผู้ใช้ในการผสานรวมแท็บที่กำหนดเองได้อย่างมาก
  • การจัดการแท็บที่กำหนดเองซึ่งย่อขนาดไว้ได้ดีขึ้น: ด้วยการเชื่อมต่อกับบริการแท็บที่กำหนดเองและใช้ CustomTabSession เดียวกันเมื่อเปิดแท็บที่กำหนดเอง Chrome สามารถนำแท็บที่กำหนดเองซึ่งย่อขนาดไว้ก่อนหน้านี้ออกก่อนที่จะเปิดแท็บใหม่ได้ ซึ่งจะมอบประสบการณ์ที่สอดคล้องกันมากขึ้นแก่ผู้ใช้

ขั้นตอนที่จำเป็นมีดังนี้

  1. ตรวจสอบว่าเบราว์เซอร์เริ่มต้นรองรับแท็บที่กำหนดเองโดยใช้ CustomTabsClient.getPackageName(...) หรือไม่ หากใช่ ให้เชื่อมโยงกับ CustomTabsService โดยใช้ CustomTabsClient.bindCustomTabsService()

  2. เมื่อเชื่อมต่อกับ CustomTabsService ใน Callback CustomTabsServiceConnection.onCustomTabsServiceConnected() แล้ว ให้ดำเนินการต่อไปนี้

    ก. เริ่มต้นกระบวนการของเบราว์เซอร์โดยใช้ CustomTabsClient.warmup() ข. สร้าง CustomTabsSession ใหม่โดยใช้ CustomTabsClient.newSession()

  3. (ไม่บังคับ) ดึงข้อมูลหน้าเว็บที่ผู้ใช้มีแนวโน้มที่จะเข้าชมล่วงหน้าโดยใช้ CustomTabsSession.mayLaunchUrl()

  4. เมื่อเปิดแท็บที่กำหนดเองใหม่ ให้ส่ง CustomTabsSession ไปยัง CustomTabsIntent.Builder โดยใช้ตัวสร้าง new CustomTabsIntent.Builder(session)

หากแอปกำหนดเป้าหมายเป็น Android API ระดับ 30 CustomTabsClient.getPackageName(...) กำหนดให้คุณเพิ่มส่วนการค้นหาลงใน Android Manifest ซึ่งเป็นการประกาศตัวกรอง Intent ที่ตรงกับเบราว์เซอร์ที่รองรับแท็บที่กำหนดเอง

<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 สามารถจัดการ URL ได้ เช่น หากผู้ใช้ติดตั้งแอป Facebook ไว้และคลิกลิงก์ไปยังโพสต์ใน Facebook ผู้ใช้มักจะเลือกเปิดลิงก์ในแอป Facebook มากกว่าในเบราว์เซอร์

โดยค่าเริ่มต้น แท็บที่กำหนดเองจะเปิดลิงก์ในแอปพลิเคชัน Android ที่เกี่ยวข้องหากมีการติดตั้งไว้ อย่างไรก็ตาม เมื่อสร้าง CustomTabsServiceConnection แล้ว ลักษณะการทำงานนี้จะหยุดทำงานและ URL ทั้งหมดจะเปิดในแท็บที่กำหนดเองแทน เพื่อให้ผู้ใช้ได้รับประสบการณ์ที่ดีขึ้น เราขอแนะนำให้เปิดใช้ลักษณะการทำงานนี้อีกครั้งโดยใช้โค้ดต่อไปนี้

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

ถัดไป: ดูวิธีปรับขนาดประสบการณ์การใช้งานแท็บที่กำหนดเอง