Новое в Chrome 73

В Chrome 73 мы добавили поддержку:

И есть еще много всего !

Я Пит ЛеПейдж . Давайте углубимся и посмотрим, что нового для разработчиков в Chrome 73!

Журнал изменений

Здесь рассматриваются только некоторые ключевые моменты. Дополнительные изменения в Chrome 73 можно найти по ссылкам ниже.

Прогрессивные веб-приложения работают везде

Прогрессивные веб-приложения представляют собой устанавливаемые приложения, созданные и доставляемые непосредственно через Интернет. В Chrome 73 мы добавили поддержку macOS, обеспечив поддержку прогрессивных веб-приложений на всех настольных платформах — Mac, Windows, ChromeOS и Linux, а также на мобильных устройствах, упрощая разработку веб-приложений.

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

Пользователи могут установить PWA из контекстного меню Chrome, или вы можете напрямую продвигать процесс установки, используя событие beforeinstallprompt . После установки PWA интегрируется с ОС и ведет себя как собственное приложение: пользователи находят и запускают их из того же места, что и другие приложения, они запускаются в собственном окне, появляются в переключателе задач, на их значках могут отображаться значки уведомлений. и так далее.

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

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

  1. Добавить манифест
  2. Создайте набор иконок
  3. Добавьте шаблонного сервисного работника

Затем выполните итерацию оттуда.

Подписанные HTTP-обмены

Подписанный HTTP-обмен (SXG), часть новой технологии под названием « Веб-пакеты» , теперь доступен в Chrome 73. Подписанный HTTP-обмен позволяет создавать «переносимый» контент, который может быть доставлен другими сторонами, и это ключевой аспект. он сохраняет целостность и авторство исходного сайта.

Подписанная биржа: суть

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

Подписанный обмен HTTP обеспечивает более быструю доставку контента для пользователей, позволяя получить преимущества CDN без необходимости уступать контроль над закрытым ключом вашего сертификата. Команда AMP планирует использовать подписанные обмены HTTP на страницах результатов поиска Google, чтобы улучшить URL-адреса AMP и ускорить клики по результатам поиска.

Подробную информацию о том, как начать, можно найти в публикации Kinuko о подписанных HTTP-обменах .

Конструируемые таблицы стилей

Конструктивные таблицы стилей, появившиеся в Chrome 73, дают нам новый способ создания и распространения повторно используемых стилей, что особенно важно при использовании Shadow DOM.

Таблицы стилей всегда можно было создавать с помощью JavaScript. Создайте элемент <style> , используя document.createElement('style') . Затем обратитесь к его свойству листа, чтобы получить ссылку на базовый экземпляр CSSStyleSheet , и установите стиль.

Схема, показывающая подготовку и применение CSS

Использование этого метода может привести к раздуванию таблицы стилей. Хуже того, это вызывает вспышку нестилизованного контента. Конструируемые таблицы стилей позволяют определять и готовить общие стили CSS, а затем легко и без дублирования применять эти стили к нескольким теневым корням или документу.

Обновления общего CSSStyleSheet применяются ко всем корням, в которых он был принят, а принятие таблицы стилей происходит быстро и синхронно после загрузки листа.

Начать очень просто: создайте новый экземпляр CSSStyleSheet , затем используйте replace или replaceSync для обновления правил таблицы стилей.

const sheet = new CSSStyleSheet();

// replace all styles synchronously:
sheet.replaceSync('a { color: red; }');

// this throws an exception:
try {
  sheet.replaceSync('@import url("styles.css")');
} catch (err) {
  console.error(err); // imports are not allowed
}

// replace all styles, allowing external resources:
sheet.replace('@import url("styles.css")')
  .then(sheet => {
    console.log('Styles loaded successfully');
  })
  .catch(err => {
    console.error('Failed to load:', err);
  });

Ознакомьтесь с публикацией Constructable Stylesheets Джейсона Миллера: бесшовные многоразовые стили , чтобы получить более подробную информацию и примеры кода!

И более!

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

  • matchAll() — это новый метод сопоставления регулярных выражений для прототипа строки, который возвращает массив, содержащий полные совпадения.
  • Элемент <link> теперь поддерживает свойства imagesrcset и imagesizes , соответствующие атрибутам srcset и sizes HTMLImageElement .
  • Реализация радиуса размытия тени в Blink теперь соответствует Firefox и Safari.
  • Темный режим для пользовательского интерфейса Chrome теперь поддерживается на Mac, а поддержка Windows уже в разработке. Кроме того, ведется работа над медиа-запросом CSS: prefers-color-scheme , который можно использовать для определения того, запросил ли пользователь систему использовать светлую или темную цветовую тему. Ошибка отслеживания для этого — Добавить поддержку медиа-функции CSS prefers-color-scheme для Chrome и Firefox .

Подписаться

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

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