Navigator

How can you detect the version of a browser using Javascript?

In this article, we are going to discuss how to detect the version of a browser using JavaScript.

These days, most browsers are JavaScript−enabled. But still, there are some browsers that don’t support JavaScript; or, some versions of some browsers don’t support certain features of JavaScript.

Therefore, in certain instances, there is a need to know the details of the client’s web browser so that the applications can deliver appropriate content.

Detecting the Version of a Browser

You can detect the details of the current browser using navigator.appName and navigator.appVersion properties.

To detect the version of the browser in the JavaScript we need to use navigator.appVersion or navigator.userAgent. The navigator.appVersion is a read-only property and it returns a string and represents the version information of the browser.

Example 1

In the following example, we are demonstrating the navigator.appversion to find the version and details of the browser.

     
Navigator appVersion
 Return Browser varsion function browserVersion()  

Example 2

In the following example, we are demonstrating the navigator.userAgent to find the version and details of the browser.

     
Navigator userAgent
 Return Browser version    

Источник

Javascript browser and version

Last updated: May 29, 2023
Reading time · 5 min

# Table of Contents

# Get Browser name (Chrome, Firefox, Safari) in JavaScript

To get the browser name (e.g. Chrome, Firefox, Safar) in JavaScript:

1. Use the navigator.userAgent property to get the user agent string for the current browser.
2. Use the RegExp.test() method to check if a regular expression matches the user agent string for each browser.

Here is the HTML for the example.

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> head> body> h2>bobbyhadz.comh2> h2 id="browser-type">h2> br /> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
function getBrowserType()  const test = regexp =>  return regexp.test(navigator.userAgent); >; console.log(navigator.userAgent); if (test(/opr\//i) || !!window.opr)  return 'Opera'; > else if (test(/edg/i))  return 'Microsoft Edge'; > else if (test(/chrome|chromium|crios/i))  return 'Google Chrome'; > else if (test(/firefox|fxios/i))  return 'Mozilla Firefox'; > else if (test(/safari/i))  return 'Apple Safari'; > else if (test(/trident/i))  return 'Microsoft Internet Explorer'; > else if (test(/ucbrowser/i))  return 'UC Browser'; > else if (test(/samsungbrowser/i))  return 'Samsung Browser'; > else  return 'Unknown browser'; > > const browserType = getBrowserType(); console.log(browserType); const browserTypeElement = document.getElementById('browser-type'); browserTypeElement.innerHTML = browserType; 

You can start a basic development server by opening your terminal in the same directory as the index.html and index.js files and issuing the following command.

If I load the example in Chrome, I get the following output.

And here is a screenshot of opening the page in Firefox.

The navigator.userAgent property returns the user agent string for the current browser.

Copied! 
console.log(navigator.userAgent); // 👇️ Chrome // Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36 // 👇️ Firefox // Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/113.0 

The name of the browser is located toward the end of the user agent string (e.g. Chrome or Firefox).

We used the RegExp.test method to check if the user agent string contains specific substrings.

The forward slashes mark the start and the end of the regular expressions / / .

Copied! 
if (test(/chrome|chromium|crios/i))  return 'Google Chrome'; > 

The pipe | symbol means «OR», e.g. chrome or chromium or crios .

The i flag stands for ignore and does a case-insensitive search in string.

If the regex is matched in the string, we return the name of the corresponding browser.

# Get Browser name (Chrome, Firefox, Safari) using String.includes() in JavaScript

You can also use the String.includes method to get the browser name in JavaScript.

Here is an example that uses the method and some internal browser-specific properties.

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> head> body> h2>bobbyhadz.comh2> h2 id="browser-type">h2> br /> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
function getBrowserType()  if (isOpera())  return 'Opera'; > else if (isEdge() || isEdgeChromium())  return 'Microsoft Edge'; > else if (isChrome())  return 'Google Chrome'; > else if (isFirefox())  return 'Mozilla Firefox'; > else if (isSafari())  return 'Apple Safari'; > else if (isInternetExplorer())  return 'Microsoft Internet Explorer'; > else if (isUCBrowser())  return 'UC Browser'; > else if (isSamsungBrowser())  return 'Samsung browser'; > else  return 'Unknown browser'; > > const browserType = getBrowserType(); console.log(browserType); const browserTypeElement = document.getElementById('browser-type'); browserTypeElement.innerHTML = browserType; function isOpera()  return ( !!window.opr || !!window.opera || navigator.userAgent.toLowerCase().includes('opr/') ); > function isFirefox()  return ( navigator.userAgent.toLowerCase().includes('firefox') || typeof InstallTrigger !== 'undefined' ); > function isSafari()  return navigator.userAgent.toLowerCase().includes('safari'); > function isInternetExplorer()  return false || !!document.documentMode; > function isEdge()  return !isInternetExplorer() && !!window.StyleMedia; > function isChrome()  const userAgent = navigator.userAgent.toLowerCase(); return ( userAgent.includes('chrome') || userAgent.includes('chromium') || userAgent.includes('crios') ); > function isEdgeChromium()  return isChrome() && navigator.userAgent.includes('Edg'); > function isUCBrowser()  return navigator.userAgent.toLowerCase().includes('ucbrowser'); > function isSamsungBrowser()  return navigator.userAgent .toLowerCase() .includes('samsungbrowser'); > 

Here is a screenshot of using the function in Chrome.

And here is a screenshot of using the function in Firefox.

And here is an example of using the function in Opera.

We created reusable functions that check for each browser name.

The functions use the navigator.userAgent property and some internal, browser-specific properties.

Copied! 
function isChrome()  const userAgent = navigator.userAgent.toLowerCase(); return ( userAgent.includes('chrome') || userAgent.includes('chromium') || userAgent.includes('crios') ); > 

Each function returns true if the browser is of the expected type and false otherwise.

We used the String.toLowerCase method to convert the user agent string to lowercase before using String.includes to check if it contains specific substrings in a case-insensitive manner.

# Get the Browser Name and Version in JavaScript using Bowser

You can also use the popular Bowser NPM package to get the browser name and version.

Here is the HTML for the example.

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> style> body  margin: 100px; > style> script src=" https://cdn.jsdelivr.net/npm/bowser@2.11.0/es5.min.js "> script> head> body> h2>bobbyhadz.comh2> h2 id="browser-type">h2> br /> script src="index.js"> script> body> html> 

Notice that we load the bowser package using a CDN.

Here is the related JavaScript file.

Copied! 
console.log(window.navigator.userAgent); const browser = bowser.getParser(window.navigator.userAgent); const browserObject = browser.getBrowser(); // // "name": "Chrome", // "version": "113.0.0.0" // > console.log(browserObject); const browserName = browserObject.name; console.log(browserName); // 👉️ 113.0.0.0 const browserVersion = browserObject.version; console.log(browserVersion); // 👉️ Chrome 

The browser.getBrowser() method returns an object that contains the name and version properties.

The name property stores the name of the current browser and the version property stores the version of the browser.

Here is a screenshot of the results in Google Chrome.

And here is a screenshot of the output in Firefox.

There is also a browser.getBrowserName() method.

Copied! 
const browser = bowser.getParser(window.navigator.userAgent); console.log(browser.getBrowserName()); // 👉️ Chrome 

The example above uses a CDN script to load the Bowser library, however, you can also use the ES modules import syntax.

Here is the updated HTML file.

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> style> body  margin: 100px; > style> head> body> h2>bobbyhadz.comh2> h2 id="browser-type">h2> br /> script type="module" src="index.js"> script> body> html> 

Here is the related JavaScript code.

Copied! 
import bowser from 'https://cdn.jsdelivr.net/npm/bowser@2.11.0/+esm'; console.log(window.navigator.userAgent); const browser = bowser.getParser(window.navigator.userAgent); const browserObject = browser.getBrowser(); // // "name": "Chrome", // "version": "113.0.0.0" // > console.log(browserObject); const browserName = browserObject.name; console.log(browserName); // 👉️ 113.0.0.0 const browserVersion = browserObject.version; console.log(browserVersion); // 👉️ Chrome 

The example uses an ES modules import statement to import the bowser module.

The remainder of the code is the same.

The bowser package also provides you with additional information, e.g. the operating system, the platform and the engine.

Copied! 
import bowser from 'https://cdn.jsdelivr.net/npm/bowser@2.11.0/+esm'; // // "browser": // "name": "Chrome", // "version": "113.0.0.0" // >, // "os": // "name": "Linux" // >, // "platform": // "type": "desktop" // >, // "engine": // "name": "Blink" // > // > console.log(bowser.parse(window.navigator.userAgent)); 

The bowser.parse() method takes the user agent string and returns an object that contains information about the browser, the operating system, the platform and the engine.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

Источник

How to get the browser and version in JavaScript

By Sean McPherson May 19, 2020 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)

// 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

• Firefox: «Firefox/77.0»
• Chrome: «Chrome/81.0.4044.138 Safari/537.36»
• Edge (Chromium): «Chrome/81.0.4044.138 Safari/537.36 Edg/81.0.416.77»
• Safari: «Version/13.1 Safari/605.1.15»

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.

Additional reading

• Browser detection using the user agent on MDN
• Browser Detection is Bad by Chris Coyier on CSS-Tricks
• History of the browser user-agent string by Aaron Andersen on WebAIM
• Optimizing content for different browsers: the RIGHT way § 2.2 on W3

Источник