Новое в Chrome 95

Пит ЛеПейдж

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

  • Маршрутизация становится проще благодаря URLPattern встроенному в браузер.
  • API Eye Dropper предоставляет встроенный инструмент для выбора цветов.
  • Появилась новая пробная версия источника, которая позволяет вам отказаться от получения сокращенной строки 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. Мы укажем 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-интерфейс «Пипетка», реализованный некоторыми ребятами из Microsoft, переносит эту функциональность в Интернет. Чтобы использовать его, создайте новый экземпляр EyeDropper() , а затем вызовите для него open() .

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

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

Вы можете опробовать быструю демо-версию и посмотреть код на Glitch.

Саммит PWA

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

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

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

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

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

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

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

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

Конечно, есть еще много всего.

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

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

Подписаться

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

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