Determine OS using javascript

Question

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, eg Windows 98 , Windows Vista could appear as just Windows
• Mobile OSes need to be included too with versions where possible, eg 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;
}

Answer 1

There are a lot of different user agents strings see http://www.user-agents.org/

It would be impractical to sift through them all. Depending on your use case, it would be more beneficial to filter out those that you care about.

There are APIs that you can use however, which have already done the hardwork for you https://developers.whatismybrowser.com/api/features/user-agent-parse is a great tool that will parse user agent strings for you

Here is a more comprehensive list with examples for each https://www.whatsmyua.info/

Answer 2

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.