Адаптивные сервисы, использующие JavaScript и API веб-информации

внешний интерфейс JavaScript Программа перевода самородков Chrome

Внедрение адаптивных сервисов с использованием JavaScript и API веб-информации.

navigator.connection.effectiveTypeМожет давать разные результаты в зависимости от качества сетевого подключения пользователя.

effectiveTypeдаNetwork Information APIСобственность, в JavaScript черезnavigator.connectionОбъекты в вызове. В браузере Chrome вы можете поместить следующее в devtools, чтобы увидеть эффективный тип подключения (ECT):

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

effectiveTypeВозможные значения: «slow-2g», «2g», «3g» или «4g». Эта функция позволяет ускорить загрузку страниц, предоставляя ресурсы более низкого качества при низкой скорости интернета.

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

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

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

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

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

    console.log(`有效网络连接类型: ${effectiveType}`);
    console.log(`估算的下行速度/带宽: ${downlink}Mb/s`);
    console.log(`估算的往返时间: ${rtt}ms`);
    console.log(`打开/请求数据保护模式: ${saveData}`);
}

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

Вот быстрый тест, в котором я смоделировал конфигурацию «низкоскоростного телефона» в DevTools и смог переключиться с «4g» на «2g»:

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

Я работаю над проектом с открытым исходным кодом на основе Vue.js -Google DoodlesВ приложении используется EffectiveType. Основываясь на значении ECT, мы можем использовать привязку данных дляconnectionсвойство установлено наfastилиslow. Примерно так:

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} />
}

Примечание: вы можетеeffectiveTypeИспользуйте с Service Workers для работы с пользователями, уходящим в автономный режим из-за медленного соединения.

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

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

Если вы обнаружите ошибки в переводе или в других областях, требующих доработки, добро пожаловать наПрограмма перевода самородковВы также можете получить соответствующие бонусные баллы за доработку перевода и PR. начало статьиПостоянная ссылка на эту статьюЭто ссылка MarkDown этой статьи на GitHub.

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.

Категории