Sử dụng nội dung web trong ứng dụng Android

Android cho phép bạn khai thác sức mạnh của web trong ứng dụng. Vì vậy, bạn có thể hưởng lợi từ sự linh hoạt và hiệu quả của việc có thể hiển thị một số loại nội dung nhất định.

Điều này cho phép bạn tích hợp liền mạch nội dung trên web hiện có vào ứng dụng Android, chẳng hạn như để hiển thị nguồn cấp tin tức, hướng dẫn tương tác, quảng cáo hiển thị hoặc thậm chí là lưu trữ một trò chơi nhỏ mà không cần xây dựng mọi thứ từ đầu. Hãy coi đó là một cửa sổ dẫn đến Internet, từ bên trong ứng dụng của bạn. Có hai cách để nhúng nội dung trên web vào ứng dụng:

  • WebView: Thành phần này hiển thị nội dung trên web mà bạn kiểm soát cùng dòng khi bạn muốn có mức độ linh hoạt cao trong việc tuỳ chỉnh hoặc cập nhật giao diện người dùng.
  • Custom Tabs: Trải nghiệm trình duyệt trong ứng dụng đầy đủ do trình duyệt mặc định của người dùng cung cấp (xem phần hỗ trợ trình duyệt) khi người dùng nhấp vào một đường liên kết và bạn muốn giữ họ trong ứng dụng thay vì chuyển sang một trình duyệt bên ngoài, với phần lớn trải nghiệm duyệt web có sẵn.
Ứng dụng Android mở trên Google Play, trong đó chế độ xem web chính được làm nổi bật. Thẻ tuỳ chỉnh mở trang web Android For Developers, được làm nổi bật.
Hình 1. `WebView` (bên trái) và `Thẻ tuỳ chỉnh` (bên phải) được phác thảo.

Tại sao nên nhúng nội dung trên web?

Có một số lợi ích khi nhúng nội dung trên web vào ứng dụng:

  • Hiệu quả: Sử dụng lại mã hiện có trên trang web của bạn. Dựa trên các công nghệ và nội dung web hiện có.
  • Tích hợp: Sử dụng nội dung bên ngoài của nhà cung cấp bên thứ ba, chẳng hạn như nội dung nghe nhìn và quảng cáo, trong ứng dụng của bạn.
  • Tính linh hoạt: Cập nhật nội dung một cách linh động mà không bị ràng buộc vào giao diện người dùng được xác định trước hoặc không cần phát hành bản cập nhật ứng dụng.

Trường hợp sử dụng nội dung trên web

Có 3 trường hợp sử dụng chính khi dùng Web trong ứng dụng Android:

1. Nhúng nội dung trên web vào ứng dụng dưới dạng nội dung chính hoặc nội dung hỗ trợ: Sử dụng WebView

  • Hiển thị nội dung trên web của riêng bạn dưới dạng trải nghiệm chính khi bạn muốn có mức độ linh hoạt cao trong việc tuỳ chỉnh hoặc cập nhật giao diện người dùng.
  • Hiển thị nội dung khác như quảng cáo, điều khoản và quy định pháp lý hoặc nội dung của bên thứ ba khác cùng dòng hoặc dưới dạng cửa sổ trong trải nghiệm trong ứng dụng của bạn.
Ứng dụng Android mở Google Play, trong đó chế độ xem web chính được đánh dấu trong hộp màu đỏ Ứng dụng Android mở ra kèm theo văn bản hỗ trợ trong hộp màu đỏ.
Hình 2. Nội dung trên web được nhúng trong ứng dụng có `WebView`là nội dung chính (bên trái) và nội dung hỗ trợ (bên phải).

2. Duyệt web trong ứng dụng bằng Custom Tabs hoặc WebView cho các trường hợp sử dụng nâng cao hơn

  • Có trải nghiệm duyệt web đầy đủ trong ứng dụng khi người dùng nhấp vào một đường liên kết và bạn muốn giữ họ trong ứng dụng thay vì chuyển sang trình duyệt bên ngoài.
    • Lưu ý: Đối với các thiết bị màn hình lớn như máy tính bảng và thiết bị có thể gập lại, có các tuỳ chọn bổ sung để giúp ứng dụng tận dụng không gian bổ sung:
    • Ứng dụng có thể mở đường liên kết web ở chế độ chia đôi màn hình bằng cách khởi chạy trải nghiệm nhiều cửa sổ liền kề. Điều này cho phép người dùng thực hiện đa nhiệm giữa ứng dụng của bạn và trình duyệt cùng một lúc. HOẶC
    • Custom Tabs có một lựa chọn bảng điều khiển bên có thể mở trong cùng một tác vụ, nhưng bên cạnh nội dung ứng dụng hiện có.
  • Custom Tab được hỗ trợ bởi trình duyệt mặc định của người dùng, đối với các trình duyệt hỗ trợ Custom Tabs.
    • Mặc dù bạn có thể sử dụng WebView và cung cấp trải nghiệm trình duyệt trong ứng dụng có khả năng tuỳ chỉnh cao, nhưng bạn nên dùng Custom Tabs để có trải nghiệm trình duyệt độc đáo và chuyển đổi liền mạch khi người dùng muốn mở một đường liên kết trang web trong trình duyệt.
Trang web có đường liên kết trong ứng dụng trong hộp màu đỏ ở bên trái và trình duyệt trong ứng dụng xuất hiện ở bên phải.
Hình 3. Nhấp vào một đường liên kết trong ứng dụng (bên trái) và mở trình duyệt trong ứng dụng (bên phải).

3. Quy trình đăng nhập hoặc xác thực trong ứng dụng của bạn

Phương pháp đề xuất của Android là xây dựng quy trình đăng nhập hoặc xác thực bằng Trình quản lý thông tin xác thực. Nếu bạn thấy mình vẫn cần sử dụng Embedded Web cho những trải nghiệm này, hãy làm theo hướng dẫn sau:

  • Một số ứng dụng sử dụng WebView để cung cấp quy trình đăng nhập cho người dùng, bao gồm cả việc sử dụng tên người dùng và khoá truy cập (hoặc mật khẩu) dành riêng cho ứng dụng của bạn. Điều này cho phép nhà phát triển hợp nhất các quy trình xác thực trên nhiều nền tảng.
  • Khi liên kết với nhà cung cấp danh tính bên thứ ba hoặc trải nghiệm đăng nhập, chẳng hạn như "Đăng nhập bằng…", bạn nên sử dụng Custom Tabs. Việc chạy Custom Tab giúp bảo vệ thông tin đăng nhập của người dùng bằng cách tách biệt thông tin đó với trang web bên thứ ba.

Để biết thêm thông tin về cách sử dụng WebView để xác thực, hãy xem bài viết Xác thực người dùng bằng WebView. Để chạy Custom Tab, hãy xem bài viết Tổng quan về Thẻ tuỳ chỉnh của Android.

Trường đăng nhập trong ứng dụng có WebView ở bên trái. Đăng nhập qua bên thứ ba bằng Thẻ tuỳ chỉnh ở bên phải.
Hình 4. Trường đăng nhập trong ứng dụng (bên trái) và thông tin đăng nhập của bên thứ ba được mở trong một `Thẻ tuỳ chỉnh` (bên phải).