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 khiến họ 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. 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 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 tham khảo bảng sau để quyết định xem công cụ nào phù hợp với nhu cầu của bạn:
| Tính năng | WebView | Tab tùy chỉnh |
|---|---|---|
| Trường hợp sử dụng chính | Tạo ứng dụng kết hợp có web là 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 (chẳng hạn như bài viết tin tức hoặc trang sản phẩm). |
| Thành phần điều khiển giao diện người dùng | Đầy. Đây là một 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. |
Bị hạn chế. Bạn có thể tạo giao diện cho màu thanh công cụ và thêm một số thao tác tuỳ chỉnh. |
| Dữ liệu và phiên | Được đặt trong 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ẻ. Thao tác 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 giữa ứng dụng gốc và web | Có. Bạn có thể sử dụng cầu nối JavaScript để giao tiếp sâu, hai chiều giữa nội dung web và mã ứng dụng gốc. | Bị 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ỉ bằng một vài dòng mã. |
WebView
WebView là một khung 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. Mặc dù mạnh mẽ, nhưng việc xử lý WebView 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 chức năng của WebView, hãy xem bài viết Những việc WebView có thể làm.
Bạn cũng có thể dùng WebView để phân phối một ứng dụng web hoặc hiển thị một trang web trực tuyến trong ứng dụng của mình. Ví dụ: một thoả thuận với 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 Tạo ứ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 tạo một ứng dụng có nội dung web và các thành phần gốc (chẳng hạn 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 trên web của bạn là một phần cốt lõi, mang 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 phủ các phần tử giao diện người dùng gốc lên trên trang web đó.
- 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 chế độ xem web.
Các lựa chọn đánh đổi chính
Sau đây là một số điểm đá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 (lỗi Ứ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 bảo mật và quản lý vòng đời. Tuy nhiên, các bản cập nhật WebView được triển khai trên toàn cầu thông qua Google Play, nên 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 phù hợp để chuyển hướng người dùng đến các URL bên ngoài, vì thẻ này 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 lên trên ứ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 sẽ 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 trang web mà bạn không sở hữu, Thẻ tuỳ chỉnh sẽ giữ họ trong bối cảnh ứng dụng của bạn trong khi mang đến trải nghiệm trình duyệt đầy đủ.
- 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 được nhúng.
- Trạng thái được 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 những trang web mà họ đã truy cập.
- Đăng nhập bằng bên thứ ba: Chúng phù hợp với các 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 đăng nhập 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 lựa chọn tuỳ chỉnh hơn các trình duyệt khác. Để biết thêm thông tin, hãy xem phần Hỗ trợ trình duyệt.
Sử dụng nội dung trên web trong Jetpack Compose
Bạn có thể sử dụng cả Thẻ tuỳ chỉnh và WebView khi tạo bằng Jetpack Compose:
- Thẻ tuỳ chỉnh: Vì Thẻ tuỳ chỉnh sử dụng
Intent, nên bạn có thể 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 dùng
AndroidViewđể nhúng một WebView tiêu chuẩn vào bố cục của mình.
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
- Trình duyệt được hỗ trợ