Search code examples
javascriptuser-agent

Determine OS using javascript


I am looking for a generic way in Javascript of obtaining the client's operating system. Many documented solutions use the user agent and I have come across similar questions/answers on stack overflow which are outdated. A sample function is provided below but I am wondering are there more comprehensive versions which meet the following guidelines:

  • All modern and widely used OS should have a version, for example instead of just Windows, have Windows 10 or Windows 7
  • Older and largely redundant OSes can be grouped together, e.g. Windows 98, Windows Vista could appear as just Windows
  • Mobile OSes need to be included too with versions where possible, e.g. Android 7.0
  • The code shouldn't be excessively long, the aim is to distinguish between the current most popular systems.

The example below was put together without too much thought and I am looking for a better version of it

function getOS() {
  var osStr;
  var ua = navigator.userAgent.toLowerCase();

  if (ua.indexOf("windows xp") !== -1) {
    osStr = "WindowsXP";
  } else if (ua.indexOf("windows nt 6.1") !== -1) {
    osStr = "Windows7";
  } else if (ua.indexOf("windows nt 10.0") !== -1) {
    osStr = "Windows10";
  } else if (ua.indexOf("iemobile") !== -1 || ua.indexOf("windows phone") !== -1) {
    osStr = "WindowsMobile";
  } else if (ua.indexOf("windows") !== -1) {
    osStr = "Windows";
  } else if (ua.indexOf("ipad") !== -1) {
    osStr = "ipad";
  } else if (ua.indexOf("ipod") !== -1) {
    osStr = "iTouch)";
  } else if (ua.indexOf("iphone") !== -1) {
    osStr = "iPhone)";
  } else if (ua.indexOf("cros") !== -1) {
    osStr = "ChromeOS";
  } else if (ua.indexOf("android") !== -1) {
    osStr = "Android";
  } else if (ua.indexOf("blackberry") !== -1) {
    osStr = "Blackberry";
  } else if (ua.indexOf("palm") !== -1) {
    osStr = "PalmOS";
  } else if (ua.indexOf("kindle") !== -1) {
    osStr = "Kindle";
  } else if (ua.indexOf("ubuntu") !== -1) {
    osStr = "Ubuntu";
  } else if (ua.indexOf("linux") !== -1) {
    osStr = "Linux";
  } else if (ua.indexOf("nix") !== -1) {
    osStr = "UNIX";
  } else {
    osStr = "Unknown";
  }

  return osStr;
}

Solution

  • Was looking to combine the OS with the user agent into a single string and the UAParser library at https://github.com/faisalman/ua-parser-js (found through the answer above) works well for both. The library is currently up to date and looks like it is maintained well. Its minified version is 19KB. Created a function

      function getPlatform() {
          var uap = UAParser(navigator.userAgent);
          var osVersion = uap.os.version;
          if (osVersion == null) {
            osVersion = "";
          }
          var browserVersion = uap.browser.major;
          if (browserVersion == null) {
            browserVersion = "";
          }
    
          var platform = uap.os.name + osVersion + "_" + uap.browser.name + browserVersion;
          platform = platform.replace(/\s/g, '');
    
          return platform;
      }
    

    which when called returns a no whitespace string OS_UA which is forwarded as part of the URL from client to server.