Новое в Chrome 86

Pete LePage

Chrome 86 уже начинает выпускаться в стабильную версию.

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

• API доступа к файловой системе теперь доступен в стабильной версии.
• Появились новые пробные версии для Web HID и API многоэкранного размещения окон .
• В CSS появилось кое-что новое и многое другое .

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

Доступ к файловой системе

Сегодня вы можете использовать элемент <input type="file"> для чтения файла с диска. Чтобы сохранить изменения, добавьте download в тег привязки, появится средство выбора файла, а затем файл сохранится. Невозможно записать в тот же файл, который вы открыли. Этот рабочий процесс раздражает.

С помощью API доступа к файловой системе (ранее — Native File System API), который вышел из пробной версии и теперь доступен в стабильной версии, вы можете вызвать showOpenFilePicker() , который показывает средство выбора файлов, а затем возвращает дескриптор файла, который вы можете используйте для чтения файла.

async function getFileHandle() {
  const opts = {
    types: [
      {
        description: 'Text Files',
        accept: {
          'text/plain': ['.txt', '.text'],
          'text/html': ['.html', '.htm']
        }
      }
    ]
  };
  return await window.showOpenFilePicker(opts);
}

Чтобы сохранить файл на диск, вы можете либо использовать полученный ранее дескриптор файла, либо вызвать showSaveFilePicker() чтобы получить новый дескриптор файла.

async function saveFile(fileHandle) {
  if (!fileHandle) {
    fileHandle = await window.showSaveFilePicker();
  }
  const writable = await fileHandle.createWritable();
  await writable.write(contents);
  await writable.close();
}

Запросить у пользователя разрешение на запись в файл.

Перед записью Chrome проверит, предоставил ли пользователь разрешение на запись. Если разрешение на запись не было предоставлено, Chrome сначала запросит у пользователя запрос.

Вызов showDirectoryPicker() откроет каталог, что позволит вам получить список файлов или создать новые файлы в этом каталоге. Идеально подходит для таких вещей, как IDE или медиаплееры, которые взаимодействуют с большим количеством файлов. Конечно, прежде чем вы сможете что-либо написать, пользователь должен предоставить разрешение на запись.

API предлагает гораздо больше возможностей, поэтому ознакомьтесь со статьей «Доступ к файловой системе» на сайте web.dev.

Пробная версия Origin: WebHID

Игровой контроллер.

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

API WebHID, который теперь доступен в виде пробной версии , решает эту проблему, предоставляя способ доступа к этим устройствам с помощью JavaScript. Благодаря WebHID веб-игры могут использовать все преимущества геймпадов, включая все кнопки, джойстики, датчики, триггеры, светодиоды, грохоты и многое другое.

butOpenHID.addEventListener('click', async (e) => {
  const deviceFilter = { vendorId: 0x0fd9 };
  const opts = { filters: [deviceFilter] };
  const devices = await navigator.hid.requestDevice(opts);
  myDevice = devices[0];
  await myDevice.open();
  myDevice.addEventListener('inputreport', handleInpRpt);
});

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

Средство выбора HID-устройства.

Конечно, подобные мощные API могут взаимодействовать с устройствами только тогда, когда пользователь явно разрешает это.

Дополнительные сведения, примеры, инструкции по началу работы и классную демонстрацию см. в разделе Подключение к необычным HID-устройствам.

Пробная версия Origin: API многоэкранного размещения окон

Сегодня вы можете получить свойства экрана, на котором находится окно браузера, вызвав window.screen() . Но что, если у вас есть установка с несколькими мониторами? К сожалению, браузер сообщит вам только об экране, на котором он сейчас находится.

const screen = window.screen;
console.log(screen);
// {
//   availHeight: 1612,
//   availLeft: 0,
//   availTop: 23,
//   availWidth: 3008,
//   colorDepth: 24,
//   orientation: {...},
//   pixelDepth: 24,
//   width: 3008
// }

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

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

async function getPermission() {
  const opt = { name: 'window-placement' };
  try {
    const perm = await navigator.permissions.query(opt);
    return perm.state === 'granted';
  } catch {
    return false;
  }
}

Как только пользователь предоставил разрешение, вызов window.getScreens() возвращает обещание, которое разрешается с помощью массива объектов Screen .

const screens = await window.getScreens();
console.log(screens);
// [
//   {id: 0, internal: false, primary: true, left: 0, ...},
//   {id: 1, internal: true, primary: false, left: 3008, ...},
// ]

Затем я могу использовать эту информацию при вызове requestFullScreen() или размещении новых окон. Все подробности Том изложил в своей статье «Управление несколькими дисплеями с помощью API многоэкранного размещения окон» на веб-сайте web.dev.

И еще

Новый селектор CSS :focus-visible позволяет вам выбрать ту же эвристику, которую браузер использует, когда решает, отображать ли индикатор фокуса по умолчанию.

/* Focusing the button with a keyboard will
   show a dashed black line. */
button:focus-visible {
  outline: 4px dashed black;
}

/* Focusing the button with a mouse, touch,
   or stylus will show a subtle drop shadow. */
button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);
}

Вы можете настроить цвет, размер или тип числа или маркера для списков с помощью псевдоэлемента CSS ::marker .

li::marker {
  content: '😍';
}
li:last-child::marker {
  content: '🤯';
}

Рядом с вами пройдет Chrome Dev Summit, так что следите за обновлениями на нашем канале YouTube, чтобы получить дополнительную информацию!

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

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

• Что нового в Chrome DevTools (86)
• Устаревшие и удаленные версии Chrome 86
• Обновления ChromeStatus.com для Chrome 86
• Что нового в JavaScript в Chrome 86
• Список изменений репозитория исходного кода Chromium

Подписаться

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

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