Новое в Chrome 95

Пит ЛеПейдж

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

  • Маршрутизация становится проще благодаря URLPattern , встроенному в браузер.
  • API Eye Dropper предоставляет встроенный инструмент для выбора цветов.
  • Существует новая пробная версия Origin, которая позволяет вам прямо сейчас выбрать получение сокращенной строки UA .
  • Все видеозаписи саммита PWA доступны в Интернете.
  • И это еще не все.

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

Маршрутизация с помощью URLPattern

Практически все веб-приложения так или иначе зависят от маршрутизации: будь то код, работающий на сервере и сопоставляющий путь к файлам на диске, или логика одностраничного приложения, обновляющая DOM при изменении URL. URLPattern — это новый API веб-платформы, стандартизирующий синтаксис шаблонов маршрутизации.

Он построен на основе существующих фреймворков, упрощая выполнение распространённых задач маршрутизации. Например, сопоставление с полными URL-адресами или путём URL-адреса с последующим возвратом информации о совпадениях токена и группы.

Если вы уже знакомы с синтаксисом маршрутизации, используемым в Express , Ruby on Rails или path-to-regexp , это, вероятно, покажется вам знакомым.

Чтобы использовать его, создайте новый URLPattern() и укажите данные, по которым нужно сопоставлять шаблоны. Шаблоны могут содержать подстановочные знаки, именованные группы токенов, группы регулярных выражений и модификаторы групп.

const p = new URLPattern({
  protocol: 'https',
  hostname: 'example.com',
  pathname: '/:folder/*/:fileName.jpg',
  search: '*',
  hash: '*',
});

Например, рассмотрим URLPattern , который может использоваться в Google Docs. Мы укажем kind файла, его ID и mode его открытия. Затем, чтобы использовать шаблон, можно вызвать метод test() или exec() .

const url = 'https://docs.google.com/document/d/1s...5c/edit#heading=h.8...c';

const pattern = new URLPattern({
  pathname: '/:kind/d/:fileID/:mode',
  hash: '*',
});

const r = pattern.exec(url);
// {
//   "pathname": {"groups": {
//     "fileID": "1s...5c",
//     "kind": "document",
//     "mode": "edit"
//   }, ...},
//   "hash": {"groups": {"0":"heading=h.8...c"}, ...},
//   ...
// }

URLPattern по умолчанию включён в Chrome и Edge версии 95 и выше. Для браузеров и сред, таких как Node, которые пока не поддерживают его, можно использовать библиотеку urlpattern-polyfill .

Подробную информацию можно найти в статье Джеффа URLPattern «Маршрутизация на веб-платформе» !

Выбор цветов с помощью API Eye Dropper

Почти в каждом дизайнерском приложении, которым я когда-либо пользовался, есть инструмент «пипетка», позволяющий легко определить цвет объекта. В некоторых браузерах функция «пипетки» встроена в <input type=color> , но она не идеальна.

API EyeDropper, реализованный некоторыми специалистами Microsoft, переносит эту функциональность в веб. Чтобы использовать его, создайте новый экземпляр EyeDropper() , а затем вызовите для него метод open() .

const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
// result = {sRGBHex: '#160731'}

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

Саммит PWA

Вы посетили саммит PWA в начале этого месяца?

Было здорово видеть, как много людей говорят о PWA и делятся своим опытом. Если вы пропустили, все видео уже доступны, так что обязательно посмотрите их на PWASummit.org или на канале PWA Summit на YouTube .

Пробная версия источника сокращения пользовательского агента

Сокращение User-Agent — это попытка сократить количество пассивных фингерпринтов путем сокращения информации в строке User-Agent только до бренда браузера и его версии, его отличия от настольного или мобильного устройства, а также платформы, на которой он работает.

Начиная с Chrome 95, доступна новая пробная версия Origin , которая позволяет вам получать сокращённую строку UA прямо сейчас. Это позволит вам обнаружить и устранить проблемы до того, как сокращённая строка UA станет поведением по умолчанию в Chrome.

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

Все подробности и сроки можно найти в исходной публикации о пробной версии User-Agent Reduction на developer.chrome.com .

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

Конечно, их гораздо больше.

Дальнейшее чтение

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

Подписаться

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

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