Trình duyệt trong ứng dụng mang đến cho người dùng trải nghiệm đầy đủ trên web mà không cần rời khỏi ứng dụng của bạn. Android cung cấp 2 API chính để triển khai trình duyệt trong ứng dụng: Thẻ tuỳ chỉnh và WebView. Hãy sử dụng trình duyệt trong ứng dụng khi bạn có một đường liên kết hoặc quảng cáo dẫn đến một trang web. Bạn có thể mở trang đó ngay trong ứng dụng của mình, như bạn có thể thấy trong Hình 1.
Việc chọn giữa Thẻ tuỳ chỉnh và WebView là một quyết định quan trọng về cấu trúc ảnh hưởng đến tốc độ phát triển, trải nghiệm người dùng và mức độ kiểm soát của bạn đối với giao diện người dùng.
So sánh nhanh
Hãy sử dụng bảng sau đây để giúp bạn quyết định công cụ nào phù hợp với nhu cầu của mình:
| Tính năng | WebView | Tab tùy chỉnh |
|---|---|---|
| Trường hợp sử dụng chính | Xây dựng ứng dụng kết hợp với web làm nội dung chính hoặc nội dung hỗ trợ, hiển thị quảng cáo, chiến dịch trong ứng dụng hoặc trang điều khoản dịch vụ. | Hiển thị nội dung từ các trang web bên ngoài (như bài viết tin tức hoặc trang sản phẩm). |
| Thành phần điều khiển trên giao diện người dùng | Toàn bộ. Đây là thành phần View mà bạn có thể đặt ở bất cứ đâu. Bạn kiểm soát tất cả giao diện người dùng xung quanh. |
Hạn chế. Bạn có thể tạo chủ đề cho màu thanh công cụ và thêm một vài thao tác tuỳ chỉnh. |
| Dữ liệu và phiên | Hộp cát. Trình duyệt này không chia sẻ cookie hoặc thông tin đăng nhập với trình duyệt chính của người dùng. | Chia sẻ. Trình duyệt này sử dụng phiên trình duyệt mặc định của người dùng, bao gồm cả cookie và mật khẩu đã lưu. |
| Cầu nối gốc <-> Web | Có. Bạn có thể sử dụng cầu nối JavaScript để giao tiếp hai chiều, chuyên sâu giữa nội dung web và mã ứng dụng gốc. | Hạn chế. Bạn có thể sử dụng phương thức window.postMessage() để truyền chuỗi cơ bản. |
| Nỗ lực của nhà phát triển | Cao. Bạn cần tự quản lý vòng đời, hoạt động điều hướng và hiệu suất. | Thấp. Bạn có thể triển khai tính năng này chỉ với vài dòng mã. |
WebView
WebView là một thành phần hiển thị giúp các trang web trở thành một phần không thể thiếu trong bố cục của ứng dụng. Thành phần này mạnh mẽ nhưng phức tạp hơn một chút so với Thẻ tuỳ chỉnh.
WebView có thể tải nội dung web từ xa hoặc cục bộ, thực thi JavaScript và cho phép giao tiếp hai chiều giữa nội dung web và mã ứng dụng gốc. Để tìm hiểu thêm về các tính năng của thành phần này, hãy xem bài viết Những việc WebView có thể làm.
Bạn cũng có thể sử dụng WebView để phân phối ứng dụng web hoặc hiển thị trang web trực tuyến như một phần của ứng dụng. Ví dụ: thoả thuận người dùng cuối mà bạn cần cập nhật định kỳ. Để tìm hiểu thêm, hãy xem bài viết Xây dựng ứng dụng web trong WebView.
Lý do bạn nên chọn WebView
Sau đây là một số trường hợp mà WebView phù hợp:
- Ứng dụng kết hợp: Bạn đang xây dựng một ứng dụng trong đó nội dung trên web và các thành phần gốc (như thanh điều hướng hoặc nút hành động nổi) nằm cạnh nhau.
- Nội dung của bên thứ nhất: Nội dung web của bạn là một phần cốt lõi, có tính tương tác trong trải nghiệm ứng dụng, chẳng hạn như trình chỉnh sửa tài liệu hoặc canvas thiết kế.
- Kiểm soát toàn bộ giao diện người dùng: Bạn cần sửa đổi nội dung của chính trang web hoặc lớp phủ các phần tử trên giao diện người dùng gốc lên trên.
- Phân tích chuyên sâu: Bạn cần thông tin chi tiết về mức độ tương tác và hoạt động của người dùng trong thành phần hiển thị web.
Các lựa chọn đánh đổi chính
Sau đây là một số lựa chọn đánh đổi chính cần cân nhắc khi sử dụng WebView:
- Hiệu suất: WebView có thể tốn nhiều bộ nhớ. Nếu không quản lý cẩn thận, bạn có thể gặp phải các vấn đề về hiệu suất hoặc lỗi ANR (Ứng dụng không phản hồi).
- Bảo mật và bảo trì: Bạn có trách nhiệm tăng cường tính bảo mật và quản lý vòng đời. Tuy nhiên, các bản cập nhật WebView được ra mắt trên toàn cầu thông qua Google Play, vì vậy, bạn không phải lo lắng về việc công cụ cơ bản bị lỗi thời.
Tab tùy chỉnh
Thẻ tuỳ chỉnh là lựa chọn tuyệt vời để hướng người dùng đến các URL bên ngoài, vì chúng cung cấp một cửa sổ trình duyệt nhanh, an toàn và thân thiện với người dùng, trượt qua ứng dụng của bạn.
Lý do bạn nên chọn Thẻ tuỳ chỉnh
Sau đây là một số trường hợp mà Thẻ tuỳ chỉnh phù hợp:
- Đường liên kết bên ngoài: Khi người dùng nhấn vào một đường liên kết đến một trang web mà bạn không sở hữu, Thẻ tuỳ chỉnh sẽ giữ họ trong bối cảnh của ứng dụng, đồng thời mang đến trải nghiệm trình duyệt toàn năng.
- Dễ dàng tích hợp: Đây là cách đơn giản nhất để thiết lập và chạy trải nghiệm web nhúng.
- Trạng thái chia sẻ: Vì chia sẻ cookie với trình duyệt mặc định của người dùng, nên người dùng không phải đăng nhập lại vào các trang web mà họ đã truy cập.
- Đăng nhập bằng bên thứ ba: Các thẻ này phù hợp với quy trình đăng nhập bằng bên thứ ba (chẳng hạn như "Đăng nhập bằng Google" hoặc "Đăng nhập bằng Facebook") vì trình duyệt xử lý thông tin xác thực một cách an toàn.
Mặc dù hầu hết các trình duyệt đều hỗ trợ Thẻ tuỳ chỉnh, nhưng một số trình duyệt cung cấp nhiều tính năng tuỳ chỉnh hơn những trình duyệt khác. Để biết thêm thông tin, hãy xem bài viết Hỗ trợ trình duyệt.
Sử dụng nội dung web trong Jetpack Compose
Bạn có thể sử dụng cả Thẻ tuỳ chỉnh và WebView khi xây dựng bằng Jetpack Compose:
- Thẻ tuỳ chỉnh: Vì Thẻ tuỳ chỉnh sử dụng
Intent, nên bạn có thể khởi chạy các thẻ này từ bất kỳContextnào trong các hàm Compose, giúp tích hợp liền mạch. - WebView: Compose chưa có thành phần kết hợp WebView gốc, vì vậy, bạn
cần sử dụng
AndroidViewđể nhúng WebView tiêu chuẩn vào bố cục.
Tài nguyên khác
Để phát triển các trang web cho thiết bị chạy Android bằng cách sử dụng API WebView hoặc Thẻ tuỳ chỉnh, hãy xem các tài liệu sau:
- Nhúng nội dung web vào ứng dụng của bạn dưới dạng nội dung chính hoặc nội dung hỗ trợ
- Tài liệu tham khảo API: WebView
- Tổng quan về Thẻ tuỳ chỉnh
- Tổng quan về Hoạt động đáng tin cậy trên web
- Hỗ trợ trình duyệt