Detecting Browsers in JavaScript

Detecting the user's browser in JavaScript can be helpful in many cases, such as handling browser-specific bugs, applying compatibility fixes, or optimizing performance. While modern development encourages feature detection over browser detection, there are still valid use cases for knowing which browser a user is on.
In this blog post, we’ll explore a simple yet effective way to detect different browsers using JavaScript’s navigator.userAgent property.

---

Understanding the userAgent String

The userAgent string is a property of window.navigator that provides details about the user's browser, operating system, and rendering engine. Each browser has a unique userAgent pattern, which can be used for identification.
Example of a userAgent string:

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36

From this, we can extract useful information, such as whether the user is on Chrome, Safari, or another browser.

---

Detecting Different Browsers

Here’s a simple way to detect browsers using JavaScript:

const userAgent = window.navigator.userAgent;
const isEdge    = /Edge/.test(userAgent); // Detects Microsoft Edge
const isChrome  = /chrome/i.test(userAgent) && !isEdge; // Detects Chrome but excludes Edge
const isSafari  = /safari/i.test(userAgent) && !isEdge; // Detects Safari but excludes Edge
const isMobile  = /mobile/i.test(userAgent); // Detects if the user is on a mobile device
const isIEWin7  = /Windows NT 6.1/i.test(userAgent) && /rv:11/i.test(userAgent); // Detects Internet Explorer 11 on Windows 7
const isOldSafari = isSafari && (/Version\/8/i.test(userAgent) || /Version\/9/i.test(userAgent)); // Detects older versions of Safari

const isEnabledForBrowser = (isChrome || isSafari || isIEWin7) && !isMobile;

---

Breaking Down the Code

1. Detecting Microsoft Edge:

const isEdge = /Edge/.test(userAgent);

Edge browsers include "Edge" in their userAgent string.

1. Detecting Google Chrome:

const isChrome = /chrome/i.test(userAgent) && !isEdge;

Since Edge also contains "chrome", we exclude it from detection.

1. Detecting Safari:

const isSafari = /safari/i.test(userAgent) && !isEdge;

This works because Safari’s userAgent string contains "safari", but we exclude Edge to avoid false positives.

1. Detecting Mobile Devices:

const isMobile = /mobile/i.test(userAgent);

Mobile browsers often include "mobile" in their userAgent.

1. Detecting Internet Explorer on Windows 7:

const isIEWin7 = /Windows NT 6.1/i.test(userAgent) && /rv:11/i.test(userAgent);

Windows 7 has "Windows NT 6.1" in its userAgent, while IE 11 contains "rv:11".

1. Detecting Older Versions of Safari:

const isOldSafari = isSafari && (/Version\/8/i.test(userAgent) || /Version\/9/i.test(userAgent));

Older Safari versions include "Version/8" or "Version/9" in their userAgent.

1. Enabling Features for Certain Browsers:

const isEnabledForBrowser = (isChrome || isSafari || isIEWin7) && !isMobile;

This ensures that the feature is enabled only for Chrome, Safari, or IE on Windows 7 but not for mobile devices.

---

Full Code Example

const userAgent = window.navigator.userAgent;
const isEdge    = /Edge/.test(userAgent); 
const isChrome  = /chrome/i.test(userAgent) && !isEdge;
const isSafari  = /safari/i.test(userAgent) && !isEdge;
const isMobile  = /mobile/i.test(userAgent);
const isIEWin7  = /Windows NT 6.1/i.test(userAgent) && /rv:11/i.test(userAgent);
const isOldSafari = isSafari && (/Version\/8/i.test(userAgent) || /Version\/9/i.test(userAgent));
const isEnabledForBrowser = (isChrome || isSafari || isIEWin7) && !isMobile;

console.log("Is Edge:", isEdge);
console.log("Is Chrome:", isChrome);
console.log("Is Safari:", isSafari);
console.log("Is Mobile:", isMobile);
console.log("Is Internet Explorer on Windows 7:", isIEWin7);
console.log("Is Old Safari:", isOldSafari);
console.log("Is Feature Enabled for Browser:", isEnabledForBrowser);

---

Conclusion

Browser detection using userAgent can be useful in cases where feature detection isn’t enough. However, it’s always best to use progressive enhancement and graceful degradation to ensure that your web application remains functional across all browsers.

By using this approach, you can implement browser-specific workarounds or optimizations while maintaining flexibility in your web application.

Have you encountered browser compatibility issues in your projects? Share your thoughts in the comments!