Новое в Chrome 55

Pete LePage

Смотреть на 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);
    });
}

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

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 , который доступен в качестве пробной версии . Пол (Mr. Web Intents) Кинлан изложил все подробности в своем сообщении на Navigator Share .

Закрытие

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

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

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