Browser Detection in JavaScript: User Agent String Parsing and Best Practices

Fundamentals of Browser Detection

In web development, browser detection is a common requirement, typically used for collecting statistics, debugging, or handling compatibility issues with specific browsers. The most direct approach involves parsing the user agent string obtained from the navigator.userAgent property.

User Agent String Parsing Implementation

Below is a complete browser detection function implementation based on regular expression parsing of the user agent string:

navigator.saysWho = (() => {
  const { userAgent } = navigator
  let match = userAgent.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || []
  let temp

  if (/trident/i.test(match[1])) {
    temp = /\brv[ :]+(\d+)/g.exec(userAgent) || []
    return `IE ${temp[1] || ''}`
  }

  if (match[1] === 'Chrome') {
    temp = userAgent.match(/\b(OPR|Edge)\/(\d+)/)
    if (temp !== null) {
      return temp.slice(1).join(' ').replace('OPR', 'Opera')
    }

    temp = userAgent.match(/\b(Edg)\/(\d+)/)
    if (temp !== null) {
      return temp.slice(1).join(' ').replace('Edg', 'Edge (Chromium)')
    }
  }

  match = match[2] ? [ match[1], match[2] ] : [ navigator.appName, navigator.appVersion, '-?' ]
  temp = userAgent.match(/version\/(\d+)/i)
  if (temp !== null) {
    match.splice(1, 1, temp[1])
  }

  return match.join(' ')
})()

console.log(navigator.saysWho) // Example output: Chrome 89

Code Implementation Details

This implementation handles special cases for different browsers through multiple steps:

First, it uses regular expressions to match mainstream browser names and version numbers. The regex /(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i captures browser names and basic version information.

For Internet Explorer, which uses the Trident engine, special handling is required. The code checks for the trident identifier and then uses the /\brv[ :]+(\d+)/g regex to extract the actual IE version number.

Chrome browser processing is more complex, requiring detection of other Chromium-based browser variants:

• Opera browser uses the OPR identifier, which is converted to the more user-friendly "Opera" name
• The new Edge browser uses the Edg identifier, similarly converted to "Edge (Chromium)"

For other browsers, the code checks if a version number exists, and if not, falls back to navigator.appName and navigator.appVersion. It also checks for version information in the version/ format, which is common in browsers like Safari.

Limitations of Browser Detection

While user agent string parsing is technically feasible, it has significant limitations:

User agent strings lack standardization, with different browser vendors adopting different formats. Browsers often masquerade as other browsers to bypass website restrictions, making detection results unreliable. For example, Chrome browsers include "Safari" identifiers in their user agent strings, while Edge browsers may include "Chrome" identifiers.

Version detection also presents problems, as browsers may report inaccurate version information, or user agent string formats may change with version updates, requiring ongoing maintenance of detection logic.

Alternative: Feature Detection

Compared to browser detection, feature detection is a more reliable approach. Feature detection focuses on whether a browser supports specific features, rather than identifying the specific browser:

// Detect Geolocation API support
if ("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition((position) => {
    // Show location on a map
  })
} else {
  // Use static map as fallback
}

// Detect PDF inline viewing support
if ("application/pdf" in navigator.mimeTypes) {
  // Browser supports inline PDF file viewing
}

// Detect Virtual Keyboard API support
if ("virtualKeyboard" in navigator) {
  // Browser supports Virtual Keyboard API
}

Feature detection can also be performed in CSS using the @supports rule:

@supports (display: grid) {
  .box {
    display: grid;
    gap: 2rem;
  }
}

@supports not (property: value) {
  /* Fallback styles for unsupported browsers */
}

Mobile Device Detection

A common misuse is detecting mobile devices through user agent strings. Better approaches involve detecting specific features:

// Detect touch support
if (navigator.maxTouchPoints > 1) {
  // Browser supports multi-touch
}

For layout adaptation, responsive design and CSS media queries should be used instead of device type judgments based on user agents.

Client Hints

For Blink-based browsers, client hints provide a more reliable alternative. Servers can request specific information through the Accept-CH header:

Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA

Clients provide corresponding information in subsequent requests:

GET /my/page HTTP/1.1
Host: example.site
Sec-CH-UA: " Not A;Brand";v="99", "Chromium";v="96", "Google Chrome";v="96"
Sec-CH-UA-Mobile: ?1
Sec-CH-UA-Platform: "Android"

Progressive Enhancement and Graceful Degradation

Progressive enhancement is a development approach that starts with basic functionality and gradually adds advanced features. This method ensures websites work properly in all browsers while providing better experiences in browsers that support more features.

Graceful degradation is the opposite approach, building the full-featured version first and then providing fallback solutions for browsers that don't support certain features. While useful in some scenarios, this approach is generally less effective than progressive enhancement.

Practical Application Scenarios

Browser detection may have value in the following scenarios:

• Collecting user statistics and analytics data
• Debugging and testing cross-browser compatibility
• Recording environment information in error reports
• Providing temporary solutions for known issues in specific browsers

However, when deciding website functionality or content, feature detection and progressive enhancement should be prioritized.

Conclusion

While browser detection in JavaScript is technically possible, user agent string parsing has inherent unreliability. In most cases, feature detection provides a more robust and future-proof solution. Developers should use browser detection cautiously, adopting it only when truly necessary, and always prioritize feature-based detection methods.