Новое в 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, который сообщает браузеру игнорировать события ввода пользователя для элемента, включая события фокуса и события от вспомогательных технологий.

Это может быть полезно при создании пользовательских интерфейсов. Например, в модальном диалоге вы хотите «захватить» фокус внутри модального окна, когда он виден. Или, для ящика, который не всегда виден пользователю, добавление 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>

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

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

Более подробную информацию можно найти в разделе «Представляем inert» .

Многие веб-приложения зависят от возможности обновления 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.

Подписаться

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

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