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

Дата публикации: 2018-10-30

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

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

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

console.log(navigator.connection.effectiveType); // 4G

1	console.log(navigator.connection.effectiveType); // 4G

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

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

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

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

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

function onConnectionChange() {
    const { rtt, downlink, effectiveType,  saveData } = navigator.connection;

    console.log(`Effective network connection type: ${effectiveType}`);
    console.log(`Downlink Speed/bandwidth estimate: ${downlink}Mb/s`);
    console.log(`Round-trip time estimate: ${rtt}ms`);
    console.log(`Data-saver mode on/requested: ${saveData}`);
}

navigator.connection.addEventListener('change', onConnectionChange)

function onConnectionChange() {

const { rtt, downlink, effectiveType, saveData } = navigator.connection;

console.log(`Effective network connection type: ${effectiveType}`);

console.log(`Downlink Speed/bandwidth estimate: ${downlink}Mb/s`);

console.log(`Round-trip time estimate: ${rtt}ms`);

console.log(`Data-saver mode on/requested: ${saveData}`);

}

navigator.connection.addEventListener('change', onConnectionChange)

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

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

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

if (/\slow-2g|2g|3g/.test(navigator.connection.effectiveType)) {
  this.connection = "slow";
} else {
  this.connection = "fast";
}

if (/\slow-2g|2g|3g/.test(navigator.connection.effectiveType)) {

this.connection = "slow";

} else {

this.connection = "fast";

}

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

<template>
      <div id="home">
        <div v-if="connection === 'fast'">
          <!-- 1.3MB video -->
          <video class="theatre" autoplay muted playsinline control>
            <source src="/static/img/doodle-theatre.webm" type="video/webm">
            <source src="/static/img/doodle-theatre.mp4" type="video/mp4">
          </video>
        </div>
        <!-- 28KB image -->
        <div v-if="connection === 'slow'">
          <img class="theatre" src="/static/img/doodle-theatre-poster.jpg">
        </div>
      </div>
   </template>

</video>

</div>

</div>

</template>

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

switch(connectionType) {
            case '4g':
                return <Video src={videoSrc} />

            case '3g':
                return <Image src={imageSrc.hires} alt={alt} />

            default:
                return <Image src={imageSrc.lowres} alt={alt} />
        }

switch(connectionType) {

case '4g':

return <Video src={videoSrc} />

case '3g':

return <Image src={imageSrc.hires} alt={alt} />

default:

return <Image src={imageSrc.lowres} alt={alt} />

}

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

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

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

Автор: Addy Osmani

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

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

Метки: JavaScript