Javascript를 통해 웹 앱의 OS를 확인하는 방법

브라우저에서 호스트 시스템 감지

프로그레시브 웹 앱을 작성 중이고 어떤 종류의 시스템이 에이전트를 호스팅하는지 확인하려는 경우 간단한 API가 도움이 될 수 있습니다.

이 기사의 코드를 사용하여 최신 웹 앱만 명시적으로 대상으로 지정합니다. OS 또는 브라우저 버전 감지는 과거에 취약하기로 악명이 높았으므로 "내비게이터"에서 사용할 수 있는 새로운 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

보시다시피 애플리케이션을 호스팅하는 시스템의 종류를 결정하는 논리는 매우 간단하며 몇 줄의 코드만 있으면 됩니다.