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 phổ biến nhất để nhúng nội dung trên web vào ứng dụng Android, vì phần lớn ứng dụng Android đều 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 các giao diện người dùng web khác nhau 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 từ 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 được 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 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ần lưu ý hai điểm cập nhật sau:
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.
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. Để thực hiện việc này, hãy tham gia chương trình kiểm tra WebView Beta trên Cửa hàng Google Play và thiết bị của bạn sẽ được đăng ký tự động.
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 một 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 chữ viết tay trong các trường nhập văn bản HTML cũng như 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 chữ viết tay trong mục nhập HTML ở phần 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 của mình mà không phải hiển thị nội dung trên web, chẳng hạn như khi chia sẻ logic kinh doanh trên web và các ứng dụng dành cho thiết bị 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 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 mã WebAssembly mà không cần tạo phiên bản WebView. Ưu điểm lớn của công cụ JavaScript mới là công cụ này thực thi JavaScript của bạn trong một quy trình khác, giúp chạy JavaScript trong ứng dụng một cách an toàn và ổn định. Công cụ này cũng yêu cầu ít tài nguyên hơn so với phiên bản 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
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ểm thú vị về Thẻ tuỳ chỉnh là bạn có thể tạo kiểu cho phù hợp với giao diện của ứng dụng, thêm khả năng 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.
Một phần thẻ tuỳ chỉnh
Tính năng tuỳ chỉnh Thẻ tuỳ chỉnh đã được nâng cấp đáng kể với sự hỗ trợ cho Thẻ tuỳ chỉnh một phần. Chúng cho phép người dùng làm nhiều việc cùng lúc giữa các ứng dụng và trên 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 nội dung trên web và ứng dụng 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, chuyển phiên hoạt động đến 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.
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 2003. 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.
Đo lường tín hiệu tương tác
Cập nhật quan trọng thứ hai cho Thẻ tuỳ chỉnh là đo lường mức độ tương tác của người dùng theo phiên cụ thể. 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ả các đường liên kết, chẳng hạn như trong một nguồn cấp tin tức, thì liệu bạn có thể biết được đường liên kết nào mà người dùng thấy có giá trị và đường liên kết nào thì 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 lưu lại trên trang, giờ đây bạn cũng có thể xem thông tin về 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 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 tìm hiểu 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 dễ dàng hơn trong 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 trình chạy dịch vụ theo yêu cầu khi cài đặt trên Android và Chrome. Ngoài ra, Chrome sẽ bỏ qua việc bắt đầu 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 bài đánh giá đó và vui lòng đưa ra ý 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 ra rằng mình có thể giúp nhà phát triển giảm bớt khối lượng công việc và đảm bảo rằng những ứng dụng này đem lại trải nghiệm tốt cho người dùng cài đặt ngay từ đầu. Đó là lý do Chrome thêm trải nghiệm ngoại tuyến mặc định. Giao diện này sẽ hiện màn hình có biểu tượng của ứng dụng để người dùng biết rằng họ hiện không có kết nối mạng mà không yêu cầu nhà phát triển phải làm gì thêm.
Tất nhiên, bạn vẫn có thể sử dụng API worker để tạo trải nghiệm tuỳ chỉnh khi không có mạng 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 vào 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 có vẻ như TWA có vẻ như 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 của mình.
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. Tức là các API này hỗ trợ mọi 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:
Xuất bản lên Google Play để cho phép ứng dụng của bạn truy cập vào khả năng hiển thị và phân phối trên Google Play. Có quyền truy cập vào API Play Billing. API này cho phép nhà phát triển quản lý hoạt động bán hàng hoá kỹ thuật số trong ứng dụng của họ, giúp thiết lập sản phẩm, chương trình giảm giá, gói thuê bao và nhiều hoạt động khác một cách dễ dàng hơn. Uỷ quyền quyền thông báo và định vị vị trí 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 để 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 tuỳ chọn để nhúng nội dung trên web vào ứng dụng và tất cả những tuỳ chọn này đều không ngừng được cải thiện.