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

Milica Mihajlija

Trải nghiệm tải trang web có thể rất khác nhau tuỳ thuộc vào đ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 bị gián đoạn hay bạn bị máy tính xách tay vào mạng Wi-Fi chậm của quán cà phê, thì lại khác.

Một cách để giải quyết vấn đề này là điều chỉnh thành phần mà 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 bằng 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.

Hỗ trợ trình duyệt

• 61
• 79
• x
• x

Nguồn

Cách sử dụng

Bạn có thể sử dụng thông tin mạng này theo nhiều cách để 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 có tải trước tài nguyên hay không.
• Tạm hoãn việc tải lên và tải xuống khi người dùng có 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 một việc gì đó (ví dụ: xem video) qua mạng di động có thể khiến họ mất 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 khi phát trực tuyến. Khi đang 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 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 lớp này đượ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 4G trở lên). Được xác định dựa trên tổ hợp thời gian truyền dữ liệu qua lại và tốc độ đường truyền tải xuống. Ví dụ: đường truyền tải xuống nhanh kết hợp với độ trễ cao sẽ có effectiveType thấp hơn do độ trễ.
onchange	Trình xử lý sự kiện 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	Một boolean xác định xem người dùng có yêu cầu chế độ sử dụng dữ liệu ít hơn hay không.

Khi bạn chạy mã trong bảng điều khiển của trình duyệt, mã này sẽ có dạng như sau:

Các giá trị effectiveType cũng có sẵn thông qua Gợi ý cho ứ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 cho máy chủ.

Lưu ý: Bạn có thể truy cập vào API Thông tin mạng bên trong Trình chạy dịch vụ để thích ứng với các tình huống khi người dùng không có mạng.

Trình nghe sự kiện onchange cho phép bạn tự động điều chỉnh cho phù hợp với các thay đổi về chất lượng mạng. Nếu đã trì hoãn việc 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 để bắt đầu lại quá trình chuyển khi phát hiện điều kiện mạng tốt hơn. Bạn cũng có thể sử dụng thông báo này để thông báo cho người dùng khi chất lượng mạng thay đổi. Ví dụ: nếu tín hiệu Wi-Fi bị mất và bị chuyển sang mạng di động, thì điều này có thể ngăn việc chuyển dữ liệu do nhầm lẫn (và bị tính phí 💸).

Sử dụng trình nghe sự kiện onchange giống như cách bạn sử dụng bất kỳ trình nghe sự kiện nào khác:

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

Lưu ý: API thông tin mạng được hỗ trợ trong các trình duyệt dựa trên Chromium kể từ phiên bản 62.

Kết luận

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