Browser detection in JavaScript?

javascript

browser-detection

feature-detection

user-agent-strings

byNikita Barsukov·Jan 30, 2025

Browser detection in JavaScript typically involves analyzing the navigator.userAgent string. However, it's generally better to use feature detection over browser detection. Here’s a quick example:

// Even userAgent enjoys a little 'me' time and goes 'toLowerCase'.
const ua = navigator.userAgent.toLowerCase();

const browser = {
  // When it's chrome, but edgy Chrome says, "I'm not like other browsers."
  chrome: /chrome|chromium/.test(ua) && !/edg/.test(ua),
  // EDGEdetect.diff.sh: Patch Edge Cases
  edge: /edg/.test(ua),
  // in Soviet Russia, Firefox detects you!
  firefox: /firefox/.test(ua),
  // Safari: Where the S stands for 'subset' because it's not Chrome, and definitely not Android!
  safari: /^((?!chrome|android).)*safari/.test(ua),
  // Minor IE detection charm just for fun, blowing minds since '95!
  ie: /msie|trident/.test(ua)
};

console.log(browser);

Still, be wary. Our dear friend userAgent strings can be fickle and change their allegiances (i.e., they can be spoofed). Better to trust feature detection methods, like the ever-reliable Modernizr.

Detailed detection: The 'why' and the 'how'

Browsers like Yandex and Vivaldi borrow their engines (Chromium, Gecko, etc.) from other browsers. Detect them using a similar pattern. For a finer-grained approach, Bowser is a handy library that can even handle mobile browsers.

// Good ol' Bowser: Your one-stop shop for a boatload of browser data!
import Bowser from "bowser";

const browser = Bowser.getParser(window.navigator.userAgent);
const isValidBrowser = browser.satisfies({
  // This isn't an age restriction - just a version check, promise!
  chrome: ">80",
  firefox: ">70",
  safari: ">11.1"
});
// Ah, the is/then simplicity of JavaScript!
console.log(isValidBrowser ? 'Browser supported' : 'Browser not supported');

For feature detection, jQuery's $.support property provides a list of features supported by the user’s browser.

The 'what-if' scenarios: Handling quirks and compatibility

Ensure that the core functionality is available to all users, whether or not JavaScript is enabled. Even spoofed user-agent strings need to be factored in.

/**
 * Opera being a mercurial entity might decide to mimic, say IE. 
 * And rest assured, it's an "It's not you, it's me" situation.
*/
// I've seen things you people wouldn't believe...
// browsers on fire off the shoulder of Orion. But we've got this!

Most JavaScript-based solutions must adapt to new versions and remain resilient to attempts at fooling detection methods by favoring conditional loading and polyfills based on feature queries.

Additional tools: external libraries

Augment userAgent detection with external libraries for a more detailed understanding of your user’s browser.

// We're off to see the wizard, the wonderful wizard of Userstack!
fetch(`http://api.userstack.com/detect?access_key=YOUR_ACCESS_KEY&ua=${navigator.userAgent}`)
  .then(response => response.json())
  .then(data => console.log(data));

Remember, these libraries come with a load. Balance it with the actual need for such in-depth detection.

Writing future-proof, browser-specific code

Use detection code tested across browsers and extract both browser and OS information to guide more precise instructions.

// 007 mode: Extracting browser and OS information like a secret agent!
console.log(`Browser: ${browser.name} Version: ${browser.version}`);
console.log(`Operating System: ${browser.os}`);