or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

core-utilities.mddata-structures.mddevelopment-utilities.mddom-styling.mdfunctional-programming.mdindex.mdnetwork-fetch.mdperformance-crypto.mdtext-unicode.mduser-agent-browser.md
tile.json

user-agent-browser.mddocs/

User Agent & Browser

Browser detection, user agent parsing, and version comparison utilities for cross-browser compatibility.

Capabilities

User Agent Detection

Comprehensive user agent parsing and browser detection utilities.

const UserAgent = require('fbjs/lib/UserAgent');

/**
 * User agent parsing and browser detection utilities
 */
const UserAgent: {
  /**
   * Gets browser name from user agent
   * @param userAgentString - Optional user agent string (uses navigator.userAgent if not provided)
   * @returns Browser name (e.g., 'Chrome', 'Firefox', 'Safari', 'IE', 'Edge')
   */
  getBrowserName(userAgentString?: string): string;
  
  /**
   * Gets browser version from user agent
   * @param userAgentString - Optional user agent string
   * @returns Browser version string (e.g., '91.0.4472.124')
   */
  getBrowserVersion(userAgentString?: string): string;
  
  /**
   * Gets operating system from user agent
   * @param userAgentString - Optional user agent string
   * @returns OS name (e.g., 'Windows', 'macOS', 'Linux', 'iOS', 'Android')
   */
  getOS(userAgentString?: string): string;
  
  /**
   * Gets OS version from user agent
   * @param userAgentString - Optional user agent string
   * @returns OS version string
   */
  getOSVersion(userAgentString?: string): string;
  
  /**
   * Checks if browser is mobile
   * @param userAgentString - Optional user agent string
   * @returns True if mobile browser
   */
  isMobile(userAgentString?: string): boolean;
  
  /**
   * Checks if browser is tablet
   * @param userAgentString - Optional user agent string
   * @returns True if tablet browser
   */
  isTablet(userAgentString?: string): boolean;
  
  /**
   * Checks if browser is desktop
   * @param userAgentString - Optional user agent string
   * @returns True if desktop browser
   */
  isDesktop(userAgentString?: string): boolean;
  
  /**
   * Gets device type
   * @param userAgentString - Optional user agent string
   * @returns Device type ('mobile', 'tablet', 'desktop')
   */
  getDeviceType(userAgentString?: string): string;
  
  /**
   * Checks if specific browser
   * @param browserName - Browser name to check for
   * @param userAgentString - Optional user agent string
   * @returns True if browser matches
   */
  isBrowser(browserName: string, userAgentString?: string): boolean;
  
  /**
   * Checks if browser version matches criteria
   * @param browserName - Browser name
   * @param versionCriteria - Version criteria (e.g., '>=91', '<90', '89-92')
   * @param userAgentString - Optional user agent string
   * @returns True if version matches criteria
   */
  isBrowserVersion(browserName: string, versionCriteria: string, userAgentString?: string): boolean;
  
  /**
   * Gets engine name
   * @param userAgentString - Optional user agent string
   * @returns Engine name (e.g., 'Blink', 'Gecko', 'WebKit', 'Trident')
   */
  getEngine(userAgentString?: string): string;
  
  /**
   * Gets engine version
   * @param userAgentString - Optional user agent string
   * @returns Engine version string
   */
  getEngineVersion(userAgentString?: string): string;
  
  /**
   * Parses complete user agent information
   * @param userAgentString - Optional user agent string
   * @returns Complete parsed user agent object
   */
  parse(userAgentString?: string): {
    browser: {
      name: string,
      version: string,
      major: string
    },
    engine: {
      name: string,
      version: string
    },
    os: {
      name: string,
      version: string
    },
    device: {
      type: string,
      vendor?: string,
      model?: string
    },
    cpu: {
      architecture?: string
    }
  };
};

Usage Examples:

const UserAgent = require('fbjs/lib/UserAgent');

// Basic browser detection
const browserName = UserAgent.getBrowserName();
const browserVersion = UserAgent.getBrowserVersion();
console.log(`Browser: ${browserName} ${browserVersion}`);

// Device type detection
const deviceType = UserAgent.getDeviceType();
const isMobile = UserAgent.isMobile();
const isTablet = UserAgent.isTablet();

console.log(`Device type: ${deviceType}`);
console.log(`Is mobile: ${isMobile}`);

// Operating system detection
const osName = UserAgent.getOS();
const osVersion = UserAgent.getOSVersion();
console.log(`OS: ${osName} ${osVersion}`);

// Browser-specific feature detection
if (UserAgent.isBrowser('Chrome')) {
  console.log('Chrome-specific features available');
}

if (UserAgent.isBrowserVersion('Chrome', '>=90')) {
  console.log('Modern Chrome features available');
}

// Complete parsing
const parsed = UserAgent.parse();
console.log('Complete user agent info:', parsed);

// Custom user agent string parsing
const customUA = 'Mozilla/5.0 (iPhone; CPU iPhone OS 14_6 like Mac OS X) AppleWebKit/605.1.15';
const mobileInfo = UserAgent.parse(customUA);
console.log('Mobile browser info:', mobileInfo);

// Feature availability based on browser
function supportsModernFeatures() {
  const browser = UserAgent.getBrowserName();
  const version = parseInt(UserAgent.getBrowserVersion());
  
  switch (browser) {
    case 'Chrome':
      return version >= 90;
    case 'Firefox':
      return version >= 88;
    case 'Safari':
      return version >= 14;
    case 'Edge':
      return version >= 90;
    default:
      return false;
  }
}

// Responsive behavior based on device
function adaptToDevice() {
  const deviceType = UserAgent.getDeviceType();
  
  switch (deviceType) {
    case 'mobile':
      document.body.classList.add('mobile-layout');
      break;
    case 'tablet':
      document.body.classList.add('tablet-layout');
      break;
    case 'desktop':
      document.body.classList.add('desktop-layout');
      break;
  }
}

User Agent Data

Pre-parsed user agent information object with comprehensive browser and system details.

const UserAgentData = require('fbjs/lib/UserAgentData');

/**
 * Pre-parsed user agent data object containing comprehensive browser information
 */
interface UserAgentDataType {
  browserArchitecture: string;    // e.g., 'amd64', 'arm64'
  browserFullVersion: string;     // Complete version string with all parts
  browserMinorVersion: string;    // Minor version component
  browserName: string;           // Browser name (Chrome, Firefox, etc.)
  browserVersion: string;        // Major version number
  deviceName: string;           // Device name/model
  engineName: string;           // Rendering engine (Blink, Gecko, etc.)
  engineVersion: string;        // Engine version
  platformArchitecture: string; // Platform architecture
  platformName: string;         // Platform/OS name
  platformVersion: string;      // Platform version
  platformFullVersion: string;  // Complete platform version
}

// Usage: Import the pre-parsed data object
const userAgentData: UserAgentDataType = UserAgentData;

Usage Examples:

const UserAgentData = require('fbjs/lib/UserAgentData');

// Access pre-parsed user agent information
console.log('Browser:', UserAgentData.browserName, UserAgentData.browserVersion);
console.log('Platform:', UserAgentData.platformName, UserAgentData.platformVersion);
console.log('Engine:', UserAgentData.engineName, UserAgentData.engineVersion);
console.log('Architecture:', UserAgentData.browserArchitecture);

// Browser compatibility checks
function checkCompatibility() {
  const { browserName, browserVersion } = UserAgentData;
  
  const compatibility = {
    webgl: false,
    webrtc: false,
    serviceworker: false,
    modules: false
  };
  
  const majorVersion = parseInt(browserVersion);
  
  switch (browserName.toLowerCase()) {
    case 'chrome':
      compatibility.webgl = majorVersion >= 56;
      compatibility.webrtc = majorVersion >= 23;
      compatibility.serviceworker = majorVersion >= 45;
      compatibility.modules = majorVersion >= 61;
      break;
      
    case 'firefox':
      compatibility.webgl = majorVersion >= 51;
      compatibility.webrtc = majorVersion >= 22;
      compatibility.serviceworker = majorVersion >= 44;
      compatibility.modules = majorVersion >= 60;
      break;
      
    case 'safari':
      compatibility.webgl = majorVersion >= 8;
      compatibility.webrtc = majorVersion >= 11;
      compatibility.serviceworker = majorVersion >= 11;
      compatibility.modules = majorVersion >= 10;
      break;
  }
  
  return compatibility;
}

// Platform-specific behavior
function platformSpecificSetup() {
  const { platformName, platformArchitecture } = UserAgentData;
  
  if (platformName === 'Windows') {
    console.log('Windows-specific setup');
    if (platformArchitecture === 'arm64') {
      console.log('ARM64 Windows optimizations');
    }
  } else if (platformName === 'macOS') {
    console.log('macOS-specific setup');
  } else if (platformName === 'Linux') {
    console.log('Linux-specific setup');
  }
}

// Performance optimizations based on device
function optimizeForDevice() {
  const {
    browserName,
    browserVersion,
    platformName,
    deviceName
  } = UserAgentData;
  
  const settings = {
    animationsEnabled: true,
    highDPI: true,
    webWorkers: true,
    offscreenCanvas: false
  };
  
  // Mobile device optimizations
  if (deviceName && (deviceName.includes('iPhone') || deviceName.includes('Android'))) {
    settings.animationsEnabled = false; // Preserve battery
    settings.webWorkers = false; // Reduce memory usage
  }
  
  // Browser-specific optimizations
  if (browserName === 'Safari' && parseInt(browserVersion) < 12) {
    settings.webWorkers = false; // Safari bug workaround
  }
  
  return settings;
}

// Create user agent fingerprint
function createFingerprint() {
  const {
    browserName,
    browserFullVersion,
    platformName,
    platformFullVersion,
    engineName,
    engineVersion
  } = UserAgentData;
  
  return btoa([
    browserName,
    browserFullVersion,
    platformName,
    platformFullVersion,
    engineName,
    engineVersion
  ].join('|'));
}

// Analytics tracking
function trackUserAgent() {
  const analytics = {
    browser: `${UserAgentData.browserName} ${UserAgentData.browserVersion}`,
    platform: `${UserAgentData.platformName} ${UserAgentData.platformVersion}`,
    engine: `${UserAgentData.engineName} ${UserAgentData.engineVersion}`,
    architecture: UserAgentData.platformArchitecture,
    device: UserAgentData.deviceName || 'Unknown'
  };
  
  console.log('User agent analytics:', analytics);
  return analytics;
}

Version Range Utilities

Version comparison and range checking utilities for browser compatibility.

const VersionRange = require('fbjs/lib/VersionRange');

/**
 * Version range comparison utilities for browser compatibility checking
 */
const VersionRange: {
  /**
   * Checks if version satisfies range criteria
   * @param version - Version string to check (e.g., '91.0.4472.124')
   * @param range - Range criteria (e.g., '>=90', '<92', '90-92', '^90.1')
   * @returns True if version satisfies range
   */
  satisfies(version: string, range: string): boolean;
  
  /**
   * Compares two version strings
   * @param version1 - First version string
   * @param version2 - Second version string
   * @returns -1 if v1 < v2, 0 if equal, 1 if v1 > v2
   */
  compare(version1: string, version2: string): number;
  
  /**
   * Checks if version is greater than comparison version
   * @param version - Version to check
   * @param compareVersion - Version to compare against
   * @returns True if version > compareVersion
   */
  gt(version: string, compareVersion: string): boolean;
  
  /**
   * Checks if version is greater than or equal to comparison version
   * @param version - Version to check
   * @param compareVersion - Version to compare against
   * @returns True if version >= compareVersion
   */
  gte(version: string, compareVersion: string): boolean;
  
  /**
   * Checks if version is less than comparison version
   * @param version - Version to check
   * @param compareVersion - Version to compare against
   * @returns True if version < compareVersion
   */
  lt(version: string, compareVersion: string): boolean;
  
  /**
   * Checks if version is less than or equal to comparison version
   * @param version - Version to check
   * @param compareVersion - Version to compare against
   * @returns True if version <= compareVersion
   */
  lte(version: string, compareVersion: string): boolean;
  
  /**
   * Checks if version equals comparison version
   * @param version - Version to check
   * @param compareVersion - Version to compare against
   * @returns True if versions are equal
   */
  eq(version: string, compareVersion: string): boolean;
  
  /**
   * Parses version string into components
   * @param version - Version string to parse
   * @returns Object with major, minor, patch, and prerelease components
   */
  parse(version: string): {
    major: number,
    minor: number,
    patch: number,
    prerelease?: Array<string|number>,
    build?: Array<string|number>
  };
  
  /**
   * Formats version components into string
   * @param versionObj - Version object with components
   * @returns Formatted version string
   */
  format(versionObj: {major: number, minor: number, patch: number}): string;
  
  /**
   * Gets valid range from string
   * @param rangeString - Range string to parse
   * @returns Parsed range object
   */
  parseRange(rangeString: string): {
    operator: string,
    version: string,
    satisfied: (version: string) => boolean
  };
  
  /**
   * Finds highest version that satisfies range
   * @param versions - Array of version strings
   * @param range - Range criteria
   * @returns Highest satisfying version or null
   */
  maxSatisfying(versions: Array<string>, range: string): ?string;
  
  /**
   * Finds lowest version that satisfies range
   * @param versions - Array of version strings  
   * @param range - Range criteria
   * @returns Lowest satisfying version or null
   */
  minSatisfying(versions: Array<string>, range: string): ?string;
};

Usage Examples:

const VersionRange = require('fbjs/lib/VersionRange');
const UserAgent = require('fbjs/lib/UserAgent');

// Browser compatibility checking
function checkBrowserSupport(featureName, requirements) {
  const browserName = UserAgent.getBrowserName();
  const browserVersion = UserAgent.getBrowserVersion();
  
  const requirement = requirements[browserName.toLowerCase()];
  if (!requirement) {
    return false; // Browser not supported
  }
  
  return VersionRange.satisfies(browserVersion, requirement);
}

// Feature requirements
const webRTCRequirements = {
  chrome: '>=23',
  firefox: '>=22',
  safari: '>=11',
  edge: '>=79'
};

const supportsWebRTC = checkBrowserSupport('webrtc', webRTCRequirements);
console.log('WebRTC support:', supportsWebRTC);

// Version comparison examples
console.log(VersionRange.compare('91.0.4472', '90.0.4430')); // 1 (greater)
console.log(VersionRange.gt('92.0', '91.5')); // true
console.log(VersionRange.satisfies('91.0.4472.124', '>=90')); // true
console.log(VersionRange.satisfies('89.0.4389.128', '90-92')); // false

// Complex compatibility matrix
function createCompatibilityMatrix() {
  const features = {
    'ES2015 Modules': {
      chrome: '>=61',
      firefox: '>=60',
      safari: '>=10.1',
      edge: '>=16'
    },
    'CSS Grid': {
      chrome: '>=57',
      firefox: '>=52',
      safari: '>=10.1',
      edge: '>=16'
    },
    'Service Workers': {
      chrome: '>=45',
      firefox: '>=44',
      safari: '>=11.1',
      edge: '>=17'
    },
    'WebGL 2.0': {
      chrome: '>=56',
      firefox: '>=51',
      safari: '>=15',
      edge: '>=79'
    }
  };
  
  const browserName = UserAgent.getBrowserName().toLowerCase();
  const browserVersion = UserAgent.getBrowserVersion();
  
  const support = {};
  
  Object.entries(features).forEach(([feature, requirements]) => {
    const requirement = requirements[browserName];
    support[feature] = requirement ? 
      VersionRange.satisfies(browserVersion, requirement) : false;
  });
  
  return support;
}

// Find compatible versions
const availableVersions = [
  '88.0.4324.150',
  '89.0.4389.128',
  '90.0.4430.212',
  '91.0.4472.124',
  '92.0.4515.107'
];

const modernVersions = availableVersions.filter(v => 
  VersionRange.satisfies(v, '>=90')
);
console.log('Modern Chrome versions:', modernVersions);

const bestVersion = VersionRange.maxSatisfying(availableVersions, '>=89 <92');
console.log('Best compatible version:', bestVersion);

// Version parsing and formatting
const parsed = VersionRange.parse('91.0.4472.124-beta.1');
console.log('Parsed version:', parsed);
// { major: 91, minor: 0, patch: 4472, prerelease: [124, 'beta', 1] }

const formatted = VersionRange.format({ major: 92, minor: 0, patch: 4515 });
console.log('Formatted version:', formatted); // '92.0.4515'

// Progressive enhancement
function enableProgressiveFeatures() {
  const browserVersion = UserAgent.getBrowserVersion();
  const features = [];
  
  if (VersionRange.gte(browserVersion, '80')) {
    features.push('basic-features');
  }
  
  if (VersionRange.gte(browserVersion, '85')) {
    features.push('enhanced-features');
  }
  
  if (VersionRange.gte(browserVersion, '90')) {
    features.push('modern-features');
  }
  
  return features;
}