Новое в Chrome 91

Пит ЛеПейдж

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

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

Предлагаемые имена для API доступа к файловой системе

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

Начиная с Chrome 91, вы теперь можете предлагать имя и местоположение файла или каталога для взаимодействия. Для этого передайте свойство suggestedName как часть параметров showSaveFilePicker .

const fileHandle = await self.showSaveFilePicker({
  suggestedName: 'Untitled Text.txt',
  types: [{
    description: 'Text documents',
    accept: {
      'text/plain': ['.txt'],
    },
  }],
});

То же самое касается и начального каталога по умолчанию. Например, текстовый редактор, вероятно, захочет запустить диалог сохранения или открытия файла в папке documents . В то время как редактор изображений, вероятно, захочет запустить в папке pictures . Вы можете предложить начальный каталог по умолчанию, передав свойство startIn .

const fileHandle = await self.showOpenFilePicker({
  startIn: 'documents'
});

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

Чтение файлов из буфера обмена

В Chrome 91 появился еще один классный новый API для взаимодействия с файлами. На настольных компьютерах веб-приложения теперь могут читать файлы из буфера обмена. (Чтение файлов из буфера обмена доступно в Safari с 2018 года.)

Конечно, вы не получите неограниченный доступ к буферу обмена, поэтому вам нужно будет настроить прослушиватель событий paste . Затем в обработчике событий вы сможете получить доступ к содержимому каждого файла в буфере обмена.

window.addEventListener('paste', onPaste);

async function onPaste(e) {
  const file = e.clipboardData.files[0];
  const contents = await file.text();
  ...
}

Поделиться учетными данными на связанных сайтах

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

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

Чтобы связать ваши веб-сайты, вам нужно создать файл assetlinks.json , который определяет связь между доменами. В примере ниже я сообщаю браузеру, что оба домена .com и .co.uk связаны и могут совместно использовать учетные данные.

[{
  "relation": ["delegate_permission/common.get_login_creds"],
  "target": {
    "namespace": "web",
    "site": "https://www.example.com"
  }
 },
{
  "relation": ["delegate_permission/common.get_login_creds"],
  "target": {
    "namespace": "web",
    "site": "https://www.example.co.uk"
  }
 }]

Затем разместите файл assetlinks.json в папке .well-known для каждого домена.

Эта функция будет постепенно внедряться в Chrome 91 и может быть недоступна в первый день, поэтому ознакомьтесь с разделом «Включение Chrome для обмена учетными данными для входа на аффилированных сайтах» для получения последних подробностей.

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

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

Все видео с I/O 2021 уже доступны онлайн, там есть отличный контент, так что посмотрите!

Web Transport (ранее называвшийся Quic Transport) претерпел ряд изменений и начинает новый этап испытаний.

Web Assembly SIMD завершила свое первоначальное тестирование и доступна всем пользователям.

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

Атрибут media элемента <link> будет учитываться для link rel="icon" , что означает, что вы можете определять различные значки на основе медиа-запросов. Например, различные значки для темного и светлого режимов.

<link
  rel="icon"
  media="(prefers-color-scheme: dark)"
  href="/icons/dark.png">
<link
  rel="icon"
  media="(prefers-color-scheme: light)"
  href="/icons/light.png">

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

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

Подписаться

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

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