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.
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";
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";
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";
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}`)
}
This is how it looks on Mac:
On Windows:
And on Linux:
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:
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());
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:
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 Interview Coach (@CoachCoding) August 28, 2020
.#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
Top comments (7)
You can also use
iosPlatforms.includes(platform)
instead ofiosPlatforms.indexOf(platform) !== -1
Cool, thanks for the info! π
can you give an example?
Gotta love good ol vanilla js!
Hell yes! π
Love it! your lesson will help a lot, in case we need to implement this feature in any App, thanks Vaibhav!
Definitely! Thanks for checking it out :)