User Agent Parser and Browser Detection

User agent strings contain information about the browser and device. Learn how to parse them correctly.

What is a User Agent?

It's a string your browser sends to servers:

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Parsing User Agent

function parseUserAgent(ua) {
  const browsers = [
    { name: 'Chrome', regex: /Chrome\/(\d+)/ },
    { name: 'Firefox', regex: /Firefox\/(\d+)/ },
    { name: 'Safari', regex: /Version\/(\d+).*Safari/ },
    { name: 'Edge', regex: /Edg\/(\d+)/ }
  ];

  const os = [
    { name: 'Windows', regex: /Windows/ },
    { name: 'macOS', regex: /Mac OS X (\d+[._]\d+)/ },
    { name: 'Linux', regex: /Linux/ },
    { name: 'Android', regex: /Android/ },
    { name: 'iOS', regex: /iPhone|iPad/ }
  ];

  let browser = 'Unknown', version = '';
  for (const b of browsers) {
    const match = ua.match(b.regex);
    if (match) {
      browser = b.name;
      version = match[1];
      break;
    }
  }

  let osName = 'Unknown';
  for (const o of os) {
    if (o.regex.test(ua)) {
      osName = o.name;
      break;
    }
  }

  return { browser, version, os: osName };
}

Using Libraries (Recommended)

// ua-parser-js
import UAParser from 'ua-parser-js';

const parser = new UAParser();
const result = parser.getResult();

// result.browser.name   // 'Chrome'
// result.browser.major // '120'
// result.os.name        // 'macOS'
// result.device.type    // 'desktop'

Common Use Cases

1. Analytics & Stats

// Track browser usage
const stats = { browsers: {}, devices: {} };
const ua = parseUserAgent(request.headers['user-agent']);
stats.browsers[ua.browser] = (stats.browsers[ua.browser] || 0) + 1;

2. Feature Detection

function supportsWebGL() {
  try {
    const canvas = document.createElement('canvas');
    return !!(window.WebGLRenderingContext && 
      (canvas.getContext('webgl') || canvas.getContext('experimental-webgl')));
  } catch(e) {
    return false;
  }
}

3. Mobile vs Desktop

function isMobile(ua) {
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(ua);
}

Browser Detection Issues

// DON'T do this - unreliable
if (navigator.userAgent.includes('Chrome')) {
  // Chrome-specific code
}

// DO this instead - feature detection
if ('IntersectionObserver' in window) {
  // Use the feature
}

Common User Agent Strings

| Browser | User Agent | |---------|------------| | Chrome 120 (Mac) | Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 Chrome/120.0.0.0 Safari/537.36 | | Firefox 121 (Windows) | Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:121.0) Gecko/20100101 Firefox/121.0 | | Safari 17 (iPhone) | Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) Version/17.0 Mobile/15E148 Safari/604.1 |

Security & Privacy

// User agent can be spoofed - don't rely on it for security
// Use feature detection instead of browser detection
// Consider the Client Hints API for more reliable info

Conclusion

Use libraries like ua-parser-js for parsing. Prefer feature detection over browser detection when possible. User agent can be spoofed, so don't use it for security.