Планировалось, что Chrome заблокирует userAgent для повышения конфиденциальности пользователей, и в 84+ он применяется в качестве экспериментальной функции.

Не только Chrome, но и другие браузеры когда-нибудь появятся.

Это все еще экспериментальная функция до Chrome (хром) 84.
Если вы хотите протестировать, включите флаг ниже.
chrome: // flags / # enable-experimental-web-platform- особенности
chrome: // flags / # freeze-user-agent

Замораживание userAgent означает, что это может повлиять как на клиент, так и на сервер, использующий userAgent. Следовательно, вам нужно подготовиться к серверу и клиенту.

Информацию о сервере см. В следующей статье.
https://web.dev/user-agent-client-hints

В этой статье я хочу поговорить о том, как работать на стороне клиента.

Есть разные причины для использования userAgent. Вот несколько примеров:

  • Различия в поведении браузера.
  • Различия в поведении ОС.
  • Разница по мобильному телефону.
  • Ошибки в определенных версиях ОС или браузера.

Когда userAgent, замораживание меняется следующим образом

  • следующие значения атрибутов не будут отображаться правильно.
    * navigator.userAgent
    * navigator.appVersion
    * navigator.platform
    * navigator.productSub
    * navigator.vendor
  • Вы должны использовать navigator.userAgentData вместо navigator.userAgent.
    * Версия браузера показывает только основную.
    * Имя и версия ОС становятся неточными.
    * Но имя ОС, версия ОС, полная версия браузера должны выбираться асинхронно .

navigator.userAgent можно изменить следующим образом:

  • Galaxy Z Flip, Android 10, Chrome 85.0.4183.81
    До: Mozila/5.0 (Linux; Android 10; SM-F700N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.81 Mobile Safari/537.36
    После: Mozila/5.0 (Linux; Android 9; Unspecified Device) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.0.0 Mobile Safari/537.36
  • Mac OS X 10.15.4, Chrome Canary 87.0.4243.0
    До: Mozilla/5.0 (Macintosh; Intel Mac OS X 10Use userAgentData4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4243.0 Safari/537.36
    После: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.0.0 Safari/537.36

Здесь имя и версия ОС - unknown, но Android может.

Фактически, вы можете проверить Android в chromium, а другая ОС будет изменена на Windows.

Use userAgentData вместо userAgent

При доступе к navigator.userAgentData есть атрибуты _16 _ (_ 17_ для хрома ‹84), mobile и getHighEntropyValues метод.

  • brands - это список коммерческих названий пользовательских агентов. Кроме того, вы можете узнать название двигателя через эту информацию.

  • mobile: логическое значение, указывающее, является ли устройство пользовательского агента мобильным устройством.

С момента зависания userAgent имя и версия ОС не могут быть известны синхронно. Вместо этого вы можете получить имя, версию и полную версию ОС асинхронно с помощью метода getHighEntropyValues.

Это использование userAgentData. Почему мы исследуем и готовимся?

Потому что каждый день нашим сервисом пользуются более 30 миллионов человек. Все наши службы используют @egjs/agent для получения информации об ОС или браузере. Кроме того, многие компоненты используют модуль агента. Однако, если userAgent внезапно зависает, наш сервис может быть парализован. Если пользователей будет много, это будет большим ударом.



Так что нам нужно поддерживать клиентские подсказки в @egjs/agent. Однако во многих службах userAgent используется синхронно или постоянно, как показано в приведенном ниже коде.

Что делать с зависанием userAgent?

Даже если userAgent заморожен, некоторые из них можно использовать как сейчас.

Возможно при синхронном подаче

  • Проверьте название браузера, основную версию
  • Проверить мобильный
  • Проверьте iOS, Android
  • Проверить webkit, хром
  • Проверьте старую ОС, версию ОС (диапазон поддержки Chrome 84 или меньше)
    < Android 5.0
    < Mac OS X 10.10
    < Windows 7
    < iOS Unknown

Стало непонятно, какая ОС, кроме Android. Но iOS может проверить. Это связано с тем, что движок браузера iOS - это целиком вебкит. Разве это не chromium? Это mobile и webkit? Тогда это станет iOS.

chromium содержит ключевые слова chrome или chromium. Кроме того, версия webkit не превышает 537.36.

Есть возможность проверить старую версию ОС. Браузеры поддерживают различные ОС. Android поддерживает версии от 5.0 до 84. iOS Safari следует за версией ОС. Даже если еще нет плана поддержки сафари для iOS, существует более широкий спектр проверок, чем для Android.

Невозможно при синхронном приводе

  • Проверьте ОС (Mac с браузерами, кроме Safari, Windows), версию ОС
  • Проверьте полную версию браузера.

Если вы выполняете выборку асинхронно, это то же самое, что и раньше.

  • Вы можете получить точную информацию об агентстве.
  • Проверить ОС (Mac, Windows, Linux), версию ОС
  • Проверьте полную версию браузера.

В getAccurateAgent вы можете получить название ОС, версию и полную версию браузера с помощью метода getHighEntropyValues. Если userAgentData не поддерживается, используется userAgent.

Если вы решитесь использовать синхронно, вам придется выбирать.

  • Вы не можете получить название и версию ОС, отличную от iOS, Android.
  • Вы можете получить только основную версию браузера. Однако, если нет серьезной ошибки, вы в основном проверяете основную версию.
  • Вместо этого сделайте вывод о браузере, webkit или Chrome
  • Невозможно узнать конкретную версию ОС (например, Android 7).

Приведу несколько примеров.

  • Проверьте Mac Safari, все браузеры iOS.
    Все браузеры Mac Safari, iOS - webkit.
  • Проверить версию Android ›= 5
    Начиная с Android 5, клиентские подсказки поддерживаются, а если версия - -1, то это высокая версия.
  • Проверьте версию iOS ›= 10
    Как и Android, iOS изменится на -1 с версии, которая поддерживает клиентские подсказки.

Готовься сейчас!

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

@egjs/agent может получать информацию о браузере и информацию об ОС, которая поддерживает userAgent и userAgentData.

Код и проект можно найти на GitHub. Пожалуйста, обратитесь к документу API, чтобы узнать, как его использовать.

Чтобы использовать с npm или скриптом, выполните следующую команду:

  • npm
npm install @egjs/agent
  • сценарий
<script src="//naver.github.io/egjs-agent/release/latest/dist/agent.min.js"></script>

Если у вас есть какие-либо вопросы или пожелания, не стесняйтесь записывать их в Проблемы с Github.

Спасибо.