Skip to content

Detect User’s Browser & OS Using JavaScript

Detect User's Browser and Operating System using JavaScript

Let’s find out how we can detect the user’s browser and the operating system (OS) using plain JavaScript.

Contents hide
1. The Navigator
2. The User Agent Data
3. One liner code
3.1. Comments

The Navigator

To get such information, we can use the window.navigator object.

💡Good to know

You can also use the shorter version: navigator

Navigator allows us to get a plethora of data about the user such as their browser, its version, the OS, language, plugins, and many more.

⚠️ Warning

Bear in mind that because the Navigator is part of the Window object, which is only available in the browser environment, we are not able to get the browser, the OS, and other data if the code is executed on the server, or any other applications and scripts that don't have access to the Window object.

 

🎥 Should you prefer a video guide instead, I got you covered:


 

The User Agent Data

Some of the most commonly used ways to obtain information about the user’s device are through the navigator.appVersion, navigator.platform, and navigator.userAgent.

You would think Bingo!

But these are some of the deprecated properties that will soon go away, along with others.

Do not use appVersion, platform or userAgent!

Use navigator.userAgentData instead.

⚠️ Warning

Some browsers may not yet support this property, so you'd have to use the userAgent property for the time being.

 

navigator.userAgent compatibility chart
`userAgentData` is not yet compatible with Firefox, Safari, and a few other browsers at the time of writing. Check the docs.

Coming back to navigator.userAgentData, this returns the following data:

The brands object stores the types of browser and their version.

💡Good to know

Do not rely on something appearing at a certain index, because the values can vary in order.

The mobile boolean returns if it’s a mobile browser.

Lastly, platform represents the operating system.

But now you may ask…

navigator.userAgentData provides much less data than the deprecated appVersion, platform and userAgent properties.

What’s going on?

The short answer is that the plan is to increase the privacy of the web user and reduce the amount of data the browsers collect.

One liner code

You can use the following one-liner to check if a user is using a certain browser and operating system.

JSON.stringify(navigator.userAgentData).includes("Chromium"); // returns true or false

Let me know what you think about this article in the comments section below.

If you find this article helpful, please share it with others and subscribe to the blog to support me, and receive a bi-monthly-ish e-mail notification on my latest articles.   
  

Comments

 
          

Tags: