Những điểm mới cho web trên Android năm 2023

Adriana Jara
Sebastian Benz

Có nhiều lý do khiến nhà phát triển mang web đến với Android: có thể là sử dụng lại tiện ích web trong ứng dụng Android, kết hợp nội dung của bên thứ nhất hoặc bên thứ ba, thậm chí là đưa toàn bộ ứng dụng web của họ lên nền tảng này. Bất kể trường hợp sử dụng nào, Android đều có nhiều công cụ để hỗ trợ bạn.

Sau đây là thông tin cập nhật mới nhất về các công cụ này. Ví dụ:

  • Cải thiện quyền riêng tư và hỗ trợ tốt hơn cho màn hình lớn, chẳng hạn như hỗ trợ tính năng kéo và thả hình ảnh trong WebView.
  • Thẻ tuỳ chỉnh hiện hỗ trợ một số thẻ tuỳ chỉnh.
  • Các tính năng tích hợp cho PWA, chẳng hạn như Giao diện người dùng cài đặt phong phú hơn và API Play Billing trong Hoạt động đáng tin cậy trên web.

Hãy cùng tìm hiểu thêm.

WebView

WebView là cách thường dùng nhất để nhúng nội dung web vào ứng dụng Android, vì phần lớn ứng dụng Android đều sử dụng WebView. Đây là một cách tuyệt vời để tích hợp liền mạch giao diện người dùng web vào trải nghiệm ứng dụng Android gốc. Ví dụ: bạn có thể nhúng nhiều giao diện người dùng Web vào ứng dụng của mình, chẳng hạn như quảng cáo, tiện ích hoặc thậm chí là trình duyệt trong ứng dụng. Một trong những điểm mạnh lớn nhất của WebView là API mạnh mẽ để kiểm soát và sửa đổi nội dung web đang được tải. Vậy WebView có gì mới?

Tiêu đề X-Requested-With

Hãy bắt đầu với quyền riêng tư và việc ngừng sử dụng tiêu đề X-Requested-With. Khi người dùng cài đặt và chạy một ứng dụng sử dụng WebView để nhúng nội dung web, WebView sẽ thêm tiêu đề X-Requested-With vào mọi yêu cầu gửi đến máy chủ. Giá trị của tiêu đề này là tên APK của ứng dụng. Điều này có nghĩa là mỗi yêu cầu đều bao gồm thông tin cụ thể về bối cảnh mà người dùng đang sử dụng nội dung web và rò rỉ danh tính của ứng dụng cho dịch vụ trực tuyến. Để bảo vệ quyền riêng tư của người dùng, nhóm WebView đã bắt đầu thử nghiệm ngừng sử dụng để xoá tiêu đề này khỏi tất cả các yêu cầu WebView.

Nhưng nếu ứng dụng của bạn dựa vào tiêu đề X-Requested-With thì sao? Bạn nên sử dụng API mới chọn sử dụng để có thể chọn gửi tiêu đề yêu cầu đến các nguồn gốc cụ thể. Điều này có nghĩa là bạn có được cả hai lợi ích: bạn có thể tiếp tục hỗ trợ các tính năng hiện có được xây dựng dựa trên tiêu đề này, đồng thời đảm bảo rằng quyền riêng tư của người dùng được bảo vệ trong mọi trường hợp khác. Nếu muốn giữ nguyên hành vi hiện tại, bạn cũng có thể đăng ký dùng thử phiên bản gốc X-Requested-With Deprecation.

WebSettingsCompat.setRequestedWithHeaderOriginAllowList(
    demoWebview.getSettings(), Collections.singleton("https://example.com")
);

Kiểm thử WebView

Chủ đề tiếp theo là kiểm thử. Nếu bạn là nhà phát triển web và trang web của bạn nhận được nhiều lưu lượng truy cập từ WebView, thì bạn có thể tham khảo hai nội dung cập nhật sau:

  1. WebView hiện hỗ trợ bản dùng thử theo nguyên gốc của Chrome. Bản dùng thử theo nguyên gốc cấp cho bạn quyền sử dụng các tính năng mới hoặc tính năng thử nghiệm trong Chrome. Bạn có thể dùng các mã này để dùng thử một tính năng mới trước khi tính năng đó được cung cấp cho tất cả mọi người. Cho đến nay, bản dùng thử theo nguyên gốc chỉ có trên Chrome dành cho máy tính và thiết bị di động, nhưng bắt đầu từ Chrome M110, bản dùng thử theo nguyên gốc cũng hoạt động trong WebView.

  2. Giờ đây, bạn có thể cài đặt WebView Beta dễ dàng hơn nhiều. Bạn nên kiểm thử trang web của mình bằng kênh WebView Beta để đảm bảo trang web hoạt động tốt trong các phiên bản WebView sắp tới. Để làm việc này, hãy tham gia chương trình kiểm thử WebView Beta trên Cửa hàng Google Play và thiết bị của bạn sẽ tự động được đăng ký.

Ảnh chụp màn hình trang web để tham gia chương trình beta WebView.

Hỗ trợ thiết bị có màn hình lớn

Mục tiêu của chúng tôi là giúp WebView hoạt động tốt trên các thiết bị có màn hình lớn. Một bước trong hướng này là WebView hiện hỗ trợ tính năng kéo và thả hình ảnh. Ví dụ: ở chế độ xem chia đôi màn hình, bạn có thể kéo một hình ảnh từ WebView vào một ứng dụng khác.

Bạn có thể dễ dàng thêm tính năng kéo và thả vào WebView: bạn chỉ cần khai báo DropDataProvider trong AndroidManifest.

<application...>
     ...
     <provider
         android:authorities="com.example.webviewdemo.DropDataProvider"
         android:name="androidx.webkit.DropDataContentProvider"
         android:exported="false"
         android:grantUriPermissions="true"/>
 </application>

Nói về các thiết bị màn hình lớn, Chrome và WebView trên Android U sẽ hỗ trợ đầy đủ tính năng viết tay trong các trường nhập văn bản HTML, cũng như hỗ trợ các cử chỉ nhập để xoá văn bản hoặc thêm dấu cách. Tính năng hỗ trợ viết tay đã có trên tất cả thiết bị Samsung chạy One UI 5.1, chẳng hạn như S23 Ultra. Đối với các thiết bị khác sử dụng Android T, bạn có thể bật tính năng viết tay trong phần nhập HTML trong Tuỳ chọn cho nhà phát triển.

Công cụ JavaScript Jetpack

Đôi khi, bạn có thể cần chạy JavaScript trong ứng dụng mà không cần hiển thị nội dung web nào; ví dụ: khi chia sẻ logic nghiệp vụ trên web và ứng dụng di động. Để giúp bạn dễ dàng hơn, chúng tôi đã ra mắt bản phát hành alpha của công cụ JavaScript JetPack mới vào năm ngoái. Thư viện này sử dụng V8, công cụ JavaScript của Chrome và cho phép ứng dụng của bạn đánh giá mã JavaScript hoặc WebAssembly mà không cần tạo thực thể WebView. Điểm tuyệt vời của công cụ JavaScript mới là công cụ này thực thi JavaScript trong một quy trình khác, giúp bạn chạy JavaScript một cách an toàn và ổn định trong ứng dụng. Công cụ này cũng yêu cầu ít tài nguyên hơn so với một thực thể WebView.

ListenableFuture<JavaScriptSandbox> jsSandboxFuture =
JavaScriptSandbox.createConnectedInstanceAsync(JavaScriptEngineActivity.this);
JavaScriptIsolate jsIsolate = jsSandboxFuture.get().createIsolate();
final String code =
"function sum(a, b) { let r = a + b; return r.toString(); }; sum(3, 4)";
ListenableFuture<String> resultFuture = jsIsolate.evaluateJavaScriptAsync(code);
…

Tab tùy chỉnh

Thẻ tuỳ chỉnh Android với kiểu mặc định.

WebView rất phù hợp để tích hợp giao diện người dùng web vào ứng dụng. Nhưng còn việc cho phép người dùng duyệt xem nội dung web trong ứng dụng thì sao?

Đây là một trường hợp sử dụng tuyệt vời cho Thẻ tuỳ chỉnh. Đây là một cách an toàn và thân thiện với người dùng để cho phép người dùng xem nội dung web trong ứng dụng của bạn. Ưu điểm lớn của các thẻ này là người dùng không cần phải đăng nhập lại vào các trang web yêu thích của họ. Lý do là vì chúng là một thực thể của trình duyệt mặc định và cookie của người dùng đang được chia sẻ, đồng thời cung cấp tất cả các tính năng và API của nền tảng web mà trình duyệt hỗ trợ.

Điều này cũng có nghĩa là nếu trình duyệt mặc định của bạn là Chrome, thì thẻ tuỳ chỉnh sẽ mở trong Chrome; nếu trình duyệt mặc định của bạn là Firefox, thì Thẻ tuỳ chỉnh sẽ mở trong Firefox. Hầu hết các trình duyệt chính trên Android đều hỗ trợ Thẻ tuỳ chỉnh. Nếu trình duyệt mặc định không hỗ trợ Thẻ tuỳ chỉnh, thì ứng dụng trình duyệt sẽ mở ra.

Điều tuyệt vời về Thẻ tuỳ chỉnh là bạn có thể tạo kiểu cho các thẻ đó để phù hợp với giao diện của ứng dụng, thêm tính tương tác tuỳ chỉnh thông qua các thao tác và thanh công cụ của riêng bạn.

Thẻ tuỳ chỉnh Android có giao diện màu và thanh công cụ tuỳ chỉnh.

Một phần thẻ tuỳ chỉnh

Các tuỳ chỉnh của Thẻ tuỳ chỉnh đã được nâng cấp lớn với tính năng hỗ trợ Thẻ tuỳ chỉnh một phần. Các ứng dụng này cho phép người dùng làm nhiều việc cùng lúc giữa ứng dụng và web. Cho đến nay, khi sử dụng Thẻ tuỳ chỉnh, lớp phủ thẻ trình duyệt sẽ bao phủ toàn bộ màn hình. Giờ đây, bạn có thể kiểm soát chiều cao của lớp phủ Thẻ tuỳ chỉnh. Bằng cách này, người dùng có thể tương tác với ứng dụng và nội dung trên web của bạn cùng một lúc. Nếu trình duyệt của người dùng không hỗ trợ Thẻ tuỳ chỉnh một phần, thì người dùng sẽ chỉ thấy Thẻ tuỳ chỉnh toàn màn hình được hỗ trợ.

Bạn chỉ cần kết nối với Dịch vụ thẻ tuỳ chỉnh, truyền phiên vào CustomTabsBuilder và gọi setActivityHeight.

CustomTabsSession customTabsSession;

// ...

CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder(customTabsSession)
  .setInitialActivityHeightPx(500)
  .setCloseButtonPosition(CustomTabsIntent.CLOSE_BUTTON_POSITION_END)
  // ...
  .build();

customTabsIntent.launchUrl(context, Uri.parse(url))

YouTube đã ra mắt thành công Thẻ tuỳ chỉnh cùng dòng có thể đổi kích thước trên quảng cáo phản hồi trực tiếp. Nhờ đó, họ có thể triển khai một cách mới để tương tác với quảng cáo và nội dung web mà không làm gián đoạn trải nghiệm tự nhiên trên ứng dụng.

Trải nghiệm quảng cáo Trực tiếp trên YouTube bằng Thẻ tuỳ chỉnh một phần.

Nhưng còn máy tính bảng và các thiết bị màn hình lớn khác thì sao? Nhóm Chrome hiện đang phát triển một trải nghiệm mới cho Thẻ tuỳ chỉnh cạnh nhau ở chế độ ngang và trên các thiết bị có màn hình lớn. Bằng cách xác định chiều rộng thẻ tối đa cùng với điểm ngắt, trải nghiệm Thẻ tuỳ chỉnh sẽ tự động chuyển đổi giữa lớp phủ bảng dưới cùng và trải nghiệm cạnh nhau. Tính năng này đã có trong Canary và sẽ ra mắt vào khoảng tháng 7 năm 2023. Nếu bạn muốn dùng thử, hãy xem mã nguồn của ứng dụng mẫu Tab tuỳ chỉnh Chromium.

Thẻ tuỳ chỉnh hiển thị cạnh nhau với nội dung chính của ứng dụng.

Đo lường tín hiệu tương tác

Nội dung cập nhật lớn thứ hai đối với Thẻ tuỳ chỉnh là đo lường mức độ tương tác của người dùng theo phiên. Nếu ứng dụng của bạn thường xuyên hiển thị nội dung cho người dùng, bao gồm cả đường liên kết (ví dụ: trong nguồn cấp dữ liệu tin tức), thì bạn có thể biết được người dùng thấy đường liên kết nào có giá trị và đường liên kết nào không có giá trị không? Thông tin này có thể rất hữu ích khi bạn cần ưu tiên những đường liên kết nào sẽ hiển thị cho người dùng.

Nhóm Chrome đã thêm chế độ hiển thị chỉ số theo phiên vào Thẻ tuỳ chỉnh của Chrome. Ngoài thời gian người dùng ở trên một trang, giờ đây, bạn cũng có thể biết được khoảng cách cuộn, hướng cuộn và mức độ tương tác tổng thể với nội dung trên web.

Các tín hiệu tương tác có sẵn bắt đầu từ Chrome 114 và yêu cầu thư viện hỗ trợ androidx.browser:browser:1.6.0-alpha01 trở lên. Để tìm hiểu thêm, hãy xem hướng dẫn bắt đầu sử dụng tín hiệu về mức độ tương tác.

PWA

PWA cũng có các bản cập nhật – một bộ công nghệ giúp tạo ra trải nghiệm giống như ứng dụng, được xây dựng và triển khai trên web.

Khi sử dụng PWA trên Android, ứng dụng web của bạn có thể được cài đặt: ứng dụng này sẽ hoạt động cùng với các ứng dụng nền tảng khác, trên màn hình chính, trình chạy, phần cài đặt và các nền tảng khác.

Các tính năng của PWA được xây dựng dựa trên các tiêu chuẩn web; các tính năng này tập trung vào khả năng tương thích trên nhiều nền tảng, cung cấp cho nhà phát triển các công cụ để tạo một ứng dụng web một lần và cho phép người dùng cài đặt ứng dụng đó trên bất kỳ thiết bị nào họ chọn. Việc tạo một ứng dụng web có thể cài đặt không có nghĩa là bạn không thể hoặc không nên có một ứng dụng Android gốc, mà đó là một lựa chọn khác để đưa web đến với Android.

Hãy cùng xem một số tính năng giúp ứng dụng web có thể cài đặt của bạn trở nên thân thuộc với Android.

Chúng tôi muốn giúp người dùng cài đặt những trang web mà họ quan tâm nhất. Bước đầu tiên là xoá trình xử lý tìm nạp worker dịch vụ làm yêu cầu cài đặt trên Android và Chrome. Ngoài ra, Chrome sẽ bỏ qua việc khởi động trình chạy dịch vụ nếu trình xử lý tìm nạp trống. Chrome sẽ chạy các thử nghiệm để mở rộng quyền cài đặt cho người dùng. Hãy chú ý đến những vấn đề đó và vui lòng gửi ý kiến phản hồi.

Yêu cầu về worker dịch vụ là để nhà phát triển tạo ra trải nghiệm người dùng nhất quán với các ứng dụng Android khác. Bạn có thể dùng thông báo này để tạo một trang thông báo cho người dùng rằng họ không thể sử dụng ứng dụng khi không có kết nối mạng.

Chúng tôi nhận thấy rằng mình có thể giảm bớt khối lượng công việc cho nhà phát triển và đảm bảo rằng những ứng dụng này mang lại trải nghiệm cài đặt tốt ngay từ đầu. Đó là lý do Chrome thêm một trải nghiệm ngoại tuyến mặc định hiển thị cho người dùng một màn hình có biểu tượng của ứng dụng, cho họ biết rằng họ đang ở chế độ ngoại tuyến mà không yêu cầu nhà phát triển phải làm thêm việc.

Tất nhiên, bạn vẫn có thể sử dụng API worker để xây dựng trải nghiệm ngoại tuyến tuỳ chỉnh và triển khai các tính năng khác như lưu vào bộ nhớ đệm để cải thiện hiệu suất.

Một số tính năng khác có thể mang lại trải nghiệm ứng dụng web tinh tế cho Android bao gồm Giao diện người dùng cài đặt phong phú hơn. Bằng cách thêm các trường description và screenshots vào tệp kê khai web, người dùng sẽ có trải nghiệm cài đặt gần giống với nội dung mà các cửa hàng ứng dụng hiển thị để mô tả ứng dụng của bạn.

Chúng tôi cũng có lối tắt. Bằng cách thêm một mảng có tên shortcuts mô tả một tập hợp các thao tác nhanh mà người dùng thường thực hiện trong ứng dụng, họ sẽ có thể truy cập vào các thao tác này bằng cách nhấn và giữ biểu tượng của ứng dụng.

Bằng cách sử dụng API Chia sẻ trên web và Mục tiêu chia sẻ trên web, ứng dụng của bạn có thể tương tác với các ứng dụng khác, giống như mọi ứng dụng nền tảng khác. Ứng dụng của bạn sẽ là một lựa chọn trong trang tính chia sẻ, đồng thời có thể chia sẻ và nhận ảnh, văn bản cũng như các tệp khác.

Bạn có thể xem bài nói chuyện tại I/O có tên "Web: Nền tảng để phát triển" để biết thêm thông tin về cách các doanh nghiệp đang tận dụng những công nghệ này.

Hoạt động đáng tin cậy trên web

Một cách khác để đưa web đến với Android là sử dụng Hoạt động đáng tin cậy trên web (TWA).

TWA là cách tốt nhất để hiển thị nội dung web của bên thứ nhất ở chế độ toàn màn hình trong ứng dụng. Đây là giải pháp lý tưởng cho những nhà phát triển muốn gói ứng dụng web của họ dưới dạng ứng dụng Android hoặc sử dụng trang web của họ như một phần của ứng dụng.

Xin lưu ý rằng TWA nghe có vẻ liên quan chặt chẽ đến PWA, nhưng thực tế không phải vậy. Có, bằng cách sử dụng TWA, bạn có thể phát hành ứng dụng web có thể cài đặt lên Google Play, nhưng bạn cũng có thể tạo một hoạt động duy nhất trên web và đưa hoạt động đó vào ứng dụng Android.

Hoạt động web đáng tin cậy được trình duyệt của người dùng hiển thị giống hệt như cách người dùng nhìn thấy trong trình duyệt, ngoại trừ việc hoạt động này chạy ở chế độ toàn màn hình và không hiển thị thanh URL. Điều này có nghĩa là các trình phát này hỗ trợ tất cả các tính năng và API của nền tảng web mà trình duyệt hỗ trợ.

Sau đây là một số lợi ích của việc gói ứng dụng web bằng TWA:

Phát hành lên Google Play để ứng dụng của bạn có thể xuất hiện và được phân phối trên Google Play. Có quyền truy cập vào API Play Billing, cho phép nhà phát triển quản lý việc bán hàng hoá kỹ thuật số trong ứng dụng của họ, giúp dễ dàng thiết lập sản phẩm, chương trình ưu đãi, gói thuê bao, v.v. Uỷ quyền thông báo và quyền truy cập thông tin vị trí địa lý cho ứng dụng Android thay vì trang web.

Hãy xem bài viết này để tìm hiểu thêm về cách ContactsDirect sử dụng TWA nhằm mang lại lợi ích cho người dùng và tăng gấp ba tỷ lệ chuyển đổi.

Kết luận

Như bạn đã thấy, có nhiều lựa chọn để nhúng nội dung web vào ứng dụng và tất cả các lựa chọn này đều liên tục được cải thiện.