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.
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)".

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:
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.