Новое в Chrome 93

Pete LePage

Вот что важно знать:

  • Теперь вы можете загружать таблицы стилей CSS с помощью инструкций import, как и модули JavaScript.
  • Установленные PWA могут регистрироваться как обработчики URL, что позволяет пользователям сразу переходить в PWA.
  • На основе ваших отзывов мы обновили Multi-Screen Window Placement API и запускаем второй эксперимент с источником.
  • 6–7 октября пройдет PWA Summit.
  • И это далеко не все.

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

Скрипты модулей CSS

Теперь вы можете загружать таблицы стилей CSS с помощью операторов import, как и модули JavaScript. Затем таблицы стилей можно применить к документу или теневым корням так же, как и конструируемые таблицы стилей.

Новая функция CSS Module Scripts отлично подходит для пользовательских элементов. И в отличие от других способов применения CSS из JavaScript, нет необходимости создавать элементы или возиться со строками JavaScript в тексте CSS.

Чтобы использовать его, импортируйте таблицу стилей с помощью assert {type: 'css'}, а затем примените ее к document или shadowRoot, вызвав adoptedStyleSheets.

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

Но будьте внимательны: если вы не укажете assert, файл будет обработан как JavaScript и не будет работать.

Подробную информацию вы найдете в статье Импорт таблиц стилей с помощью скриптов модулей CSS на сайте web.dev.

Multi-Screen Window Placement API

Для некоторых приложений важно открывать новые окна и размещать их в определенных местах или на определенных экранах. Например, при показе презентации в Google Презентациях я хочу, чтобы слайды отображались в полноэкранном режиме на основном экране, а заметки докладчика – на другом.

Multi-Screen Window Placement API позволяет перечислить дисплеи, подключенные к компьютеру пользователя, и разместить окна на определенных экранах. Это второй эксперимент с источником, и мы внесли ряд изменений на основе ваших отзывов.

Чтобы проверить, подключено ли к устройству несколько экранов, выполните следующие действия:

const isExtended = window.screen.isExtended;
// returns true/false

Но ключевая функциональность находится в window.getScreens(), который предоставляет все сведения о подключенных дисплеях.

const screens = await window.getScreens();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

Например, вы можете определить основной экран, а затем использовать requestFullscreen(), чтобы показать на нем элемент.

try {
  const screens = await window.getScreens();
  const primary = screens.filter((screen) => screen.primary)[0];
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

Кроме того, он позволяет отслеживать изменения, например подключение или отключение экрана.

const screens = await window.getScreens();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

Чтобы узнать больше, прочитайте статью Тома Управление несколькими дисплеями с помощью Multi-Screen Window Placement API на сайте web.dev.

Сокращенный цикл выпуска

В марте мы объявили о планах сократить цикл выпуска и выпускать новую версию Chrome каждые четыре недели.

Этот момент настал, и 21 сентября мы выпустим Chrome 94. Запланированные даты выпуска каждой версии можно найти в календаре Chrome.

Новые функции PWA

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

Обработчики URL для PWA

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

Указав url_handlers в манифесте веб-приложения и добавив файл web-app-origin-association в каталог .well-known/, вы можете сообщить браузеру, что если пользователь нажимает на ссылку, ведущую на ваше PWA, то оно должно открываться в установленном PWA.

Пример url_handlers в файле manifest.json:

{
  ...
  "url_handlers": [
    {"origin": "https://music.example.com"}
  ]
}

Пример файла web-app-origin-association:

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

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

Подробную информацию об эксперименте с источником можно найти в статье Прогрессивные веб-приложения как обработчики URL на сайте web.dev.

Оверлей элементов управления окнами

Оверлей элементов управления окнами расширяет клиентскую область, чтобы она покрывала все окно, включая строку заголовка и кнопки управления окном, такие как кнопки закрытия, развертывания и свертывания.

Эта функция позволяет сделать установленное PWA более похожим на другие установленные приложения.

Подробнее об эксперименте с источником…

PWA Summit

В октябре пройдет PWA Summit. Это бесплатная онлайн-конференция, посвященная прогрессивным веб-приложениям. PWA Summit – это совместный проект специалистов из нескольких компаний, участвующих в создании технологий PWA: Google, Intel, Microsoft и Samsung.

Там много интересных выступлений и контента. Узнать больше и зарегистрироваться можно на сайте PWASummit.org.

и многое другое!

Конечно, это далеко не все.

  • Для Flexbox и элементов Flexbox добавлена поддержка ключевых слов выравнивания: start, end, self-start, self-end, left и right.
  • Асинхронный API буфера обмена теперь поддерживает файлы SVG.
  • Атрибут media будет учитываться при настройке meta theme-color, поэтому вы можете указать разные цвета темы для светлого и темного режимов.
<meta name="theme-color"
      media="(prefers-color-scheme: light)"
      content="white">

<meta name="theme-color"
      media="(prefers-color-scheme: dark)"
      content="black">

Дополнительные сведения

Это лишь некоторые из основных моментов. Дополнительную информацию об изменениях в Chrome 93 можно найти по ссылкам ниже.

Подписаться

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

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