Новое в Chrome 102

Пит ЛеПейдж

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

  • Установленные PWA могут регистрироваться как обработчики файлов , что позволяет пользователям легко открывать файлы непосредственно с диска.
  • Атрибут inert позволяет помечать части DOM как инертные.
  • API навигации упрощает обработку навигации и обновления URL-адресов для одностраничных приложений.
  • И это еще не все.

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

API обработки файлов

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

Чтобы добавить функциональность обработки файлов в PWA, вам нужно обновить манифест веб-приложения, добавив массив file_handlers с подробностями о типах файлов, которые может обрабатывать ваш PWA. Вам нужно указать URL для открытия, типы MIME, значок для типа файла и тип запуска. Тип запуска определяет, следует ли открывать несколько файлов в одном клиенте или в нескольких клиентах.

"file_handlers": [
  {
    "action": "/open-csv",
    "accept": {"text/csv": [".csv"]},
    "icons": [
      {
        "src": "csv-icon.png",
        "sizes": "256x256",
        "type": "image/png"
      }
    ],
    "launch_type": "single-client"
  }
]

Затем, чтобы получить доступ к этим файлам при запуске PWA, вам нужно указать потребителя для объекта launchQueue . Запуски ставятся в очередь, пока они не будут обработаны потребителем.

// Access from Window.launchQueue.
launchQueue.setConsumer((launchParams) => {
  if (!launchParams.files.length) {
    // Nothing to do when the queue is empty.
    return;
  }
  for (const fileHandle of launchParams.files) {
    // Handle the file.
    openFile(fileHandle);
  }
});

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

inert свойство

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

Это может быть полезно при создании UI. Например, в случае с модальным диалогом вы хотите «захватить» фокус внутри модального окна, когда оно видимо. Или, для ящика, который не всегда виден пользователю, добавление inert гарантирует, что пока ящик находится за пределами экрана, пользователь клавиатуры не сможет случайно взаимодействовать с ним.

<div>
  <label for="button1">Button 1</label>
  <button id="button1">I am not inert</button>
</div>
<div inert>
  <label for="button2">Button 2</label>
  <button id="button2">I am inert</button>
</div>

Здесь inert объявлен для второго элемента <div> , поэтому все содержимое внутри, включая <button> и <label> , не может получить фокус или быть нажато.

inert поддерживается в Chrome 102 и появится в Firefox и Safari.

Более подробную информацию можно найти в разделе Знакомство с инертными материалами .

Многие веб-приложения зависят от возможности обновления URL без навигации по страницам. Сегодня мы используем History API , но он неуклюж и не всегда работает так, как ожидается. Вместо того, чтобы пытаться залатать шероховатости History API, Navigation API полностью перестраивает это пространство.

Чтобы использовать API навигации, добавьте прослушиватель navigate в глобальный объект navigation .

navigation.addEventListener('navigate', (navigateEvent) => {
  switch (navigateEvent.destination.url) {
    case 'https://example.com/':
      navigateEvent.transitionWhile(loadIndexPage());
      break;
    case 'https://example.com/cats':
      navigateEvent.transitionWhile(loadCatsPage());
      break;
  }
});

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

Ознакомьтесь с современной клиентской маршрутизацией: API навигации для получения полной информации и демонстрации, которую вы можете опробовать.

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

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

  • Новый API Sanitizer направлен на создание надежного процессора для безопасной вставки произвольных строк на страницу.
  • Атрибут hidden=until-found позволяет браузеру искать текст в скрытых областях и отображать этот раздел, если совпадение найдено.

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

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

Подписаться

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

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