От автора: Navigator.connection.effectiveType полезен для доставки различных активов на основе качества сетевого подключения пользователя.
Давайте рассмотрим, как настроить сетевое подключение. ЕffectiveType является свойством Network Information API, доступным для JavaScript через объект navigator.connection.
В Chrome вы можете ввести в DevTools следующее, чтобы увидеть эффективный тип подключения (ECT):
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)Ниже приведен простой тест, в котором я эмулировал в 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";
}Это позволило нам условно отображать различные выходные данные (видео или изображение с низким разрешением) в зависимости от типа подключения пользователя.
<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>
Макс Бёк написал интересную статью о компонентах мониторинга сети, использующих 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} /> }Примечание. Вы можете сочетать эффективный тип с Service Workers для адаптации, помимо медленных соединений, к состояниям, когда пользователи отключены от сети.
Для отладки вы можете переопределить оценку качества сети, используя флаг Chrome «force-effective-connection-type», который можно установить в chrome://flags. Эмуляция сети в DevTools может обеспечить ограниченный опыт отладки для ECT.
Значения effectiveType также отображаются через Подсказки клиента, что позволяет разработчикам передавать скорость подключения к Интернету Chrome на серверы.
Автор: Addy Osmani
Источник: https://dev.to/
Редакция: Команда webformyself.