Как с помощью JavaScript проверить, использует ли пользователь встроенный браузер?

Как можно проверить, что пользователь открыл страницу через встроенный браузер, который открывается при переходе по ссылке или при авторизации wifi? Существует ли подходящий media query для этой задачи или же необходимо применить browser detector? Мне кажется, что многие пользователи сталкиваются с этой проблемой при использовании встроенного браузера, однако я не нашел достаточно информации об этом в интернете.
  • 9 января 2024 г. 10:30
Ответы на вопрос 3
Определить с помощью JavaScript, что страница открыта во встроенном браузере приложения (таком как браузер в Facebook, Instagram или какой-либо браузер платформы для гостевого Wi-Fi), может быть сложной задачей, так как часто эти браузеры не предоставляют явные индикаторы того, что именно их используют.

Тем не менее, есть несколько способов, которые могут помочь вам сделать предположение о том, что страница открыта во встроенном браузере:

1. **Анализ User-Agent строки**: Вы можете проверить строку User-Agent на наличие определенных ключевых слов, которые могут указывать на встроенные браузеры. Например, составная часть строки User-Agent, как "FBIOS" указывает на Facebook для iOS, а "Instagram" может указывать на браузер Instagram.

```javascript
const userAgent = navigator.userAgent || navigator.vendor || window.opera;

// Проверка на Facebook's in-app browser для iOS
if (userAgent.indexOf("FBIOS") > -1) {
    // Facebook app's built-in browser
}

// Проверка на Instagram
if (userAgent.indexOf("Instagram") > -1) {
    // Instagram's built-in browser
}
```

2. **Ограниченные возможности браузеров**: Некоторые встроенные браузеры имеют ограниченные возможности в сравнении со стандартными мобильными браузерами. Примеры таких ограничений могут включать недостаточную поддержку JS API или отсутствие определённых глобальных объектов. Вы можете попытаться выявить такие факторы с помощью функционального детектирования.

```javascript
if (typeof window.someAPI === 'undefined') {
    // Возможно, это встроенный браузер с ограниченным набором функций
}
```

3. **Анализ поведения**: Встроенные браузеры могут иметь определённое поведение или стили, которые они применяют к отображению контента. Например, иметь специфические размеры окна, или показывать/скрывать определённые кнопки интерфейса. Вы можете использовать JavaScript для проверки этих аспектов и попытаться выявить паттерны.

```javascript
// Проверка размеров окна может помочь определить встроенный браузер
if (window.outerHeight - window.innerHeight > 100) {
    // Возможно, открыт встроенный браузер с дополнительной панелью
}
```

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

К сожалению, нет стандартного способа или media query для определения использования встроенного браузера, так как это не стандартизированный сценарий использования браузера и может меняться от приложения к приложению. Некоторые приложения могут добавлять специальные заголовки в запросы, но это также не является
Есть ли какой-то media query для этого?

Нет.
Или всякими browser detector-ами пользоваться надо?

Только косвенно, по User-Agent или отсутствию некоторых функций, например serviceWorker.

Пример проверки "встроенных браузеров", используя User-Agent:
Пример проверки "встроенных браузеров", используя отсутствие функции serviceWorker:
Библиотека Bowser позволяет проще получать данные о браузере.
Попробуйте свойство navigator 
console.log(navigator.userAgent)

Для ознакомления: тыц
Похожие вопросы