Let’s find out how we can detect the user’s Browser and the operating system (OS) using plain JavaScript.
The Navigator
To get such information, we can use the window.navigator object.
Good to know
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
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
userAgent property for the time being.
`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
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
