Trang này được dịch bởi Cloud Translation API.

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 diễn ra suôn sẻ khi bạn sử dụng mạng có tốc độ cao, nhưng khi bạn đang di chuyển với gói dữ liệu có giới hạn và kết nối không ổn định, hoặc bị mắc kẹt với máy tính xách tay trên Wi-Fi chậm của quán cà phê, thì mọi chuyện sẽ 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

Nguồn

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 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.
Hãy 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 một việc gì đó (chẳng hạn như xem video) qua mạng di động có thể khiến họ 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 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)".

Đường liên kết để tải phiên bản Gmail HTML cơ bản khi người dùng có 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 khách. 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 có hiệu lực, 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`	Giá trị boolean xác định xem người dùng có yêu cầu chế độ giảm mức sử dụng dữ liệu 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:

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

Các giá trị effectiveType cũng được cung cấp qua Gợi ý về ứng dụng và cho phép bạn truyền đạt loại kết nối của trình duyệt với 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 các 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 để bắt đầu lại quá trình chuyển khi phát hiện thấy các đ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);

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. Hơn hết, bạn có thể sử dụng phương pháp này làm kỹ thuật nâng cao tăng dần.