Новое в 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'
});

Для получения полной информации ознакомьтесь с публикацией Тома о доступе к файловой системе .

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

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

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

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