Определение ОС пользователя через JavaScript: название и версия

Быстрый ответ

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

const detectOS = () => ({
  'win': 'Windows',
  'mac': 'macOS',
  'linux': 'Linux',
  'android': 'Android',
  'iphone|ipad|ipod': 'iOS'
})[Object.keys(navigator).find(k => new RegExp(Object.keys(detectOS()).join('|')).test(navigator[k].toLowerCase()))] || 'unknown';

console.log(detectOS()); // Вот оно, название операционной системы

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

Обеспечение точности и сохранение конфиденциальности

Получили быстрый ответ? Давайте теперь вдадимся в детали и изучим API navigator, обеспечивая при этом конфиденциальность пользовательских данных.

Детальное определение операционной системы

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

const getOSDetails = () => {
  if (navigator.userAgentData && navigator.userAgentData.platform) {
    return navigator.userAgentData.platform; // Прямо к делу: здесь кроется название операционной системы
  }
};

Подробнее об этом расскажет наш спикер на видео

Определение особенностей платформы

Не забывайте об особенностях разных платформ. Если устройство пользователя на Chrome OS будет отображаться как Windows, это приведет к непониманию.

const matchPlatform = () => {
  let platform = navigator.platform.toLowerCase();
  switch (true) {
    case /win/.test(platform):
      return `Windows (Версия: ${(navigator.oscpu || '').split(' ')[2]})`;
    case /mac/.test(platform):
      return 'macOS';
    // И так далее
  }
};

Проблемы с определением агента пользователя

Будьте аккуратны с данными User Agent. Они могут ввести в заблуждение и помешать корректному определению операционной системы – и это настоящий тест на внимательность разработчика.

Уважение к приватности пользователя

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

Визуализация

Понимание процесса определения операционной системы при помощи JavaScript можно сравнить с хирургической операцией: порой нужна особая точность и внимание к мелочам.

Следим за операционной системой как хирург за пациентом 💉:

Диагностика доктора JavaScript (объект navigator 🩺):

const os = navigator.platform; // Да, доктор нашел то, что искал

Для помощи обычным пользователям:

| ОС                        | Обозначение (platform) |
| ------------------------- | ---------------------- |
| Затаённый Windows (Win32)   | 🧠💡                    |
| macOS в сердце (MacIntel) | ❤️🍏                    |
| Android в руках (Android)     | 💪💤                    |
| Бдительный iOS (iPhone)         | 🍏👀                    |

Простите за шутку, на самом деле это таблица соответствий названий операционных систем и визуальных символов. Это тот метод, который мог бы использовать доктор JavaScript!

Глубокое исследование определения ОС

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

Анализ строки userAgent

Строка userAgent — это поразительный источник информации, но в то же время и хаотичная мишура, требующая анализа.

const getOSFromUserAgent = () => {
  let userAgent = navigator.userAgent || navigator.vendor || window.opera;
  // Приступим к разбору строки userAgent. Удачного расследования!
  // ...
};

Осторожно: изменения в userAgent со стороны браузеров могут вызвать сложности.

Отказ от устаревших технологий

Важное напоминание: Flash — пережиток прошлого, такой же древний как дискеты. Избавьтесь от него в своих проектах.

Мобильные устройства

Не забывайте также учесть мобильные устройства — адаптируйте ваше решение для их определения. Это улучшит пользовательский опыт, и пользователи обязательно это оценят.

Полезные материалы

1. Navigator – Web APIs | MDN — здесь подробно описан JavaScript-интерфейс Navigator.
2. How to find the operating system details using JavaScript? – Stack Overflow — на этом форуме представлены ответы на различные вопросы по определению операционной системы.
3. Can I use... Support tables for HTML5, CSS3, etc — узнайте, поддерживает ли ваш браузер определённые методы navigator.
4. JavaScript Window Navigator – W3Schools — здесь представлены основы работы с API Navigator и примеры кода.
5. GitHub – bestiejs/platform.js: A platform detection library — библиотека для определения платформы, если вы предпочитаете не копировать готовый код.