Новое в Chrome 86

Пит ЛеПейдж

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

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

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

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

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

С помощью API доступа к файловой системе (ранее 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, теперь доступный в качестве пробной версии Origin , решает эту проблему, предоставляя способ доступа к этим устройствам в 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-устройств
Средство выбора 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 размещения окон Multi-Screen Window Placement, запускает пробную версию Origin в 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() или размещении новых окон. Том подробно рассказывает об этом в своей статье Managing several displays with the Multi-Screen Window Placement 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 Developers на YouTube , и вы будете получать уведомления по электронной почте каждый раз, когда мы выпускаем новое видео, или добавьте наш RSS-канал в свой ридер.

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