seanmcp.com

How to get the browser and version in JavaScript

For a recent project, I wanted to display the browser and version on the screen. I figured that this would be possible in JavaScript, so I went searching around.

This led me to the User-Agent, "sniffing", and its wild and crazy history. I also read a bunch of articles on why serving different content to different browsers is a bad idea. I'll link them at the bottom of this article.

I just want to display the browser and version, so the referencing the user agent is a fine enough solution (even if temporary). But you should definitely think twice before you go user agent sniffing.

Accessing the user agent

You can access the user agent from the read-only global Navigator interface. That's as simple as writing:

console.log(navigator.userAgent)

Depending on your browser, you should see a few different outputs:

// Firefox
// Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:77.0) Gecko/20100101 Firefox/77.0

// Chrome
// Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36

// Edge (Chromium)
// Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36 Edg/81.0.416.77

// Safari
// Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1 Safari/605.1.15

These are fascinating, but for this article we are only interested in the differences. If we just look at the tail for each, we get:

With this, we know have enough information to parse the string.

Sniffing logic

Chrome, Edge, and Safari all identify as "Safari", so let's start our logic with the simplest user agent: Firefox. After that, it's a process of determining who has a unique string to search for:

const { userAgent } = navigator

if (userAgent.includes('Firefox/')) {
    // Firefox
} else if (userAgent.includes('Edg/')) {
    // Edge (Chromium)
} else if (userAgent.includes('Chrome/')) {
    // Chrome
} else if (userAgent.includes('Safari/')) {
    // Safari
}

Once you can identify the browser from the user agent, it's just a matter of using your favorite string parsing method to grab the version. Here's the code for Firefox:

if (userAgent.includes('Firefox/')) {
    // Firefox
    console.log(`Firefox v${userAgent.split('Firefox/')[1]}`)
}

If you know of a better way, please tweet me your solution and I'll give you a shoutout here.

Happy coding!

Additional reading

Reply by email Ephesians 5:2