Недавно мне пришлось создать простой баннер в приложении React, который информирует пользователей, если они используют устаревший браузер, такой как Internet Explorer 11. Первоначально я думал, что эта задача будет довольно простой, но, как ни странно, мне потребовалось немало времени, чтобы понять выбрано лучшее решение (на этот случай). Давайте посмотрим, как я это решил.

Требования

  • Баннер должен отображаться только тогда, когда пользователь посещает приложение в устаревшем браузере.
  • Баннер должен направлять пользователей на веб-сайт, который информирует их о ситуации с их браузером. Я пошел с этого маленького сайта.
  • Компания, в которой я работаю, имеет электронную таблицу с поддерживаемыми и неподдерживаемыми браузерами и их версиями, поэтому это нужно было сопоставить в коде. Например, Chrome 61 классифицируется как устаревший, тогда как Chrome 62 (все еще) в порядке.
  • Я хотел иметь простой API, который бы давал мне имя браузера и его текущую версию.

Расследование

В ходе расследования я обнаружил https://browser-update.org/. Они предоставляют легкую библиотеку JavaScript и автоматически добавляют на ваш сайт уже стилизованный баннер (хотя вы можете его настроить). Однако мне нужно было интегрировать указанный баннер в компонент React, и я решил, что, следовательно, будет проще не использовать эту библиотеку.

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

Случайно просматривая StackOverflow в поисках идей, я наткнулся на эту ветку. Принятый ответ от Дханила показался мне многообещающим, поэтому я решил попробовать и (буквально) завершить его.

Решение

Опять же, приведенный ниже фрагмент не мой, он принадлежит парню по имени Дханил из StackOverflow. Благодарим его за предоставление этого удобного фрагмента кода.

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

Однако я решил, что мне нужен глобальный класс, который предоставит мне удобный API, например isSupported() или isIE(). Вот результат:

  • Обратите внимание, что в конструкторе я предоставляю объект со всеми браузерами и их версиями без поддержки. Если версия браузера выше этого числа, она поддерживается, более низкая или равная версия означает, что это не так. Конечно, вы можете получить эту информацию из конечной точки или JSON внутри вашего проекта, но в моем случае это нормально, как есть.
  • Метод _detectBrowser() предназначен для использования в качестве частного метода и вызывается в конструкторе только один раз, заполняя свойство this.browser.
  • Теперь у вас есть доступ к общедоступному API, вызывая методы, такие как isFirefox или isSupported(). Вы можете включить этот класс в любую часть вашего приложения и принимать решения на его основе.
if ((new BrowserDetector).isIE) {
  toggleOutdatedBrowserMessage(); // Or whatever...
}

Если вы хотите увидеть реальный пример того, как вы можете использовать приведенный выше скрипт в приложении React, вы можете взглянуть на этот фрагмент:

Вы можете увидеть один функциональный компонент с именем TopBanner и компонент основного класса с именем App. App включает TopBanner и дает ему свойство open, которое может быть истинным или ложным. В компоненте App мы используем метод жизненного цикла под названием componentDidMount, который вызывается каждый раз, когда компонент монтируется в DOM. Если это так, он запустит наш небольшой скрипт детектора браузера и установит локальное состояние, поэтому переключит TopBanner.

Внутри функционального компонента TopBanner я просто поместил одно условие, которое проверяет, установлено ли для open значение true или false. Во втором случае в DOM ничего не отображается, как будто компонента не существует. В противном случае мы отображаем сообщение, которое может быть расширено кнопкой закрытия и некоторым стилем.

Заключение

С помощью приведенного выше кода довольно легко и надежно определять браузеры и их версии. Возможно, вы захотите использовать уже существующую библиотеку (подобную этой), но я лично предпочитаю не добавлять больше зависимостей, чем это абсолютно необходимо.

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

В моем случае я не блокирую пользователей из-за их браузера, а просто показываю им простое информативное сообщение. Если пользователь заходит в приложение с IE9, что ж, в любом случае он далеко не уедет.