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

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

Обнаружить хост-систему в браузере

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

Я явно нацелен только на современные веб-приложения с кодом в этой статье. Определение версии ОС или браузера в прошлом было общеизвестно ненадежным, поэтому новые API, доступные в «навигаторе», обеспечивают надежное решение таких задач, но доступны только в современных браузерах.

Проверка платформы

В следующем коде показано, как надежно определить среду с помощью Javascript. Он обращается к «навигатору», объекту, доступному в окне, который предоставляет полный набор API для постепенного улучшения вашего веб-приложения.

/**
 * Retrieve the host platform in a 
 * best-effort way w/ normalized output.
 */
export function getAgentSystem(){
  if(!("navigator" in window)){
    return "unknown";
  }
  
  // Use the modern 'web hints' provied by
  // 'userAgentData' if available, else use
  // the deprecated 'platform' as fallback.
  const platform = (navigator.userAgentData?.platform || navigator.platform)?.toLowerCase();
 
 if(platform.startsWith("win")) return "windows";
 if(platform.startsWith("mac")) return "macos";
 if(platform.startsWith("linux")) return "linux";
 return "unknown";
}

// Just to give you an idea, the following properites
// are options for the legacy 'navigator.platform':
//
// HP-UX
// Linux i686
// Linux armv7l
// Mac68K
// MacPPC
// MacIntel
// SunOS
// Win16
// Win32
// WebTV OS

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

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

Распространенным вариантом использования для определения ОС хоста является предоставление в коде различных сокращений клавиатуры, а затем тегов «kbd». Например, macOS использует клавишу «Command», тогда как Windows и Linux используют клавишу «Control» для многих ярлыков.

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

Предложения

Связанные

Приложение

Языки