Адаптивное обслуживание на основе качества сети

Милица Михайлия

Загрузка веб-сайта может быть совершенно разной в зависимости от условий сети. Обычно все проходит гладко, когда вы подключены к быстрой сети, но когда вы находитесь в пути с ограниченным тарифным планом и нестабильным соединением или используете ноутбук с медленным Wi-Fi в кафе, это совсем другая история.

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

Поддержка браузера

  • Хром: 61.
  • Край: 79.
  • Firefox: не поддерживается.
  • Сафари: не поддерживается.

Источник

Использование

Есть много способов использовать эту сетевую информацию для улучшения взаимодействия с пользователем:

  • Переключайтесь между предоставлением контента высокой и низкой четкости в зависимости от сети пользователя.
  • Решите, следует ли предварительно загружать ресурсы.
  • Откладывайте загрузку и скачивание, когда у пользователей медленное соединение.
  • Включите автономный режим, если качество сети недостаточно хорошее для загрузки приложения и использования функций.
  • Предупреждайте пользователей, что какие-либо действия (например, просмотр видео) по сотовой сети могут стоить им денег.
  • Используйте его в своей аналитике для сбора данных о качестве сети ваших пользователей.

Многие приложения уже делают нечто подобное. Например, YouTube, Netflix и большинство других сервисов видео (или видеозвонков) автоматически регулируют разрешение во время потоковой передачи. Когда Gmail загружается, он предоставляет пользователям ссылку «загрузить базовый HTML (для медленных соединений)».

Ссылка для загрузки базовой HTML-версии Gmail, когда у пользователей медленное соединение.

Как это работает

Объект navigator.connection содержит информацию о соединении клиента. Его свойства описаны в таблице ниже.

Свойство Объяснение
downlink Оценка пропускной способности в мегабитах в секунду.
effectiveType Действующий тип соединения с возможными значениями 'slow-2g' , '2g' , '3g' или '4g' (охватывает 4g и выше). Определяется на основе комбинации времени прохождения туда и обратно и скорости нисходящей линии связи . Например, быстрая нисходящая линия связи в сочетании с высокой задержкой будет иметь более низкий эффективный тип из-за задержки.
onchange Обработчик событий, который срабатывает при изменении информации о соединении.
rtt Предполагаемая задержка соединения в обоих направлениях в миллисекундах.
saveData Логическое значение, определяющее, запросил ли пользователь режим ограниченного использования данных.

Вот как это выглядит, когда вы запускаете его в консоли браузера:

Консоль Chrome DevTools, отображающая значения свойств объекта navigator.connection

Значения effectiveType также доступны через подсказки клиента и позволяют сообщать серверам тип подключения браузера.

Прослушиватель событий onchange позволяет динамически адаптироваться к изменениям качества сети. Если вы отложили загрузку или загрузку из-за плохого состояния сети, вы можете рассчитывать на то, что прослушиватель событий возобновит передачу, когда он обнаружит улучшение состояния сети. Вы также можете использовать его для уведомления пользователей об изменении качества сети. Например, если они потеряли сигнал Wi-Fi и были отключены от сотовой сети, это может предотвратить случайную передачу данных (и списание средств 💸).

Используйте прослушиватель событий onchange так же, как и любой другой прослушиватель событий:

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

Заключение

Потенциальные преимущества API сетевой информации велики, особенно для пользователей медленных сетей и приложений, требующих большой пропускной способности. Лучше всего то, что его можно использовать в качестве метода прогрессивного улучшения.