Что можно узнать о браузере через JavaScript

Через JavaScript можно узнать часть информации о браузере и среде: язык, online-статус, user agent, размер экрана, поддержку некоторых API. Но важно помнить: современные браузеры ограничивают точность таких данных ради приватности. Поэтому лучше проверять не «какой это браузер», а «поддерживает ли он нужную возможность»

Базовый объект для такой информации — navigator

Минимальный пример

Откройте Console в браузере и выполните:

console.log(navigator.language);
console.log(navigator.onLine);
console.log(navigator.userAgent);

Пример результата:

ru-RU
true
Mozilla/5.0 ...

navigator.language показывает предпочитаемый язык интерфейса. navigator.onLine сообщает, считает ли браузер соединение активным. navigator.userAgent возвращает строку с данными о браузере и платформе, но полагаться на нее как на идеальную правду нельзя

Что реально можно посмотреть

Частые свойства:

console.log("Язык:", navigator.language);
console.log("Online:", navigator.onLine);
console.log("User Agent:", navigator.userAgent);
console.log("Платформа:", navigator.platform);
console.log("Ширина экрана:", screen.width);
console.log("Высота экрана:", screen.height);

Эти данные полезны для диагностики, логов, подсказок пользователю и отладки. Например, можно показать предупреждение, если пользователь потерял соединение

Проверка online-статуса

window.addEventListener("online", () => {
  console.log("Соединение восстановлено");
});

window.addEventListener("offline", () => {
  console.log("Соединение потеряно");
});

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

Как определить браузер

Технически можно читать navigator.userAgent:

const ua = navigator.userAgent;

if (ua.includes("Chrome")) {
  console.log("Похоже на Chrome или Chromium-браузер");
}

Но это хрупкий путь. Строки user agent часто похожи, а разные браузеры могут содержать одинаковые фрагменты. Например, Chromium-браузеры могут иметь общие признаки

Практичнее проверять конкретную возможность:

if ("geolocation" in navigator) {
  console.log("Геолокация поддерживается");
} else {
  console.log("Геолокация недоступна");
}

Такой подход называется feature detection: проверяем не название браузера, а наличие нужной функции

Пример: проверить поддержку API перед использованием

Допустим, вы хотите сохранить настройку в localStorage. Сначала проверьте, доступна ли такая возможность:

if ("localStorage" in window) {
  localStorage.setItem("theme", "dark");
  console.log("Настройка сохранена");
} else {
  console.log("localStorage недоступен");
}

Еще пример для Clipboard API:

if (navigator.clipboard) {
  console.log("Можно работать с буфером обмена");
} else {
  console.log("Clipboard API недоступен");
}

Такой код устойчивее, чем проверка конкретного браузера. Если новая версия браузера добавит поддержку API, ваш код начнет работать без отдельного условия

Пример: показать диагностический блок на странице

<pre id="info"></pre>

<script>
  const info = document.querySelector("#info");

  const lines = [
    `Язык: ${navigator.language}`,
    `Online: ${navigator.onLine}`,
    `Ширина экрана: ${screen.width}`,
    `Высота экрана: ${screen.height}`,
    `User Agent: ${navigator.userAgent}`
  ];

  info.textContent = lines.join("\n");
</script>

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

Что нельзя узнать надежно

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

Если браузер или пользователь скрывает часть данных, это нормально. Не строите критическую бизнес-логику на user agent

Практический сценарий для поддержки сайта

Если пользователь пишет «у меня не работает кнопка», можно попросить его открыть диагностическую страницу, которая покажет:

• язык браузера;
• размер окна;
• online-статус;
• user agent;
• поддержку нужного API.

Это не нарушает приватность само по себе, если вы не собираете лишние данные и объясняете, зачем они нужны. Для поддержки обычно достаточно технической сводки, а не точного «портрета» устройства

Частые ошибки

Делать отдельный код под каждый браузер

Вместо длинного списка if Chrome, if Firefox, if Safari чаще лучше проверять поддержку API

Верить userAgent без проверки

userAgent можно изменить, а его формат исторически перегружен. Для аналитики его достаточно, для критической логики — нет

Путать размер экрана и размер окна

screen.width — это экран. Для окна браузера чаще нужен:

console.log(window.innerWidth);
console.log(window.innerHeight);

Мини-задание

Сделайте страницу, которая выводит:

• язык браузера;
• ширину окна;
• online-статус;
• поддерживается ли localStorage.

Проверка localStorage:

if ("localStorage" in window) {
  console.log("localStorage доступен");
}

Что почитать дальше по JavaScript

Если нужен общий маршрут по теме, откройте рубрику JavaScript. Для соседних задач пригодятся эти разборы:

• Как включить JavaScript в Яндекс Браузере
• Как включить JavaScript в Яндекс Браузере на Android
• Как включить JavaScript в браузере
• Как включить JavaScript в браузере: Chrome, Edge, Firefox и Яндекс Браузер