От автора: простой и эффективный способ определения мобильных браузеров. Предложение Client Hints уже доступно в Google Chrome и представляет собой очень экономичный способ обнаружения (среди прочего) мобильных устройств.
Стоит ли мне его уже использовать?
Если эта функция широко не поддерживается, стоит ли ее использовать?
Поскольку на Chrome приходится большая часть просмотров веб-страниц, этот подход эффективен для большинства посещений и должен стать еще более эффективным, поскольку рекомендация будет принята большим количеством браузеров.
Используя эту функцию сегодня, мы потенциально можем улучшить производительность для большинства пользователей и сеансов.
Недостатки парсинга User-Agent
Один из известных методов определения того, считается ли браузер мобильным, настольным или любым другим форм-фактором — это извлечение информации из строки пользовательского агента, особенно для серверов, которые не могут выполнять определение функций. Так почему я считаю это неоптимальным?
Это очень нестабильно: Строки пользовательского агента нерегулярны и не соответствуют строгому формату, в результате все проверки выполняются вручную. Целые библиотеки и базы данных построены на этой ошибке.
Это затратно: Из-за низкой точности структуры строки пользовательского агент, сопоставления являются сложными, часто не ориентированными на какую-либо конкретную функцию пользовательского агента.
По этим и другим причинам группа сообщества W3C предложила стандартный способ объявления функций пользовательского агента, который включает, среди прочего, особую подсказку для определения мобильного браузера.
Примеры реализации
Реализация браузера с резервным вариантом
Используйте интерфейс navigator.userAgentData, доступный в браузерах, здесь демонстрируется откат к старой проверке строки пользовательского агента.
|
1 2 3 4 5 |
const uaDataIsMobile = window.navigator.userAgentData?.mobile const isMobile = typeof uaDataIsMobile === 'boolean' ? uaDataIsMobile : legacyIsMobileCheck(window.navigator.userAgent) |
Реализация сервера с резервным вариантом
Используйте заголовки Client Hints. Аналогичный подход на сервере (в этом примере используется express API для извлечения заголовка без учета регистра).
|
1 2 3 4 5 |
const clientHintMobile = request.get('sec-ch-ua-mobile') const isMobile = clientHintMobile ? clientHintMobile.includes('1') // values: ?1 or ?0 : legacyIsMobileCheck(request.get('user-agent')) |
В заключение
Хотя рекомендуется отдавать предпочтение определению функций, когда это применимо, иногда необходимо определить, с каким устройством мы имеем дело, особенно на сервере, перед обслуживанием страницы. Подсказки пользовательского агента обеспечивают простой, легкий в использовании, надежный и производительный подход. Я рекомендую сегодня включить это предложение в ваш код.
Автор: omrilotan
Источник: //medium.com
Редакция: Команда webformyself.
