Có nhiều lý do để nhà phát triển đưa web sang Android: có thể sử dụng lại một 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. Bất kể trường hợp sử dụng là gì, Android có nhiều công cụ giúp bạn đạt được điều này.
Dưới đâ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ợ kéo và thả hình ảnh trong WebView.
- Thẻ tuỳ chỉnh hiện hỗ trợ một phần các thẻ tuỳ chỉnh.
- Các tính năng tích hợp cho PWA, như Giao diện người dùng cài đặt phong phú hơn và API thanh toán trên Play trong Hoạt động đáng tin cậy trên web.
Hãy cùng tìm hiểu kỹ hơn nhé.
WebView
WebView là cách phổ biến nhất để nhúng nội dung trên web vào các ứng dụng Android, vì phần lớn các ứ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 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 thế mạnh lớn nhất của WebView là API mạnh mẽ giúp kiểm soát và sửa đổi nội dung trên web đang được tải. Vậy có gì mới trong WebView?
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 dùng WebView để nhúng nội dung trên 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. Tức là mỗi yêu cầu đều bao gồm thông tin cụ thể về bối cảnh người dùng đang sử dụng nội dung trên web và để lộ 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 một bản thử nghiệm ngừng hoạt động nhằm 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 lựa chọn tham gia mới để 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 sẽ tận dụng được cả hai tính năng này: bạn có thể tiếp tục hỗ trợ các tính năng hiện có 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 tất cả các trường hợp khác. Nếu muốn duy trì hoạt động hiện tại, bạn cũng có thể đăng ký dùng thử theo nguyên gốc X-Yêu cầu có ngừng sử dụng.
WebSettingsCompat.setRequestedWithHeaderOriginAllowList(
demoWebview.getSettings(), Collections.singleton("https://example.com")
);
Kiểm thử WebView
Chủ đề tiếp theo là thử nghiệm. 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 qua WebView, thì sau đây là hai nội dung cập nhật dành cho bạn:
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 truy cập vào các tính năng mới hoặc thử nghiệm trong Chrome. Bạn có thể sử dụng những tính năng này để dùng thử tính năng mới trước khi chúng tôi cung cấp tính năng đó 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. Tuy nhiên, kể từ Chrome M110, bản dùng thử theo nguyên gốc cũng hoạt động trong WebView.
Việc cài đặt WebView Beta hiện đã dễ dàng hơn nhiều. Bạn nên thử nghiệm trang web của mình bằng cách sử dụ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 thử nghiệm WebView trên Cửa hàng Google Play và thiết bị của bạn sẽ tự động được đăng ký.
Hỗ trợ thiết bị có màn hình lớn
Mục tiêu của chúng tôi là làm cho 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 hình ảnh từ WebView vào một ứng dụng khác.
Rất dễ để 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>
Đối với thiết bị có màn hình lớn, Chrome và WebView trên Android U sẽ hỗ trợ đầy đủ chữ viết tay trong các trường nhập văn bản HTML và cử chỉ nhập để xoá văn bản hoặc thêm dấu cách. Hỗ trợ chữ viết tay đã có sẵn cho tất cả các thiết bị Samsung có One UI 5.1, 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 dữ liệu nhập HTML trong 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 cần phải hiển thị bất kỳ nội dung web nào; ví dụ: khi chia sẻ logic nghiệp vụ trên web và ứng dụng dành cho thiết bị di động. Để giúp việc này 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 phiên bản 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 phiên bản WebView. Điều tuyệt vời ở công cụ JavaScript mới là thực thi JavaScript theo một quy trình khác, giúp chạy JavaScript trong ứng dụng của bạn một cách an toàn và ổn định. Công cụ này cũng đòi hỏi í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 là giải pháp lý tưởng để tích hợp giao diện người dùng web vào ứng dụng của bạn. Còn việc cho phép người dùng duyệt xem nội dung trên web trong ứng dụng của bạn thì sao?
Đây là 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 để giúp người dùng xem nội dung trên web trong ứng dụng của bạn. Ưu điểm lớn của tính năng này là người dùng không cần đăng nhập lại vào những trang web họ yêu thích. Bởi vì các dịch vụ này là một phiên bản của trình duyệt mặc định của người dùng và cookie đang được chia sẻ, đồng thời chúng cung cấp tất cả các API và tính năng trên nền tảng web được 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ì một thẻ tuỳ chỉnh sẽ được mở trong Chrome; nếu trình duyệt mặc định là Firefox, thì một Thẻ tuỳ chỉnh sẽ được 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.
Ưu điểm nổi bật của 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.
Thẻ tuỳ chỉnh một phần
Bản tuỳ chỉnh Thẻ tuỳ chỉnh đã có bản nâng cấp lớn, đồng thời hỗ trợ Thẻ tuỳ chỉnh một phần. Chúng cho phép người dùng thực hiện đa nhiệm giữa ứng dụng và web. Cho đến nay, khi bạn 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 cùng lúc với ứng dụng và nội dung trên web. 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ỉ nhìn 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ày đế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 các 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. Bằng cách này, 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 trên web mà không làm gián đoạn trải nghiệm tự nhiên trong ứng dụng.
Nhưng 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 nỗ lực để trải nghiệm Thẻ tuỳ chỉnh mới song song với nhau cho chế độ ngang và thiết bị có màn hình lớn. Bằng việc xác định chiều rộng tối đa của thẻ, 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 kiểm tra mã nguồn của ứng dụng ví dụ Thẻ tuỳ chỉnh trong Chromium.
Đo lường tín hiệu tương tác
Cập nhật lớn 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 nguồn cấp tin tức), thì thật tuyệt nếu bạn có thể cho người dùng biết đường liên kết nào có giá trị và đường liên kết nào thì không? Thông tin này có thể thực sự hữu ích khi bạn muốn ưu tiên hiển thị đường liên kết nào cho người dùng.
Nhóm Chrome đã thêm chế độ hiển thị chỉ số theo phiên cụ thể vào Thẻ tuỳ chỉnh của Chrome. Ngoài khoảng thời gian người dùng ở lại trên một trang, giờ đây, bạn cũng có thể xem 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 bắt đầu có sẵn kể từ Chrome 114 và cần có 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 các tín hiệu tương tác.
PWA
Ngoài ra còn có bản cập nhật trong PWA – một bộ công nghệ giúp bạn có thể 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ài đặt được: ứng dụng này sẽ hoạt động dọc theo các ứng dụng nền tảng khác, trên màn hình chính, trình chạy, chế độ 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; chúng 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 cứ thiết bị nào họ chọn. Xây dựng 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ó ứng dụng Android gốc, mà đó là một lựa chọn khác để đưa web vào Android.
Hãy cùng tìm hiểu một số tính năng giúp ứng dụng web dễ cài đặt trong Android.
Chúng tôi muốn hỗ trợ người dùng cài đặt các 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 để 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. Vui lòng chú ý đến các thành phần đó và chia sẻ ý kiến phản hồi.
Nhà phát triển đưa ra yêu cầu về trình chạy dịch vụ để 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 mã này để tạo một trang thông báo cho người dùng rằng họ không thể dùng ứng dụng khi không có kết nối mạng.
Chúng tôi nhận thấy có thể giảm bớt khối lượng công việc cho nhà phát triển, đồng thời đảm bảo rằng những ứng dụng này đem lại trải nghiệm cài đặt tốt ngay từ đầu. Đó là lý do Chrome thêm trải nghiệm ngoại tuyến mặc định cho người dùng thấy màn hình có biểu tượng của ứng dụng, cho người dùng biết rằng họ đang không kết nối mạng mà không yêu cầu nhà phát triển phải làm gì khác.
Tất nhiên, API trình chạy dịch vụ vẫn dùng được để 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 chỉn chu cho Android là Giao diện người dùng cài đặt phong phú hơn. Bằng cách thêm 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 với thông tin mà cửa hàng ứng dụng cho thấy để mô tả ứng dụng của bạn.
Chúng tôi cũng có lối tắt. Khi bạn thêm một mảng có tên là shortcuts, mã này 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 những thao tác này bằng cách nhấn và giữ biểu tượng ứng dụng.
Khi bạn dùng các API Chia sẻ trên web và Mục tiêu chia sẻ web, ứng dụng của bạn có thể tương tác với những ứng dụng khác, như mọi ứng dụng khác trên nền tảng. Ứ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 thuyết trình I/O “Web: Nền tảng cho sự phát triển của bạ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 web đáng tin cậy (TWA).
TWA là cách tốt nhất để hiển thị nội dung trên web của bên thứ nhất ở chế độ toàn màn hình trong ứng dụng của bạn. Đây là giải pháp lý tưởng cho những nhà phát triển muốn tổng hợp ứng dụng web dưới dạng một ứng dụng Android, hoặc muốn sử dụng trang web của mình trong một ứng dụng Android.
Xin lưu ý rằng 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 đơn lẻ trên web và đưa hoạt động đó vào ứng dụng Android của mình.
Hoạt động đáng tin cậy trên web đượ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 thấy trong trình duyệt, ngoại trừ hoạt động 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 API này hỗ trợ tất cả các tính năng và API trên nền tảng web mà trình duyệt hỗ trợ.
Một số ưu điểm của việc gói ứng dụng web bằng TWA là:
Phát hành lên Google Play – qua đó cho phép ứng dụng của bạn tiếp cận phạm vi hiển thị và phạm vi phân phối trên Google Play. Có quyền truy cập vào API Play Billing. Đây là API 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, giao dịch bán, gói thuê bao và các thông tin khác một cách dễ dàng hơn. Uỷ quyền thông báo và quyền truy cập vào thông tin đị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 ContactDirect đã sử dụng TWA để mang lại lợi ích cho người dùng và tăng tỷ lệ chuyển đổi lên gấp 3 lần.
Kết luận
Như bạn đã thấy, có nhiều tuỳ chọn để nhúng nội dung web vào ứng dụng và tất cả các tuỳ chọn này đều liên tục được cải tiến.