Detect Browser using JavaScript

When creating websites or web applications, ensuring they work well across various browsers is vital. Each browser interprets code differently, potentially leading to compatibility issues. One approach to managing these differences is through browser detection.

Browser detection means using JavaScript to identify the user’s browser and making code adjustments or providing alternatives based on this detection. While modern practices lean towards feature detection, understanding browser detection remains valuable for specific cases.

Learn also –

Detect Internet Connection using JavaScript

Detect AdBlocker using JavaScript

JavaScript Password Strength Checker

In this guide, we’ll explore browser detection in JavaScript. We’ll use a function to handle the detection logic and an object to store browser names and their identifying strings. This method simplifies extending and maintaining detection logic as new browser versions emerge.

javascript detect browser

Table of Contents

What is navigator.userAgent?

navigator.userAgent is a property in the JavaScript navigator object that provides information about the user’s browser and their operating system.

The user agent string contains information such as the browser’s name, version, operating system, and more additional information like the device type. This information is sent by the browser to the server when making HTTP requests

Browser Name and Version – “Mozilla Firefox 89.0”, “Chrome/94.0.4606.61”.
Operating System – “Windows NT 10.0”, “Macintosh; Intel Mac OS X 10_15_7”
Device Information – “Mobile” or “Tablet”

How to Detect Web Browser in Javascript

You can encapsulate the browser detection logic in a function and use an object to store the browser names and their corresponding index values for the indexOf method

function detectBrowser() {
    var userAgent = navigator.userAgent;
    var browsers = {
        "Chrome": "Chrome",
        "Firefox": "Firefox",
        "Safari": "Safari",
        "Edge": "Edge",
        "Opera": "Opera"
    };

    for (var browser in browsers) {
        if (userAgent.indexOf(browsers[browser]) != -1) {
            return browser;
        }
    }

    return "Unknown";
}

var userBrowser = detectBrowser();
console.log("User is using " + userBrowser);

Steps to write code –

Define a function detectBrowser() to identify the user’s browser.
Get the user agent string of the browser being used.
Create an object browsers with browser names and their identifying strings.
Loop through each browser in the browsers object.
Check if the user agent contains the current browser’s identifying string.
If found, return the browser name.
If no match, return “Unknown” after the loop.
Call detectBrowser() and store the result in userBrowser.
Print the detected browser to the console.

Note –

The user agent strings can be manipulated or changed by users or browser extensions, so relying solely on this method might not always be accurate.

Additionally, browser updates or changes can modify the user agent string format, so it’s a good practice to update your detection logic periodically.