Phân phát thích ứng dựa trên chất lượng mạng

Việc tải một trang web có thể mang lại trải nghiệm rất khác nhau tuỳ thuộc vào điều kiện mạng. Mọi thứ thường diễn ra suôn sẻ khi bạn sử dụng mạng tốc độ cao, nhưng khi bạn đang di chuyển với gói dữ liệu có hạn và kết nối không ổn định, hoặc phải dùng máy tính xách tay kết nối với Wi-Fi chậm của quán cà phê, thì mọi chuyện lại khác.

Một cách để giải quyết vấn đề này là điều chỉnh những thành phần bạn đang phân phát cho người dùng dựa trên chất lượng kết nối của họ. Giờ đây, điều này có thể thực hiện được nhờ Network Information API (API thông tin mạng). API này cho phép các ứng dụng web truy cập vào thông tin về mạng của người dùng.

Browser Support

  • Chrome: 61.
  • Edge: 79.
  • Firefox: not supported.
  • Safari: not supported.

Source

Cách sử dụng

Có nhiều cách để bạn có thể sử dụng thông tin mạng này nhằm cải thiện trải nghiệm người dùng:

  • Chuyển đổi giữa việc phân phát nội dung có độ phân giải cao và nội dung có độ phân giải thấp dựa trên mạng của người dùng.
  • Quyết định xem có tải trước tài nguyên hay không.
  • Hoãn tải lên và tải xuống khi người dùng đang sử dụng kết nối chậm.
  • Bật chế độ ngoại tuyến nếu chất lượng mạng không đủ tốt để tải ứng dụng và sử dụng các tính năng.
  • Cảnh báo người dùng rằng việc làm gì đó (ví dụ: xem video) qua mạng di động có thể tốn tiền.
  • Sử dụng chỉ số này trong số liệu phân tích để thu thập dữ liệu về chất lượng mạng của người dùng.

Nhiều ứng dụng đã làm điều tương tự. Ví dụ: YouTube, Netflix và hầu hết các dịch vụ video (hoặc gọi video) khác đều tự động điều chỉnh độ phân giải trong quá trình phát trực tuyến. Khi tải, Gmail sẽ cung cấp cho người dùng một đường liên kết để "tải HTML cơ bản (cho kết nối chậm)".

Đường liên kết để tải phiên bản HTML cơ bản của Gmail khi người dùng sử dụng kết nối chậm

Cách hoạt động

Đối tượng navigator.connection chứa thông tin về kết nối của ứng dụng. Các thuộc tính của nó được giải thích trong bảng bên dưới.

Thuộc tính Giải thích
downlink Băng thông ước tính tính bằng megabit/giây.
effectiveType Loại kết nối hiệu quả, với các giá trị có thể có là 'slow-2g', '2g', '3g' hoặc '4g' (bao gồm cả 4G trở lên). Được xác định dựa trên sự kết hợp giữa thời gian khứ hồi và tốc độ tải xuống. Ví dụ: đường truyền xuống nhanh kết hợp với độ trễ cao sẽ có effectiveType thấp hơn do độ trễ.
onchange Một trình xử lý sự kiện sẽ kích hoạt khi thông tin kết nối thay đổi.
rtt Độ trễ khứ hồi ước tính của kết nối tính bằng mili giây.
saveData Giá trị boolean xác định xem người dùng có yêu cầu chế độ sử dụng dữ liệu thấp hay không.

Sau đây là giao diện của nội dung này khi bạn chạy trong bảng điều khiển của trình duyệt:

Bảng điều khiển Công cụ cho nhà phát triển của Chrome hiển thị các giá trị của thuộc tính đối tượng navigator.connection

Các giá trị effectiveType cũng có sẵn thông qua Gợi ý về ứng dụng khách và cho phép bạn truyền đạt loại kết nối của trình duyệt đến các máy chủ.

Trình nghe sự kiện onchange cho phép bạn tự động điều chỉnh cho phù hợp với những thay đổi về chất lượng mạng. Nếu trì hoãn quá trình tải lên hoặc tải xuống do điều kiện mạng kém, bạn có thể dựa vào trình nghe sự kiện để khởi động lại quá trình chuyển khi trình nghe phát hiện thấy điều kiện mạng tốt hơn. Bạn cũng có thể dùng phương thức này để thông báo cho người dùng khi chất lượng mạng thay đổi. Ví dụ: nếu mất tín hiệu Wi-Fi và chuyển sang mạng di động, thì điều này có thể ngăn chặn việc truyền dữ liệu (và tính phí 💸) ngoài ý muốn.

Sử dụng trình xử lý sự kiện onchange như bạn vẫn làm với mọi trình xử lý sự kiện khác:

navigator.connection.addEventListener('change', doSomethingOnChange);

Kết luận

Network Information API mang lại nhiều lợi ích tiềm năng, đặc biệt là đối với những người dùng sử dụng mạng chậm và các ứng dụng yêu cầu băng thông lớn. Quan trọng nhất là bạn có thể sử dụng kỹ thuật này như một kỹ thuật cải tiến tăng dần.