Browser Compatibility Testing

/**
 * Check if the version is equals the browser version
 * @param version - The string to compare with the browser version, supports operators
 * @returns Boolean indicating if version comparison matches, undefined if browser version unavailable
 */
compareVersion(version: string): boolean | undefined;

const parser = Bowser.getParser(window.navigator.userAgent);

// Exact version matching
console.log(parser.compareVersion("91.0.4472.124")); // true if exact match

// Greater than
console.log(parser.compareVersion(">90")); // true if browser version > 90
console.log(parser.compareVersion(">90.1.2")); // true if browser version > 90.1.2

// Greater than or equal
console.log(parser.compareVersion(">=90")); // true if browser version >= 90

// Less than
console.log(parser.compareVersion("<92")); // true if browser version < 92

// Less than or equal
console.log(parser.compareVersion("<=91")); // true if browser version <= 91

// Loose comparison (tilde)
console.log(parser.compareVersion("~91")); // true if browser version matches 91.x.x

// Handle undefined version
const result = parser.compareVersion(">90");
if (result === undefined) {
  console.log("Browser version not available");
}

/**
 * Check if parsed browser matches certain conditions
 * @param checkTree - Nested object with browser/OS/platform conditions
 * @returns Boolean if conditions are met, undefined if browser not found in tree
 */
satisfies(checkTree: checkTree): boolean | undefined;

const parser = Bowser.getParser(window.navigator.userAgent);

// Simple browser version requirements
const isSupported = parser.satisfies({
  chrome: ">=60",
  firefox: ">=55",
  safari: ">=11"
});

if (isSupported) {
  console.log("Browser meets minimum requirements");
}

// OS-specific browser requirements
const result = parser.satisfies({
  windows: {
    chrome: ">=70",
    firefox: ">=60"
  },
  macos: {
    chrome: ">=65",
    safari: ">=12"
  },
  linux: {
    chrome: ">=60",
    firefox: ">=55"
  }
});

// Platform-specific requirements
const mobileSupported = parser.satisfies({
  mobile: {
    chrome: ">=80",
    safari: ">=13"
  },
  desktop: {
    chrome: ">=70",
    firefox: ">=65"
  }
});

/**
 * Check if the browser, OS, or platform matches anything
 * @param anything - String to match against browser, OS, or platform
 * @param includingAlias - Include aliases in comparison
 * @returns Boolean indicating if any component matches
 */
is(anything: string, includingAlias?: boolean): boolean;

const parser = Bowser.getParser(window.navigator.userAgent);

// Check across all categories
console.log(parser.is("Chrome")); // true if browser is Chrome
console.log(parser.is("macOS")); // true if OS is macOS  
console.log(parser.is("desktop")); // true if platform is desktop

// With alias support
console.log(parser.is("chrome", true)); // true, includes aliases

// Flexible matching
if (parser.is("mobile")) {
  console.log("Mobile device detected");
} else if (parser.is("Chrome")) {
  console.log("Chrome browser detected");
}

/**
 * Check if any of the given values satisfies is(anything)
 * @param anythings - Array of strings to test
 * @returns Boolean if at least one condition is satisfied, undefined otherwise
 */
some(anythings: string[]): boolean | undefined;

const parser = Bowser.getParser(window.navigator.userAgent);

// Check multiple browsers
const isModernBrowser = parser.some([
  "Chrome", "Firefox", "Safari", "Edge"
]);

if (isModernBrowser) {
  console.log("Modern browser detected");
}

// Check multiple mobile platforms
const isMobile = parser.some([
  "mobile", "iOS", "Android"
]);

// Mixed category checking
const isSupported = parser.some([
  "Chrome", "Firefox", "desktop", "tablet"
]);

const parser = Bowser.getParser(window.navigator.userAgent);

// Feature support tiers
const tier1 = parser.satisfies({
  chrome: ">=90",
  firefox: ">=88",
  safari: ">=14",
  edge: ">=90"
});

const tier2 = parser.satisfies({
  chrome: ">=70",
  firefox: ">=70",
  safari: ">=12",
  edge: ">=79"
});

if (tier1) {
  console.log("Enable all modern features");
  // WebComponents, CSS Grid, ES2020+
} else if (tier2) {
  console.log("Enable most modern features with polyfills");
  // Some features with fallbacks
} else {
  console.log("Basic feature set only");
  // Minimal functionality
}

const parser = Bowser.getParser(window.navigator.userAgent);

// Multi-dimensional compatibility checking
const compatibility = {
  // Desktop requirements
  desktop: {
    windows: {
      chrome: ">=75",
      firefox: ">=70",
      edge: ">=79"
    },
    macos: {
      chrome: ">=75",
      safari: ">=13",
      firefox: ">=70"
    },
    linux: {
      chrome: ">=75",
      firefox: ">=70"
    }
  },
  
  // Mobile requirements
  mobile: {
    ios: {
      safari: ">=13",
      chrome: ">=80"
    },
    android: {
      chrome: ">=80",
      firefox: ">=79"
    }
  }
};

const isCompatible = parser.satisfies(compatibility);
if (isCompatible) {
  console.log("Device and browser combination is supported");
} else {
  console.log("Unsupported browser/device combination");
}

const parser = Bowser.getParser(window.navigator.userAgent);

// Check for specific feature support
function checkFeatureSupport() {
  // Modern browsers with full feature support
  if (parser.satisfies({ chrome: ">=85", firefox: ">=80", safari: ">=14" })) {
    return {
      level: "full",
      features: ["webgl2", "webassembly", "serviceworker", "webrtc"]
    };
  }
  
  // Intermediate browsers with partial support
  if (parser.satisfies({ chrome: ">=60", firefox: ">=60", safari: ">=12" })) {
    return {
      level: "partial", 
      features: ["webgl", "serviceworker"],
      polyfills: ["webassembly", "webrtc"]
    };
  }
  
  // Legacy browsers with minimal support
  return {
    level: "basic",
    features: [],
    polyfills: ["webgl", "serviceworker", "webassembly", "webrtc"]
  };
}

const support = checkFeatureSupport();
console.log(`Feature support level: ${support.level}`);

const parser = Bowser.getParser(window.navigator.userAgent);

// Validate against supported browser list
const supportedBrowsers = [
  "Chrome", "Firefox", "Safari", "Edge"
];

const browserSupported = parser.some(supportedBrowsers);
const versionSupported = parser.satisfies({
  chrome: ">=60",
  firefox: ">=55", 
  safari: ">=11",
  edge: ">=79"
});

if (!browserSupported) {
  console.warn("Unsupported browser detected");
  // Show browser upgrade notice
} else if (!versionSupported) {
  console.warn("Browser version too old");
  // Show version upgrade notice
} else {
  console.log("Browser is fully supported");
}

const parser = Bowser.getParser(window.navigator.userAgent);

// Utility functions for common checks
const utils = {
  isModernBrowser: () => parser.satisfies({
    chrome: ">=70",
    firefox: ">=65", 
    safari: ">=12",
    edge: ">=79"
  }),
  
  supportsES6: () => parser.satisfies({
    chrome: ">=51",
    firefox: ">=54",
    safari: ">=10",
    edge: ">=14"
  }),
  
  isMobileDevice: () => parser.some(["mobile", "tablet"]),
  
  needsPolyfills: () => !parser.satisfies({
    chrome: ">=80",
    firefox: ">=75",
    safari: ">=13"
  })
};

// Usage
if (utils.isModernBrowser()) {
  console.log("Loading modern application bundle");
} else if (utils.supportsES6()) {
  console.log("Loading ES6 bundle with some polyfills");
} else {
  console.log("Loading legacy ES5 bundle");
}

interface checkTree {
  [key: string]: any;
}

{
  chrome: ">=70",
  firefox: ">=65", 
  safari: ">=12",
  edge: ">=79"
}

{
  chrome: ">=49",
  firefox: ">=45",
  safari: ">=10",
  ie: ">=11"
}

{
  mobile: {
    chrome: ">=70",
    safari: ">=12"
  }
}