Новое в 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 можно найти на панели «Манифест» панели «Приложение» в 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, он назначает им приоритет выборки, чтобы попытаться оптимизировать загрузку страницы. Браузеры довольно хорошо распределяют приоритеты, но не во всех случаях могут быть оптимальными.

Подсказки по приоритетам — это экспериментальная функция, доступная в качестве пробной версии , начиная с Chrome 96, и которая может помочь оптимизировать основные веб-показатели. Атрибут 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 секунды.

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

Эмулировать 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 на YouTube .

И более!

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

  • Кэш «Back, Forward» ( bfcache ) теперь доступен в стабильной версии и приводит Chrome в соответствие с Firefox и Safari.

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

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

Подписаться

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

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