Browser detection, user agent parsing, and version comparison utilities for cross-browser compatibility.
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;
}
}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 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;
}