Skip to main content

How to Get the Browser Name in JavaScript

Detecting the user's browser can be useful for debugging, logging analytics, or showing specific instructions to users. However, this is a notoriously difficult and often fragile task because it relies on parsing the user-agent string, which can be unreliable.

This guide will explain the challenges of browser detection, introduce the modern navigator.userAgentData API, and cover the classic (but less reliable) fallback of parsing the navigator.userAgent string.

The Core Problem: The Unreliability of the User-Agent String​

For decades, the only way to identify a browser was by reading the navigator.userAgent string. This string is self-reported by the browser and has a long, messy history.

  • It's inconsistent across browsers.
  • Browsers often include other browser names in their user-agent for compatibility reasons (e.g., Chrome's user-agent includes "Safari").
  • Users can easily change or "spoof" this string.

Because of this, relying on the user-agent string is a best-effort approach and is not 100% reliable. You should avoid using it to enable or disable features.

The navigator.userAgentData is a new browser API designed to solve the problems of the old user-agent string. It provides a more structured and reliable way to get information about the browser.

note

As of late 2023, this API is primarily supported by Chromium-based browsers (Chrome, Edge, Opera) and is not yet available in Firefox or Safari. You should always check for its existence before using it.

function getBrowserName() {
  // The userAgentData property is a modern API that provides structured browser info.
  if (navigator.userAgentData?.brands) {
    // The brands array contains all the browser names, with the most specific one first.
    // We can filter out the generic "Chromium" entry to get the actual browser name.
    const brand = navigator.userAgentData.brands.find(
      brand => brand.brand !== 'Chromium'
    );
    return brand ? brand.brand : 'Unknown';
  }
  // Fallback to the old userAgent string if userAgentData is not available.
  return 'Browser (check userAgent)';
}

console.log(getBrowserName());
// Output in Chrome: "Google Chrome"
// Output in Edge: "Microsoft Edge"
note

This is the recommended best practice for modern browsers that support it.

The Classic Fallback Method: Parsing navigator.userAgent​

If navigator.userAgentData is not available, you must fall back to parsing the old navigator.userAgent string. This involves looking for specific substrings that are characteristic of each browser.

The user-agent string is a long, complex string, like this:

// Example from Chrome:
// "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36"

We need to search this string for keywords like "Chrome", "Firefox", etc., in the correct order.

The following function checks for the most common browsers in a specific order to avoid false positives (e.g., detecting "Chrome" before "Edge").

function getBrowserNameFromUserAgent() {
  const userAgent = navigator.userAgent;

  if (userAgent.includes('Firefox')) {
    return 'Mozilla Firefox';
  } else if (userAgent.includes('Opera') || userAgent.includes('OPR')) {
    return 'Opera';
  } else if (userAgent.includes('Edge')) {
    return 'Microsoft Edge';
  } else if (userAgent.includes('Chrome')) {
    return 'Google Chrome';
  } else if (userAgent.includes('Safari')) {
    return 'Apple Safari';
  }
  return 'Unknown';
}

console.log(getBrowserNameFromUserAgent());
note

This is a simplified approach. A truly robust parser would need to handle many more edge cases, which is why a library is often the best choice.

The Most Robust Solution: Using a Library​

For any serious application that needs accurate browser detection, using a well-maintained library is the most reliable approach. These libraries contain a comprehensive set of rules to parse the user-agent string and handle its many quirks. A popular and lightweight choice is Bowser.

You can include the library from a CDN and use its simple API.

<script src="https://cdn.jsdelivr.net/npm/bowser@2.11.0/es5.min.js"></script>

and then use it:

const result = bowser.getParser(window.navigator.userAgent);
const browserInfo = result.getBrowser();

console.log(browserInfo.name);    // e.g., "Chrome"
console.log(browserInfo.version); // e.g., "119.0.0.0"
note

This is the most robust solution as the library is dedicated to solving this complex problem.

Conclusion​

Browser detection is a fragile process, but modern APIs and libraries have made it more manageable.

  • The recommended modern approach is to use navigator.userAgentData, as it provides a structured and reliable answer, but be aware that it's not yet supported by all browsers.
  • The classic fallback is to parse the navigator.userAgent string, but this should be done with care and an understanding of its limitations.
  • For the most accurate and reliable results, especially in a production application, use a dedicated library like Bowser.

Table of Contents