Việc tải một trang web có thể là một trải nghiệm rất khác tuỳ thuộc vào các điều kiện mạng. Mọi thứ thường mượt mà khi bạn dùng mạng nhanh. Tuy nhiên, khi bạn đang di chuyển với gói dữ liệu hạn chế và kết nối không ổn định, hoặc bạn đang sử dụng máy tính xách tay có kết nối Wi-Fi chậm tại quán cà phê thì chuyện khác lại khác.
Có một cách để xử lý 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, bạn có thể thực hiện việc này với API thông tin mạng 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 để 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à độ 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 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 làm gì đó (ví dụ: xem video) qua mạng di động có thể khiến họ tốn tiền.
- Hãy sử dụng API này trong Analytics để thu thập dữ liệu về chất lượng mạng của người dùng.
Nhiều ứng dụng đang thực hiện hoạt động tương tự. Ví dụ: YouTube, Netflix và hầu hết các dịch vụ gọi video (hoặc gọi video) khác tự động điều chỉnh độ phân giải trong khi 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 (dành cho kết nối chậm)".
Cách thức hoạt động
Đối tượng navigator.connection chứa thông tin về kết nối của ứng dụng. Thuộc tính của hàm được giải thích trong bảng bên dưới.
| Tài sản | 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ả, có thể có các giá trị 'slow-2g', '2g', '3g' hoặc '4g' (bao gồm 4g trở lên). Được xác định dựa trên tổ hợp thời gian khứ hồi và tốc độ đường xuống. Ví dụ: đường xuống nhanh kết hợp với độ trễ cao sẽ có hiệu quả thấp hơn do độ trễ. |
onchange |
Trình xử lý sự kiện sẽ kích hoạt khi thông tin kết nối thay đổi. |
rtt |
Độ trễ trọn vòng ướ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 giảm thiểu hay không. |
Sau đây là ví dụ minh hoạ khi bạn chạy ứng dụng nà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 ý ứng dụng và cho phép bạn thông báo loại kết nối của trình duyệt với máy chủ.
Trình nghe sự kiện onchange cho phép bạn linh độ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 phát hiện thấy điều kiện mạng tốt hơn. Bạn cũng có thể dùng trường này để thông báo cho người dùng khi chất lượng mạng thay đổi. Ví dụ: nếu thiết bị bị mất tín hiệu Wi-Fi và bị rớt xuống một mạng di động, thì điều này có thể ngăn việc vô tình chuyển dữ liệu (và tính phí 💸).
Sử dụng trình nghe sự kiện onchange giống như bất kỳ trình nghe sự kiện nào khác:
navigator.connection.addEventListener('change', doSomethingOnChange);
Kết luận
Lợi ích tiềm năng của API thông tin mạng là rất lớn, đặc biệt đối với người dùng trên các mạng chậm và ứng dụng cần nhiều băng thông. Hơn hết, bạn có thể sử dụng kỹ thuật này dưới dạng một kỹ thuật nâng cao tăng dần.