Browser detection using JavaScript’s user agent

What browser your website visitors are using? It’s a vital question for developers, designers, and marketers alike. Knowing your audience’s browser landscape helps you tailor your web experience for optimal performance and engagement.

Various browsers interpret HTML, CSS, and JavaScript differently, leading to potential compatibility issues. By identifying the user’s browser, developers can implement specific workarounds or optimizations to enhance the browsing experience. This proactive approach ensures that your website functions seamlessly across different platforms, reducing the risk of bugs or glitches.

JavaScript’s User Agent

Imagine each browser whispers a secret code – its user agent string – telling the world who it is. JavaScript lets you tap into this hidden message using the navigator.userAgent property. This string holds clues like browser name, version, and even operating system. But deciphering it requires some sleuthing skills.

Detecting: Safari, Chrome, IE, Firefox, and Opera

Each browser leaves its distinct fingerprints in the user agent string. Here’s how to spot them:

• Chrome: Search for “Chrome” or “CriOS.” If it’s Chromium-based like Edge, use more nuanced techniques like comparing features.
• Internet Explorer: Identify with “MSIE” or “Trident.” Remember, IE is gradually fading into history, so prepare for its decreasing presence.
• Firefox: Look for “Firefox” or “Gecko.” On Android, you might find “Fennec.”
• Opera: Scan for “Opera” or “Presto.” Note that the iconic Presto engine is no longer used, so consider modern detection methods.
• Safari: Look for keywords like “Safari” or “WebKit.” For iPhone and iPad, check for “Mobile Safari.”

Implementation of JavaScript’s User Agent to Detect Browser (Safari, Chrome, IE, Firefox, and Opera)

Open or create a html file in your favourite editor.

<p id="res"></p>

The above paragraph tag displays our result.

<script>
    var browsers = ["Opera", "Edg", "Chrome", "Safari", "Firefox", "MSIE", "Trident"];
	.
	.
	.    
</script>

Then inside the script tag, we create an array of browsers.

<script>
    var browsers = ["Opera", "Edg", "Chrome", "Safari", "Firefox", "MSIE", "Trident"];
    var userbrowser, useragent = navigator.userAgent;
  	.
	.
	.
</script>

Here we initialize two variables ‘userbrowser’ and ‘useragent’.

The ‘navigator’ object contains information about browser and ‘userAgent’ property returns the user-agent header sent by the browser to the server.

<script>
    var browsers = ["Opera", "Edg", "Chrome", "Safari", "Firefox", "MSIE", "Trident"];
    var userbrowser, useragent = navigator.userAgent; 
    for (var i = 0; i < browsers.length; i++) {
        if (useragent.indexOf(browsers[i]) > -1) {
            userbrowser = browsers[i];
            break;
        }
    };
	.
	.
	.
</script>

The above loop checks each browser in our array, in the returned browser header.

<script>
	.
	.
    switch (userbrowser) {
        case 'MSIE':
            userbrowser = 'Internet Explorer';
            break;
        case 'Trident':
            userbrowser = 'Internet Explorer';
            break;
        case 'Edg':
            userbrowser = 'Microsoft Edge';
            break;
    }
	.
	.
</script>

We use the switch-case, to check for Internet Explorer and Edge.

<p id="res"></p>
<script>
	.
	.
	.
    document.getElementById("res").innerHTML = userbrowser;
</script>

And finally we display the result, in the paragraph tag.

Full Code

<p id="res"></p>
<script>
    var browsers = ["Opera", "Edg", "Chrome", "Safari", "Firefox", "MSIE", "Trident"];
    var userbrowser, useragent = navigator.userAgent;
    for (var i = 0; i < browsers.length; i++) {
        console.log(useragent.indexOf(browsers[i]))
        if (useragent.indexOf(browsers[i]) > -1) {
            userbrowser = browsers[i];
            break;
        }
    };
    switch (userbrowser) {
        case 'MSIE':
            userbrowser = 'Internet Explorer';
            break;
        case 'Trident':
            userbrowser = 'Internet Explorer';
            break;
        case 'Edg':
            userbrowser = 'Microsoft Edge';
            break;
    }
    document.getElementById("res").innerHTML = userbrowser;
</script>