DEV Community

Cover image for Get OS details from the webpage in JavaScript. πŸ‘·β€β™‚οΈ
Vaibhav Khulbe
Vaibhav Khulbe

Posted on

Get OS details from the webpage in JavaScript. πŸ‘·β€β™‚οΈ

The other day I was making a random demo app in Vue where I wanted to get the user's machine information (not for snooping) but to display the basic information like the Operating System (OS) name with version etc.

I had to confess I was so bad at this that I almost immediately revoked the idea to do such a thing. But now I think if not on Vue, I need to do this with vanilla JS.

Taking this move further, I decided to dynamically add or delete DOM elements after detecting the OS. Though not this, we'll definitely learn how to detect the OS on both web and mobile.


Windows OS GIF

Oops!

Detecting desktop OS (Windows/Mac/Linux)

First, let's detect whether the client's machine is running an OS that seriously needs to ramp up its application store (Windows) or the one which almost all programmers and hackers love the most (Linux) or the OS which can exclusively run XCode (Mac).

This can simply be achieved by analyzing the value of navigator.appVersion of the window object. This one simple thing can do many things. Not only it will tell you about the current device OS (we'll see more about this below), but also, it can be used to get the version information about the browser it's currently running on.

Let's declare detectedOS as a variable in JS which holds the String information regarding the OS type. Next, we'll make three if checks (switch can work too).



// default value just in case if nothing is detected
var detectedOS = "Unknown OS"; 


Enter fullscreen mode Exit fullscreen mode

Inside the first check, let's use the navigator.appVersion to get the index of the three major OS platforms: Win (Windows), Mac (MacOS), and Linux.



if (navigator.appVersion.indexOf("Mac") != -1) 
    detectedOS = "MacOS";


Enter fullscreen mode Exit fullscreen mode

Here, we check if the index value is not equal to 1, then we set our variable value to "MacOS".

Similarly, we can perform the same check for the other two OS:



var detectedOS = "Unknown OS";

if (navigator.appVersion.indexOf("Mac") != -1) 
    detectedOS = "MacOS";

if (navigator.appVersion.indexOf("Win") != -1) 
    detectedOS = "Windows";

if (navigator.appVersion.indexOf("Linux") != -1) 
    detectedOS = "Linux";


Enter fullscreen mode Exit fullscreen mode

Okay, all cool but how to display the user that a specific OS has been detected? There are multiple ways to do this. One good way would be:

Adding an alert() which says "Device OS is: " when a button is clicked.



var detectOS = "Unknown OS";

if (navigator.appVersion.indexOf("Win") != -1) 
    detectOS = "Windows";

if (navigator.appVersion.indexOf("Mac") != -1) 
    detectOS = "MacOS";

if (navigator.appVersion.indexOf("Linux") != -1) 
    detectOS = "Linux";

document.querySelector('button').addEventListener('click', detect);

function detect() {
   alert(`Device OS is: ${detectOS}`)
}


Enter fullscreen mode Exit fullscreen mode

This is how it looks on Mac:

Detection on Mac

On Windows:

Detection on Windows

And on Linux:

404 image

Sorry, I don't have a Linux machine πŸ™ƒ

Detecting mobile OS (Android/iOS)

With the current code, if you try to run it on mobile (via CodePen), you'll see the following alert:

Android demo 1

While it's true that Android is based on a modified version of Linux, it's not entirely a Linux OS. So how do we make sure that "Android" is detected here instead of "Linux"?

This is explained by a Stackoverflow user Vladyslav Turak in the following answer:

I learnt a lot about window.navigator object and its properties: platform, appVersion and userAgent. To my mind, it's almost impossible to detect user's OS with 100% sure, but in my case 85%-90% was enough for me.

So, after examining tons of Stack Overflow answers and some articles, I…



function getOS() {
  var userAgent = window.navigator.userAgent,
      platform = window.navigator.platform,
      macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'],
      windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'],
      iosPlatforms = ['iPhone', 'iPad', 'iPod'],
      os = null;

  if (macosPlatforms.indexOf(platform) !== -1) {
    os = 'Mac OS';
  } else if (iosPlatforms.indexOf(platform) !== -1) {
    os = 'iOS';
  } else if (windowsPlatforms.indexOf(platform) !== -1) {
    os = 'Windows';
  } else if (/Android/.test(userAgent)) {
    os = 'Android';
  } else if (!os && /Linux/.test(platform)) {
    os = 'Linux';
  }

  return os;
}

alert(getOS());


Enter fullscreen mode Exit fullscreen mode

As you can see, we are using the same if statement checks as before, but for Android, we are testing /Android/.test with the navigator.userAgent.

This is quite a nice workaround and upon running it on my Android phone, here is the result:

Android demo

I don't have an iOS device to check for that device. You can do so and let me know below in the comments.

Note that the guy who gave the answer to this has clearly stated that:

This code works properly. I tested it on all the OS: MacOS, iOS, Android, Windows and UNIX, but I can't guarantee 100% sure.


Thanks for reading, I appreciate it! Have a good day. (βœΏβ—•β€Ώβ—•βœΏ)


Debugging can be tough πŸ˜‚
.#coding #developer #webdevelopment #iosdevelopment #javadevelopment #java #python #ruby #php #html #javascript #codingmeme #codingjoke #developerhumor #devhumor #devhumour #programmerhumor #programmingmeme #programmingjoke #devlife #webdesign pic.twitter.com/UtkN6iuRBG

β€” Coding Interview Coach (@CoachCoding) August 28, 2020

πŸ“« Subscribe to my weekly developer newsletter πŸ“«

PS: From this year, I've decided to write here on DEV Community. Previously, I wrote on Medium. If anyone wants to take a look at my articles, here's my Medium profile.

Top comments (7)

Collapse
 
markwitt_me profile image
Mark Witt

You can also use iosPlatforms.includes(platform) instead of iosPlatforms.indexOf(platform) !== -1

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

Cool, thanks for the info! 😁

Collapse
 
mutale85 profile image
Mutale85

can you give an example?

Collapse
 
jvarness profile image
Jake Varness

Gotta love good ol vanilla js!

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

Hell yes! 😎

Collapse
 
hasone profile image
HasOne

Love it! your lesson will help a lot, in case we need to implement this feature in any App, thanks Vaibhav!

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

Definitely! Thanks for checking it out :)