Khởi động và tìm nạp trước: sử dụng Dịch vụ tab tuỳ chỉnh

Sebastian Benz
Sebastian Benz

Phần thứ ba của hướng dẫn này tập trung vào Dịch vụ Thẻ tuỳ chỉnh và lý do việc sử dụng dịch vụ này trong ứng dụng của bạn lại tạo ra trải nghiệm người dùng tốt hơn:

  • Mở ngay nội dung bên ngoài: sử dụng warmup() khiến quá trình của trình duyệt bắt đầu trong nền ngay cả trước khi người dùng nhấp vào một đường liên kết và có thể tiết kiệm tới 700 mili giây khi mở đường liên kết. mayLaunchUrl() tìm nạp trước trang. Việc sử dụng cả hai API cùng nhau cho phép các trang tải ngay lập tức, giúp cải thiện đáng kể trải nghiệm người dùng khi tích hợp Thẻ tuỳ chỉnh.
  • Xử lý tốt hơn các Thẻ tuỳ chỉnh đã thu nhỏ: bằng cách kết nối với dịch vụ Thẻ tuỳ chỉnh và sử dụng cùng một CustomTabSession khi khởi chạy Thẻ tuỳ chỉnh, Chrome sẽ có thể xoá một Thẻ tuỳ chỉnh đã thu nhỏ trước đó trước khi chạy một thẻ mới, nhờ đó mang lại trải nghiệm nhất quán hơn cho người dùng.

Các bước cần thực hiện như sau:

  1. Kiểm tra xem trình duyệt mặc định có hỗ trợ Thẻ tuỳ chỉnh hay không bằng cách sử dụng CustomTabsClient.getPackageName(...). Nếu có, hãy liên kết với CustomTabsService bằng cách sử dụng CustomTabsClient.bindCustomTabsService().
  2. Sau khi kết nối với CustomTabsService, trong lệnh gọi lại CustomTabsServiceConnection.onCustomTabsServiceConnected(), hãy làm như sau:

    a. Khởi động quá trình của trình duyệt bằng CustomTabsClient.warmup(). b. Tạo CustomTabsSession mới bằng CustomTabsClient.newSession().

  3. Nếu muốn, hãy tìm nạp trước các trang web mà người dùng có thể truy cập bằng CustomTabsSession.mayLaunchUrl().

  4. Khi chạy một Thẻ tuỳ chỉnh mới, hãy truyền CustomTabsSession đến CustomTabsIntent.Builder bằng cách sử dụng hàm khởi tạo new CustomTabsIntent.Builder(session).

Nếu ứng dụng của bạn nhắm đến API Android cấp 30, th�� CustomTabsClient.getPackageName(...) sẽ yêu cầu bạn thêm một phần truy vấn vào Tệp kê khai Android, khai báo một bộ lọc ý định phù hợp với các trình duyệt có hỗ trợ Thẻ tuỳ chỉnh.

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

Dưới đây là ví dụ đầy đủ về cách kết nối với dịch vụ Thẻ tuỳ chỉnh:

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

Trên Android, các ứng dụng Android có thể xử lý URL. Ví dụ: nếu người dùng đã cài đặt ứng dụng Facebook và nhấp vào đường liên kết tới một bài đăng trên Facebook, họ thường thích mở đường liên kết trong ứng dụng Facebook thay vì trong trình duyệt.

Theo mặc định, Thẻ tuỳ chỉnh sẽ mở các đường liên kết trong ứng dụng Android tương ứng nếu bạn được cài đặt. Tuy nhiên, sau khi CustomTabsServiceConnection được thiết lập, hành vi này sẽ ngừng hoạt động và tất cả URL sẽ mở trong Thẻ tuỳ chỉnh. Để cải thiện trải nghiệm người dùng, bạn nên bật lại hành vi này bằng đoạn mã sau:

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

Tiếp theo: Tìm hiểu cách đổi kích thước thẻ tuỳ chỉnh.