Новое в Chrome 97

Пит ЛеПейдж

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

С Новым Годом! Я Пит ЛеПейдж . Давайте углубимся и посмотрим, что нового для разработчиков в Chrome 97.

Веб-транспорт

Если вы используете веб-сокеты или API канала данных WebRTC для отправки сообщений между вашим сервером и страницей, для вас есть новая опция. WebTransport — это новый API, обеспечивающий двунаправленный обмен сообщениями клиент-сервер с малой задержкой.

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

Он поддерживает отправку данных: надежно с помощью API-интерфейсов потоков и ненадежно с помощью API-интерфейсов дейтаграмм. Это поддерживается в веб-работниках. А поскольку он предоставляет интерфейс, совместимый со Streams, он поддерживает оптимизацию противодавления.

Чтобы использовать его, вам понадобится сервер, поддерживающий HTTP/3, что, как правило, проще, чем настройка и обслуживание сервера WebRTC. Откройте новый экземпляр WebTransport , подождите, пока он подключится, и вы сможете начать отправку данных.

const url = 'https://example.com:4999/foo/bar';
const transport = new WebTransport(url);
await transport.ready;

const writer = transport.datagrams.writable.getWriter();
const data1 = new Uint8Array([65, 66, 67]);
writer.write(data1);

Подробную информацию можно найти в статье «Экспериментирование с WebTransport» на сайте web.dev.

Обнаружение функции типа сценария

Сегодня мы можем использовать атрибут nomodule для обнаружения поддержки модулей JavaScript в браузере. Но в стадии разработки есть несколько новых предложений по функциям, таких как карты импорта, правила спекуляций и предварительная загрузка пакетов. Нам нужен способ узнать, что поддерживает браузер.

Введите HTMLScriptElement.supports() . Вы можете использовать его, чтобы определить, какие типы скриптов вы можете использовать, и отправить браузеру лучший вариант.

if (HTMLScriptElement.supports('importmap')) {
  // Use <script type="importmap" ...>
} else if (HTMLScriptElement.supports('module')) {
  // Use <script type="module" ...>
} else {
  // Use classic method...
}

Новые прототипы массивов

Мне нравится, когда JavaScript становится проще. Array и TypedArray теперь поддерживают статические методы findLast() и findLastIndex() .

Эти функции по сути аналогичны find() и findIndex() , но выполняют поиск с конца массива, а не с начала.

Например, чтобы найти последнее число в массиве, превышающем десять, вызовите findLast() с тестовой функцией, которая проверяет, больше ли значение десяти, и все готово.

const array1 = [5, 12, 8, 130, 44, 3, 6];

function greaterThanTen(val) {
  return val > 10;
}

const last = array1.findLast(greaterThanTen);
// 44

const lIdx = array1.findLastIndex(greaterThanTen);
// 4

Эмулировать Chrome 100 в строке UA

Всего через несколько месяцев мы достигнем Chrome 100 — трехзначного номера версии. Любой код, который проверяет номера версий или анализирует строку UA, должен быть проверен, чтобы убедиться, что он обрабатывает три цифры.

Существует флаг #force-major-version-to-100 , который изменит текущий номер версии на 100, чтобы вы могли убедиться, что все работает как положено.

Страница флагов Chrome, на которой выделена новая опция #force-major-version-to-100

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

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

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

Мы стандартизируем имена клиентских подсказок, добавляя к ним префикс sec-ch . Например, dpr становится sec-ch-dpr . Мы продолжим поддерживать существующие версии этих подсказок, но вам следует запланировать их возможное прекращение поддержки и удаление.

Закрытые элементы <details> теперь доступны для поиска и на них можно ссылаться. Эти скрытые элементы будут автоматически расширяться при использовании find in page, ScrollToTextFragment и навигации по фрагменту элемента.

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

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

Подписаться

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

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