Новое в Chrome 96

Пит ЛеПейдж

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

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

id манифеста для PWA

Когда пользователь устанавливает PWA, браузеру нужен способ его уникальной идентификации. Но до недавнего времени спецификация манифеста веб-приложения не указывала, как идентифицировать PWA, оставляя браузерам выбор и приводя к разным реализациям. В некоторых браузерах используется start_url , а в других — путь к файлу манифеста.

Это делает невозможным изменение любого из этих полей без нарушения процесса установки. Теперь есть новое необязательное свойство id , которое позволяет вам явно определить идентификатор, используемый для вашего PWA.

Добавление свойства id в манифест устраняет зависимость от start_url или местоположения манифеста и позволяет обновлять эти поля.

{
  ...
  id: "/?homescreen=1",
  start_url: "/?homescreen=1",
  ...
}

Поддержка свойства id появится в браузерах на базе Chromium для настольных компьютеров, начиная с Chrome 96. Поддержка для мобильных устройств, которые в настоящее время используют URL-адрес манифеста в качестве уникального идентификатора, должна появиться в первой половине 2022 года.

DevTools показывает вычисленный идентификатор приложения

Если у вас уже есть PWA в производстве и вы хотите добавить id в свой манифест, вам нужно будет использовать идентификатор, назначенный браузером. Вы можете найти id на панели Manifest панели Application в Dev Tools.

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

{
  ...
  id: "SquooshApp",
  start_url: "/?homescreen=1",
  ...
}

Для получения дополнительной информации ознакомьтесь с разделом Уникальная идентификация PWA с помощью свойства идентификатора манифеста веб-приложения .

Обработчики протоколов URL для PWA

Веб-приложения могут использовать navigator.registerProtocolHandler() для регистрации в качестве обработчика протокола. Например, Gmail может зарегистрировать протокол mailto . Затем, когда пользователь нажимает на ссылку с префиксом mailto: открывается Gmail, что упрощает отправку электронного письма пользователем.

Начиная с Chrome 96, PWA может регистрироваться как обработчик протоколов в рамках своей установки. Чтобы сделать это для вашего PWA, добавьте свойство protocol_handlers в манифест вашего веб-приложения, укажите protocol вы хотите обрабатывать, и url , который должен открываться при нажатии.

  ...
  "protocol_handlers": [
    {
      "protocol": "web+tea",
      "url": "/tea?type=%s"
    },
    {
      "protocol": "web+coffee",
      "url": "/coffee?type=%s"
    }
  ]
}

Здесь есть некоторые ограничения, и вы не можете просто зарегистрировать любой протокол, поэтому ознакомьтесь с разделом Регистрация обработчика протокола URL для PWA, чтобы получить полную информацию и узнать, как можно использовать синтаксис web+ для создания собственных протоколов!

Приоритетные подсказки (исходный пробный период)

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

Priority Hints — это экспериментальная функция, доступная в качестве пробной версии, начиная с Chrome 96, и может помочь оптимизировать Core Web Vitals. Атрибут importance позволяет указать приоритет для таких типов ресурсов, как CSS, шрифты, скрипты, изображения и iframe.

<!-- We don't want a high priority for this above-the-fold image -->
<img src="/not-important.svg" importance="low">

<!-- Initiate an early fetch for a resource, but de-prioritize it -->
<link rel="preload" href="/script.js" as="script" importance="low">

<script>
  fetch('https://example.com/', {importance: 'high'})
      .then(data => {
        // Trigger a high priority fetch
      });
</script>

Например, вот страница Google Flights. Это фоновое изображение — самая большая контентная отрисовка (LCP).

Скриншот Google Flights с большим фоновым изображением

Давайте посмотрим, как он загружается с подсказками приоритета и без них. При установке high приоритета на фоновом изображении LCP падает с 2,6 до 1,9 секунд.

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

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

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

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

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

Подробную информацию см. в разделе Принудительное изменение основной версии Chrome на 100 в строке User-Agent .

Саммит разработчиков Chrome

Chrome Dev Summit завершен. Все видео и контент доступны онлайн. Посетите сайт Chrome Dev Summit или, если вы пропустили основной доклад или прямую трансляцию, посмотрите плейлист CDS на канале Chrome Developers на YouTube .

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

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

  • Функция обратного кэширования ( bfcache ) теперь доступна в стабильной версии и позволяет Chrome соответствовать Firefox и Safari.

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

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

Подписаться

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

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