Новое в Chrome 55

Пит ЛеПейдж

Смотреть на YouTube

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

И это еще не все.

Меня зовут Пит ЛеПейдж , и вот что нового для разработчиков в Chrome 55!

События указателя

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

События касания хороши, но для поддержки касания и мыши необходимо поддерживать две модели событий:

elem.addEventListener('mousemove', mouseMoveEvent);
elem.addEventListener('touchmove', touchMoveEvent);

Chrome теперь обеспечивает унифицированную обработку ввода путем отправки PointerEvents :

elem.addEventListener('pointermove', pointerMoveEvent);

События указателя объединяют модель ввода указателя для браузера, объединяя касание, перья и мыши в единый набор событий. Они поддерживаются в IE11, Edge, Chrome, Opera и частично поддерживаются в Firefox .

Более подробную информацию можно найти в статье «Указывая путь вперед» .

async и await

Асинхронный JavaScript может быть сложным для понимания. Возьмите эту функцию со всеми ее "прекрасными" обратными вызовами:

function logFetch(url) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function (e) {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        console.log(xhr.responseText);
      } else {
        console.error('xhr failed', xhr.statusText);
      }
    }
  };
  xhr.onerror = function (e) {
    console.error(xhr.statusText);
  };
  xhr.open('GET', url);
  xhr.send();
}

Переписывание его с использованием promises помогает избежать проблемы вложенности:

function logFetch(url) {
  return fetch(url)
    .then(response => response.text())
    .then(text => {
      console.log(text);
    }).catch(err => {
      console.error('fetch failed', err);
    });
}

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

Chrome теперь поддерживает ключевые слова JavaScript async и await , что позволяет писать JavaScript на основе Promise, который может быть таким же структурированным и читаемым, как синхронный код.

Вместо этого нашу асинхронную функцию можно упростить до следующего вида:

async function logFetch(url) {
  try {
    const response = await fetch(url);
    console.log(await response.text());
  }
  catch (err) {
    console.log('fetch failed', err);
  }
}

У Джейка есть отличная статья: Асинхронные функции — как сделать обещания удобными со всеми подробностями.

Постоянное хранилище

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

if (navigator.storage && navigator.storage.persist) {
  navigator.storage.persist().then(granted => {
    if (granted)
      alert("Storage will not be cleared except by explicit user action");
    else
      alert("Storage may be cleared by the UA under storage pressure.");
  });
}

Кроме того, разрешение на сохранение автоматически предоставляется сайтам с высокой степенью вовлеченности, добавленным на главный экран или поддерживающим push-уведомления.

Подробную информацию и информацию о том, как запросить постоянное хранилище для своего сайта, можно найти в статье Криса Уилсона «Постоянное хранилище» .

Автоматическая расстановка переносов в CSS

Автоматическая расстановка переносов CSS , одна из наиболее часто запрашиваемых функций макета Chrome, теперь поддерживается на Android и Mac.

API веб-обмена

И наконец, теперь стало проще вызывать собственные возможности общего доступа с помощью нового API Web Share , который доступен в качестве пробной версии Origin . Пол (Mr. Web Intents) Кинлан подробно рассказывает об этом в своем посте Navigator Share .

Закрытие

Это лишь некоторые из изменений в Chrome 55 для разработчиков.

Если вы хотите быть в курсе последних новостей Chrome и знать, что нас ждет, обязательно подпишитесь и посмотрите видеоролики с Chrome Dev Summit, чтобы глубже погрузиться в некоторые замечательные вещи, над которыми работает команда Chrome.

Меня зовут Пит ЛеПейдж, и как только выйдет Chrome 56, я сразу же расскажу вам, что нового в Chrome!