Alfa Brain
ВойтиЗарегистрироваться

Network Information API – как узнать состояние сети прямо в браузере

Алексей ВечкановАлексей Вечканов•   

В современном мире оптимизация веб-приложений под различные сетевые условия становится ключевым аспектом разработки. Network Information API предоставляет необходимые данные о соединении устройства, помогая разработчикам адаптировать работу приложений в зависимости от качества сети пользователя.

Что такое Network Information API?

Network Information API — это интерфейс, предоставляющий информацию о типе подключения и характеристиках сети пользователя, таких как пропускная способность, тип соединения и задержка. Данный API входит в состав Navigator интерфейса и доступен через объект navigator.connection.

Основные характеристики и возможности

Тип соединения

API предоставляет свойство type, обозначающее тип сети, к которой подключен пользователь. Возможные значения:

- bluetooth
- cellular
- ethernet
- wifi
- wimax
- other
- none (отсутствие сети)

Эффективная пропускная способность

Свойство effectiveType указывает на качество соединения с возможными значениями:

- slow-2g
- 2g
- 3g
- 4g

Ширина канала

Свойство downlink показывает примерную ширину канала в мегабитах в секунду, что позволяет оценить скорость загрузки данных.

Задержка

Свойство rtt (round-trip time) измеряет задержку в миллисекундах, помогая оценить скорость отклика сервера.

Экономия трафика

Свойство saveData указывает, активирован ли режим экономии трафика, что полезно для минимизации объема передаваемых данных.

Практическое использование

Network Information API позволяет адаптировать функциональность приложения. Например, можно уменьшить количество сетевых запросов при медленном соединении. Вот пример использования API:

1if ('connection' in navigator) {
2    const connection = navigator.connection;
3
4    function updateNetworkStatus() {
5        console.log('Тип соединения:', connection.effectiveType);
6        console.log('Задержка:', connection.rtt + 'ms');
7        console.log('Ширина канала:', connection.downlink + 'Mb/s');
8        console.log('Экономия данных:', connection.saveData ? 'Включена' : 'Выключена');
9
10        if (connection.saveData || connection.effectiveType === '2g') {
11            // Принять меры для экономии данных, например, отключить автозагрузку изображений
12        }
13    }
14
15    connection.addEventListener('change', updateNetworkStatus);
16    updateNetworkStatus();
17} else {
18    console.log('Network Information API не поддерживается в этом браузере.');
19}

Примеры использования Network Information API

1. Адаптация изображений и медиа

На медленной сети загружаются облегчённые изображения и превью вместо видео, на быстрой — полное качество. Снижает время первого рендера и расход трафика.

2. Условная загрузка JavaScript

Тяжёлые модули (аналитика, графики, видео-плееры) подгружаются только при хорошем соединении. Улучшает TTI и стабильность SPA.

3. Управление prefetch и preload

Prefetch ресурсов отключается при saveData или 2g/3g, чтобы не ухудшать UX. Часто используется в SEO-ориентированных и e-commerce сайтах.

4. PWA и offline-first сценарии

Фоновая синхронизация и частые запросы откладываются на плохой сети и возобновляются при улучшении соединения.

5. Деградация интерфейса

На медленной сети уменьшается количество анимаций, real-time обновлений и визуальных эффектов, сохраняя отзывчивость интерфейса.

Ограничения и поддержка

Network Information API доступен не во всех браузерах, и его функции могут варьироваться. В большинстве современных версий Chrome и Edge данное API поддерживается, однако в Safari и Firefox — нет.

Заключение

Network Information API — мощный инструмент для улучшения UX и оптимизации использования сетевых ресурсов в веб-приложениях под различные сетевые условия. Однако следует предусмотреть альтернативные решения для браузеров без поддержки этого API.



Поделиться: