Обнаружение мобильных браузеров: клиентские подсказки

От автора: простой и эффективный способ определения мобильных браузеров. Предложение Client Hints уже доступно в Google Chrome и представляет собой очень экономичный способ обнаружения (среди прочего) мобильных устройств.

Стоит ли мне его уже использовать?

Если эта функция широко не поддерживается, стоит ли ее использовать?

Обнаружение мобильных браузеров: клиентские подсказки

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Недостатки парсинга User-Agent

Один из известных методов определения того, считается ли браузер мобильным, настольным или любым другим форм-фактором — это извлечение информации из строки пользовательского агента, особенно для серверов, которые не могут выполнять определение функций. Так почему я считаю это неоптимальным?

Это очень нестабильно: Строки пользовательского агента нерегулярны и не соответствуют строгому формату, в результате все проверки выполняются вручную. Целые библиотеки и базы данных построены на этой ошибке.

Это затратно: Из-за низкой точности структуры строки пользовательского агент, сопоставления являются сложными, часто не ориентированными на какую-либо конкретную функцию пользовательского агента.

По этим и другим причинам группа сообщества W3C предложила стандартный способ объявления функций пользовательского агента, который включает, среди прочего, особую подсказку для определения мобильного браузера.

Примеры реализации

Реализация браузера с резервным вариантом

Используйте интерфейс navigator.userAgentData, доступный в браузерах, здесь демонстрируется откат к старой проверке строки пользовательского агента.

Реализация сервера с резервным вариантом

Используйте заголовки Client Hints. Аналогичный подход на сервере (в этом примере используется express API для извлечения заголовка без учета регистра).

В заключение

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

Автор: omrilotan

Источник: https://medium.com

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.