Статьи

Как использовать API информации о сети для улучшения отзывчивых сайтов

Сентябрь 19, 2018

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

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

API информации о сети

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

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

Несмотря на то, что проект спецификации Network Information API был выпущен в 2011 году, в настоящее время только Firefox и Chrome предлагают экспериментальную поддержку. Пока мы не достигнем согласия поставщика, API может быть изменен:

  • оценить пропускную способность сложно. Он может часто меняться при перемещении или переключении между мобильными и Wi-Fi сетями. Емкость сети может быть хорошей, но это не значит, что соединение с конкретным сервером будет. Поддержание оценки пропускной способности в актуальном состоянии также может потреблять много ресурсов процессора и сети.
  • как устройство может узнать, измерено ли ваше соединение? Даже быстрый Wi-Fi может иметь нелепые вымогательства в некоторых отелях и аэропортах, которые я мог бы упомянуть. Одним из вариантов будет то, что устройство предложит вам, когда будет установлено новое соединение.

К счастью, мы можем использовать обнаружение объектов для обнаружения наличия API.

Основы API

Объект API информации о сети возвращается с помощью navigator.connection Для обеспечения кросс-браузерной совместимости нам необходимо: 

 var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;

Возможно, вы захотите добавить navigator.msConnection

Наш объект connection

  • пропускная способность — двойная величина, представляющая оценку текущей пропускной способности в МБ / с (мегабайт в секунду). Значение будет равно нулю, если пользователь не в сети, и Infinity, если его невозможно определить. Обратите внимание, что большинство сетевых провайдеров указывают значения в мегабитах в секунду, и типичное занятое мобильное 3G-соединение будет составлять около 400 Мбит / с ~ = 400 000 бит / с ~ = 50 Кбит / с ~ = 0,05 МБ / с.
  • metered — логическое значение, которое, если оно true

Например: 

 if (connection && !connection.metered && connection.bandwidth > 2) {
  // load high-resolution image
  var img = document.getElementById("kitten");

  img.src = "/images/kitten_hd.jpg";
}

Наконец, мы можем выполнить обработчик события change 

 // default bandwidth
var highBandwidth = false;

// bandwidth change handler
function BandwidthChange() {
  highBandwidth = (!connection.metered && connection.bandwidth > 2);
  console.log(
    "switching to " +
    (highBandwidth ? "high" : "low") +
    " bandwidth mode"
  );
}

// Network Information object
var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;

// initialize
if (connection) {
  connection.addEventListener("change", BandwidthChange);
  BandwidthChange();
}

В этом коде глобальная переменная highBandwidthtrue Другой код может реагировать соответствующим образом, например, когда highBandwidthfalse

  1. изображения с высоким разрешением не загружаются
  2. ненужные шрифты не загружаются
  3. Опрос Ajax замедлен
  4. Параметры тайм-аута Ajax увеличены

Чтобы упростить задачу, вы можете добавить класс к тегу bodyBandwidthChange 

 // bandwidth change handler
function BandwidthChange() {
  highBandwidth = (!connection.metered && connection.bandwidth > 2);

  var body = document.body;

  if (highBandwidth) {
    body.classList.add("hibw");
  }
  else {
    body.classList.remove("hibw");
  }

  console.log(
    "switching to " +
    (highBandwidth ? "high" : "low") +
    " bandwidth mode"
  );
}

Это позволяет нам условно загружать такие элементы, как фоновые изображения в CSS, например 

 /* low bandwidth plain-color background */
#myelement
{
  background-color: #ccc;
}

/* high bandwidth image background */
body.hibw #myelement
{
  background: url(image.jpg) 0 0 no-repeat;
}

Это условие все еще может быть проверено в макетах рабочего стола, загруженных медиа-запросами.

Следует ли использовать API информации о сети?

На момент написания API информации о сети практически не поддерживал браузер и мог измениться. Тем не менее, если вы создаете веб-сайт или приложение, которое должно работать на мобильных устройствах, небольшое планирование теперь может помешать вашим страницам достичь 1,7 МБ . Если API изменится, вам просто нужно обновить функцию BandwidthChange

Я, конечно, думаю, что API Network Information заслуживает рассмотрения. Вы?

36
Share: