How to detect the version of a browser ?

This article includes the basic theory and technique of browser detection in JavaScript-enabled web browsers.

Description: Even though most of the scripts work on JavaScript-enabled web browser, there are certain things that is not going to work on some browsers i.e. they are browser dependent and in some cases old web browser doesn’t support some script.
In some cases, it becomes very important to know the client’s web browser for delivering some content or information appropriately. Basically, it allows you to know the client web browser version and name and here we need to write different functions for different browsers for the purpose of detection.

Browser Detection: Mainly there are two objects that are used for browser detection which are as follows:

• navigator.appName
• navigator.appVersion

The purpose of the first object is to determine the web browser whereas the purpose of the second one is to determine the version of the web browser.

For Example, if the browser is Mozilla Firefox, navigator.appName returns the string “Mozilla Firefox”. If it is Edge, navigator.appName returns the string “Microsoft Edge”. Using both objects, we can create an alert box to display what web browser the client is using and this navigator object contains all the information about the web browser version, name, and more. 

Example: This example shows the use of the above-explained approach.

Javascript

<script Language="JavaScript">
    var objappVersion = navigator.appVersion;
    var browserAgent = navigator.userAgent;
    var browserName = navigator.appName;
    var browserVersion = '' + parseFloat(navigator.appVersion);
    var browserMajorVersion = parseInt(navigator.appVersion, 10);
    var Offset, OffsetVersion, ix;

    // For Chrome
    if ((OffsetVersion = browserAgent.indexOf("Chrome")) != -1) {
        browserName = "Chrome";
        browserVersion = browserAgent.substring(OffsetVersion + 7);
    }

    // For Microsoft internet explorer
    else if ((OffsetVersion = browserAgent.indexOf("MSIE")) != -1) {
        browserName = "Microsoft Internet Explorer";
        browserVersion = browserAgent.substring(OffsetVersion + 5);
    }

    // For Firefox
    else if ((OffsetVersion = browserAgent.indexOf("Firefox")) != -1) {
        browserName = "Firefox";
    }

    // For Safari
    else if ((OffsetVersion = browserAgent.indexOf("Safari")) != -1) {
        browserName = "Safari";
        browserVersion = browserAgent.substring(OffsetVersion + 7);
        if ((OffsetVersion = browserAgent.indexOf("Version")) != -1)
            browserVersion = browserAgent.substring(OffsetVersion + 8);
    }

    // For other browser "name/version" is at the end of userAgent
    else if ((Offset = browserAgent.lastIndexOf(' ') + 1) <
        (OffsetVersion = browserAgent.lastIndexOf('/'))) {
        browserName = browserAgent.substring(Offset, OffsetVersion);
        browserVersion = browserAgent.substring(OffsetVersion + 1);
        if (browserName.toLowerCase() == browserName.toUpperCase()) {
            browserName = navigator.appName;
        }
    }

    // Trimming the fullVersion string at
    // semicolon/space if present
    if ((ix = browserVersion.indexOf(";")) != -1)
        browserVersion = browserVersion.substring(0, ix);
    if ((ix = browserVersion.indexOf(" ")) != -1)
        browserVersion = browserVersion.substring(0, ix);


    browserMajorVersion = parseInt('' + browserVersion, 10);
    if (isNaN(browserMajorVersion)) {
        browserVersion = '' + parseFloat(navigator.appVersion);
        browserMajorVersion = parseInt(navigator.appVersion, 10);
    }
    document.write(''
        + 'Name of Browser = ' + browserName + '<br>'
        + 'Full version = ' + browserVersion + '<br>'
        + 'Major version = ' + browserMajorVersion + '<br>'
        + 'navigator.appName = ' + navigator.appName + '<br>'
        + 'navigator.userAgent = ' + navigator.userAgent + '<br>'
    );
</script>

Output:

The below Output represents the output of browser detection for “Chrome”

Name of Browser = Chrome 
Full version = 86.0.4240.183 
Major version = 86 
navigator.appName = Netscape 
navigator.userAgent = Mozilla/5.0 (Windows NT 10.0; Win64; x64) 
                      AppleWebKit/537.36 (KHTML, like Gecko) 
                      Chrome/86.0.4240.183 
Safari/537.36

The below Output represents the output of browser detection for “Mozilla Firefox”

Name of Browser = Firefox 
Full version = 5 
Major version = 5 
navigator.appName = Netscape 
navigator.userAgent = Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:80.0) 
                      Gecko/20100101 
Firefox/80.0

Conclusion: This article starts with the theory of browser detection and later on it explains the browser detection scheme and script for detection. It is very beneficial in the current environment because all browsers support this application. So detect/find the browser and then write the corresponding code.