Новое в Chrome 73

Pete LePage

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

• Создание переносимого контента стало проще благодаря подписанным HTTP-обменам .
• Динамическое изменение стилей становится намного проще с помощью конструируемых таблиц стилей .
• Поддержка Progressive Web Apps появилась на Mac, что обеспечивает поддержку PWA на всех настольных и мобильных платформах , что упрощает создание устанавливаемых приложений, распространяемых через Интернет.

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

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

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

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

• Список изменений в исходном репозитории Chromium
• Обновления ChromeStatus.com для Chrome 73
• Устаревание и удаление Chrome 73
• Обновления медиафайлов Chrome 73
• Что нового в JavaScript в Chrome 73

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

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

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

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

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

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

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

Затем продолжайте с этого момента.

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

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

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

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

Подробную информацию о том, как начать работу, можно найти в статье Kinuko Signed HTTP Exchanges .

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

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

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

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

Обновления общей таблицы 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 .

Подписаться

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

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