VueCraft NPM

OS Detect ​

Лёгкое определение ОС, форм-фактора и рантайм-окружения для браузера, Node.js и SSR — с React-хуками и Vue composables. Без зависимостей.

Возможности ​

  • getOS() — возвращает типизированный строковый идентификатор текущей ОС; приоритет проверки гарантирует, что ChromeOS никогда не определится как Linux
  • Булевы функции — detectIsIOS(), detectIsMacOS(), detectIsAndroid(), detectIsWindows(), detectIsLinux(), detectIsChromeOS() — все синхронные и кэшируемые
  • detectIsWindows11() — асинхронная; использует navigator.userAgentData.getHighEntropyValues() в браузере и os.release() в Node.js
  • Категория устройства — isMobileDevice() и isDesktopDevice() для быстрых грубых проверок
  • getFormFactor() — 'phone' | 'tablet' | 'desktop' | 'tv', по ОС и физическому размеру экрана, а не по наличию тачскрина — сенсорный ноутбук на Windows всё равно 'desktop'
  • detectHasTouch() и getPrimaryInput() — есть ли у устройства сенсорный экран вообще, и какой тип ввода ('mouse' | 'touch') сейчас реально основной; второе обновляется вживую на гибридных устройствах при подключении/отключении клавиатуры или мыши
  • getPixelRatio() и detectIsTV() — соотношение физических и логических пикселей, и определение смарт-ТВ (best-effort)
  • getRuntime() — 'node' | 'browser' | 'webworker', а также отдельные проверки detectIsNode(), detectIsBrowser(), detectIsWebWorker(), detectIsElectron() и detectIsPWA()
  • React-хуки — useOS(), useIsWindows11(), useFormFactor(), useRuntime() и живой usePrimaryInput() из os-detect/react
  • Vue composables — те же пять, из os-detect/vue, как readonly-ссылки
  • Поддержка Node.js — читает process.platform в Node.js (в том числе на Node 21+, где рантайм добавляет собственный синтетический глобал navigator); detectIsWindows11() использует номер сборки из os.release()
  • Определение iPadOS 13+ — корректно определяет iPad, отправляющие Macintosh в userAgent, через navigator.maxTouchPoints
  • Кэш результатов — каждая функция кэширует свой результат после первого вызова, кроме getPrimaryInput()/getPixelRatio() (намеренно живые — см. API Reference)
  • Никаких runtime-зависимостей — никаких внешних пакетов; React и Vue — опциональные peer-зависимости
  • Tree-shakeable ESM — импортируйте только то, что используете; UMD- и CJS-сборки также включены

Как это работает ​

Браузер — сначала проверяет navigator.userAgentData.platform (Chrome 90+ / Edge 90+, не подделывается через переопределение userAgent), затем переходит на разбор navigator.userAgent регулярным выражением для браузеров, которые его не реализуют (Firefox, Safari, старый Chrome).

Node.js — читает process.platform напрямую; парсинг userAgent на сервере не выполняется. detectIsWindows11() дополнительно динамически импортирует встроенный модуль os и разбирает номер сборки из os.release().

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

Форм-фактор и рантайм-окружение работают по той же идее, с двумя намеренными исключениями. getFormFactor() и getRuntime() собраны из таких же кэшируемых синхронных проверок, что и getOS(). getPrimaryInput() и getPixelRatio() не кэшируются — основной тип ввода на гибридном устройстве или соотношение пикселей окна могут по-настоящему измениться прямо во время сессии, поэтому обе функции каждый раз заново читают живой сигнал вместо того, чтобы навсегда замораживать первый ответ.