Як визначити операційну систему (ОС) за допомогою JavaScript

Іноді під час створення веб-застосунків або веб-сайтів необхідно визначити операційну систему користувача. Це може бути корисним для застосування різних стилів CSS, збору аналітичних даних або адаптації певних функцій залежно від середовища користувача. Хоча існує багато бібліотек та плагінів для виявлення ОС, у простих випадках цілком можливо реалізувати цю функціональність без будь-яких сторонніх інструментів.

У більшості випадків вам не потрібно визначати точну версію операційної системи — достатньо знати її загальний тип. Найпоширеніші операційні системи, з якими ви можете працювати, це Windows, macOS, Linux, Android та iOS. Ці платформи охоплюють більшість користувачів і зазвичай достатні для практичних завдань фронтенду.

Існує кілька реальних випадків використання для виявлення операційної системи. Наприклад, ви можете відображати різні посилання для завантаження залежно від того, чи користувач використовує Windows, чи macOS. Ще один поширений сценарій — це налаштування поведінки інтерфейсу користувача або відображення інструкцій, специфічних для платформи. У деяких випадках виявлення ОС також може бути використано для покращення взаємодії з користувачем шляхом адаптації контенту або функціональності до пристрою користувача.

JavaScript

function detectOS() {
    const platform = navigator.platform.toLowerCase(),
        iosPlatforms = ['iphone', 'ipad', 'ipod', 'ipod touch'];

    if (platform.includes('mac')) return 'MacOS';
    if (iosPlatforms.includes(platform)) return 'iOS';
    if (platform.includes('win')) return 'Windows';
    if (/android/.test(navigator.userAgent.toLowerCase())) return 'Android';
    if (/linux/.test(platform)) return 'Linux';

    return 'unknown';
}

Описаний тут підхід не має на меті охопити всі можливі операційні системи, а зосереджується на найпоширеніших. Водночас логіку можна легко розширити або змінити, якщо вам знадобиться підтримка додаткових платформ у майбутньому.

Приклад працюючого коду ви можете побачити на Codepen: https://codepen.io/igorrybalko/pen/vEBvPgm