Tổng quan về Thẻ tuỳ chỉnh trên Android

Thẻ tuỳ chỉnh là một tính năng trong trình duyệt Android, mang đến cho nhà phát triển ứng dụng một cách để thêm trải nghiệm trình duyệt tuỳ chỉnh ngay trong ứng dụng của họ.

Tải nội dung trên web đã là một phần của ứng dụng di động kể từ thời kỳ đầu của điện thoại thông minh, nhưng các tuỳ chọn cũ hơn có thể tạo ra thách thức cho nhà phát triển. Việc ra mắt trình duyệt thực tế là một nút chuyển ngữ cảnh nặng nề cho người dùng không thể tuỳ chỉnh, trong khi WebView không hỗ trợ tất cả tính năng của nền tảng web, không chia sẻ trạng thái với trình duyệt và phát sinh thêm chi phí bảo trì.

Thẻ tuỳ chỉnh mang lại trải nghiệm người dùng tốt hơn so với việc mở một trình duyệt bên ngoài. Chúng cho phép người dùng ở lại ứng dụng trong khi duyệt web, tăng mức độ tương tác và giảm nguy cơ người dùng rời bỏ ứng dụng. Họ thực hiện được điều này bằng cách trực tiếp cung cấp trình duyệt mà người dùng ưu tiên và tự động chia sẻ trạng thái cũng như các tính năng do trình duyệt đó cung cấp. Bạn không cần phải viết mã tuỳ chỉnh để quản lý các yêu cầu, hoạt động cấp quyền hoặc kho cookie.

Thẻ tuỳ chỉnh có chức năng gì?

Khi sử dụng Thẻ tuỳ chỉnh, nội dung web của bạn sẽ tải trong bất kỳ công cụ kết xuất nào hỗ trợ trình duyệt mà người dùng ưu tiên. Mọi tính năng API hoặc nền tảng web đều có sẵn ở đó và sẽ nằm trong Thẻ tuỳ chỉnh. Tất cả phiên duyệt web, mật khẩu đã lưu, phương thức thanh toán và địa chỉ của họ sẽ hiển thị giống như chúng đã quen thuộc.

Tôi có thể tuỳ chỉnh nội dung nào trong Thẻ tuỳ chỉnh?

Khá quan tâm! Thẻ tuỳ chỉnh cho phép bạn kiểm soát chi tiết nhiều trình duyệt Chrome và trải nghiệm người dùng. Trong ứng dụng của mình, bạn sẽ mở một Thẻ tuỳ chỉnh bằng cách sử dụng một Ý định. Khi Ý định này được gọi, bạn có thể thêm một số thuộc tính vào CustomTabIntent để có được trải nghiệm chính xác mà bạn muốn. Một số chế độ tuỳ chỉnh mà bạn có thể thêm sẽ được liệt kê ở đây.

Ảnh động lối vào và thoát tuỳ chỉnh để phù hợp với phần còn lại của ứng dụng

Một trình duyệt dành cho thiết bị di động, chuyển giữa các màn hình, kết thúc bằng một trang web được tải trong một Thẻ tuỳ chỉnh

Điều chỉnh màu trên thanh công cụ cho phù hợp với các thành phần xây dựng thương hiệu của ứng dụng.

Một trình duyệt dành cho thiết bị di động đang chuyển đổi sang Thẻ tuỳ chỉnh có màu sắc phù hợp với trang web

Tính nhất quán về màu có thể được giữ nguyên với ứng dụng của bạn, ngay cả khi chuyển đổi giữa giao diện sáng và tối.

Và tính nhất quán màu sắc đó vẫn có thể duy trì được với ứng dụng của bạn, ngay cả khi ứng dụng chuyển đổi giữa giao diện sáng và tối.

Các mục và thao tác tuỳ chỉnh trên thanh công cụ và trình đơn của trình duyệt.

Một thẻ tuỳ chỉnh hiển thị trình đơn của thẻ đó cùng với các mục tuỳ chỉnh.

Kiểm soát chiều cao khởi chạy của Tab tuỳ chỉnh, cho phép những việc như phát trực tuyến video trong khi tương tác với cửa hàng trực tuyến của bạn.

Mở một phần Thẻ tuỳ chỉnh có chiều cao đã đặt.

Người dùng có thể thu nhỏ một Thẻ tuỳ chỉnh để tương tác với ứng dụng cơ bản, cũng như khôi phục thẻ đó bất cứ lúc nào mà không làm mất tiến trình để tiếp tục hành trình của họ. Tính năng này mang đến cho người dùng một giải pháp thay thế cho việc đóng Thẻ tuỳ chỉnh và họ có thể làm nhiều việc liền mạch giữa web và ứng dụng gốc. Tính năng này được bật theo mặc định cho Thẻ tuỳ chỉnh, bắt đầu từ Chrome 122 Beta.

Thu nhỏ Thẻ tuỳ chỉnh để tương tác với ứng dụng trong nền.

Đó là xa mọi thứ. Thẻ tuỳ chỉnh rất mạnh mẽ và đang trong quá trình phát triển. Mỗi trình duyệt cần thêm khả năng hỗ trợ cho các tính năng này khi chúng ra mắt. Mặc dù hầu hết mọi người đều có mức hỗ trợ nhất định, nhưng điều quan trọng là bạn phải biết những nội dung nào có thể có hoặc không có trong trình duyệt của người dùng. Hãy tham khảo bảng so sánh tính năng để nhanh chóng kiểm tra phạm vi cung cấp của nhiều tính năng trên các trình duyệt Android phổ biến.

Bạn có thể kiểm thử việc này ngay bây giờ bằng mẫu của chúng tôi trên GitHub.

Khi nào tôi nên sử dụng Tab tuỳ chỉnh?

Không có một cách "chính xác" nào để tải nội dung trên web. Trong một số trường hợp, WebView sẽ là công nghệ phù hợp để sử dụng. Ví dụ: nếu bạn đang lưu trữ độc quyền nội dung của riêng mình trong ứng dụng hoặc nếu bạn cần chèn JavaScript trực tiếp từ ứng dụng của mình. Nếu ứng dụng của bạn hướng mọi người đến các URL bên ngoài miền, thì trạng thái chia sẻ tích hợp sẵn trong Thẻ tuỳ chỉnh có nghĩa là chúng có thể là lựa chọn tốt hơn. Sau đây là một số điểm mạnh khác của Thẻ tuỳ chỉnh:

  1. Bảo mật: Thẻ tuỳ chỉnh sử dụng tính năng Duyệt web an toàn của Google để bảo vệ người dùng và thiết bị khỏi các trang web nguy hiểm.
  2. Tối ưu hoá hiệu suất:
    1. Khởi động trước Trình duyệt ở chế độ nền, đồng thời tránh ăn cắp tài nguyên của ứng dụng.
    2. Tăng tốc thời gian tải trang bằng cách tải trước URL theo suy đoán.
  3. Quản lý vòng đời: Các ứng dụng chạy một Thẻ tuỳ chỉnh sẽ không bị hệ thống loại bỏ trong quá trình sử dụng Thẻ – tầm quan trọng của ứng dụng này sẽ được nâng lên ở cấp độ "nền trước".
  4. Bình cookie và mô hình quản lý quyền được chia sẻ để người dùng không phải đăng nhập vào các trang web mà họ đã kết nối hoặc cấp lại quyền mà họ đã cấp.
  5. Các tính năng của trình duyệt như Trình tiết kiệm dữ liệu sẽ được chia sẻ nếu bạn bật các tính năng này – tải nội dung nhanh hơn và rẻ hơn.
  6. Đồng bộ hoá AutoComplete trên các thiết bị để hoàn thành biểu mẫu tốt hơn.
  7. Người dùng có thể quay lại ứng dụng có tích hợp nút quay lại.

Thẻ tuỳ chỉnh so với Hoạt động đáng tin cậy trên web

Hoạt động đáng tin cậy trên web giúp mở rộng giao thức Thẻ tuỳ chỉnh và chia sẻ hầu hết lợi ích của giao thức này. Tuy nhiên, thay vì cung cấp giao diện người dùng tuỳ chỉnh, công cụ này cho phép nhà phát triển mở thẻ trình duyệt mà không cần giao diện người dùng. Các nhà phát triển nên dùng ứng dụng này nếu muốn mở Ứng dụng web tiến bộ của riêng mình, ở chế độ toàn màn hình, bên trong ứng dụng Android của riêng họ.

Tab tuỳ chỉnh có sẵn ở đâu?

Thẻ tuỳ chỉnh là một tính năng được các trình duyệt trên nền tảng Android hỗ trợ. Công cụ này ban đầu được Chrome giới thiệu, ở phiên bản 45. Giao thức này được hầu hết các trình duyệt Android hỗ trợ.

Chúng tôi đang tìm ý kiến phản hồi, câu hỏi và đề xuất cho dự án này. Vì vậy, bạn nên gửi vấn đề trên crbug.com và đặt câu hỏi trên Twitter @ChromiumDev.

Bắt đầu

Ngoài Bản minh hoạ GitHub, bạn cũng có thể sử dụng một số hướng dẫn để bắt đầu sử dụng Thẻ tuỳ chỉnh.

Đối với các câu hỏi, hãy xem thẻ chrome-custom-tabs trên StackOverflow.