Как настроить сетевое подключение с использованием JavaScript и Network Information API

Как настроить сетевое подключение с использованием JavaScript и Network Information API

От автора: Navigator.connection.effectiveType полезен для доставки различных активов на основе качества сетевого подключения пользователя.

Давайте рассмотрим, как настроить сетевое подключение. ЕffectiveType является свойством Network Information API, доступным для JavaScript через объект navigator.connection.

В Chrome вы можете ввести в DevTools следующее, чтобы увидеть эффективный тип подключения (ECT):

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Возможными значениями для эффективного типа являются «slow-2g», «2g», «3g» или «4g». При медленных соединениях эта функция позволяет вам улучшить скорость загрузки страниц, предоставляя более соответствующие версии ресурсов.

До Chrome 62 мы указывали разработчикам теоретический тип сетевого подключения (через navigator.connection.type), а не качество сети, с которым фактически имеет дело клиент.

В настоящее время реализация эффективного типа соединения Chrome определяется комбинацией недавно наблюдаемых значений времени приема-передачи (rtt) и значений скорости скачивания.

Он определяет измеренную производительность сети, к которой тип сотового соединения (например, 2G) наиболее близок, даже если фактическое соединение — WiFi. То есть, если вы пользуетесь WiFi в Starbucks, но ваш фактический эффективный тип сети — 2G или 3G.

Как реагировать на изменения в качестве сети? Мы можем использовать прослушиватель событий connection.onchange для мониторинга изменений соединения:

Ниже приведен простой тест, в котором я эмулировал в DevTools профиль «Low-end mobile» и мог переключаться с «4g» на «2g»:

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

effectiveType поддерживается в Chrome, Opera и Firefox на Android. Ряд других подсказок по качеству сети доступен для navigator.connection, включая rtt, downlink и downlinkMax.

Я использовал effectiveType в проекте с открытым исходным кодом на Vue.js Google Doodles. Используя привязку данных, мы смогли устанавливать для свойства connection либо fast, либо slow, основываясь на значениях ECT. Если обобщенно:

Это позволило нам условно отображать различные выходные данные (видео или изображение с низким разрешением) в зависимости от типа подключения пользователя.

Макс Бёк написал интересную статью о компонентах мониторинга сети, использующих React. Он также описал, как отображать различные компоненты на основе скорости сети:

Примечание. Вы можете сочетать эффективный тип с Service Workers для адаптации, помимо медленных соединений, к состояниям, когда пользователи отключены от сети.

Для отладки вы можете переопределить оценку качества сети, используя флаг Chrome «force-effective-connection-type», который можно установить в chrome://flags. Эмуляция сети в DevTools может обеспечить ограниченный опыт отладки для ECT.

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

Автор: Addy Osmani

Источник: https://dev.to/

Редакция: Команда webformyself.

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Full-Stack практика. Создание JavaScript блога

Создание веб-приложения с нуля на JavaScript, NodeJS, ExpressJS

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree