or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

browser-detection.mdcompatibility-testing.mdengine-detection.mdindex.mdos-detection.mdparser-creation.mdplatform-detection.md
tile.json

browser-detection.mddocs/

Browser Detection

Methods for extracting and working with browser information from user agent strings, including browser name, version, and comparison capabilities.

Capabilities

Get Browser

Returns complete browser information including name and version.

/**
 * Get parsed browser object
 * @returns Browser details with name and version
 */
getBrowser(): BrowserDetails;

Usage Examples:

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

const browser = parser.getBrowser();
console.log(browser);
// { name: "Chrome", version: "91.0.4472.124" }

console.log(browser.name); // "Chrome"
console.log(browser.version); // "91.0.4472.124"

Get Browser Name

Returns the browser name with optional case conversion.

/**
 * Get browser's name
 * @param toLowerCase - Return lower-cased value
 * @returns Browser's name or an empty string
 */
getBrowserName(toLowerCase?: boolean): string;

Usage Examples:

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

console.log(parser.getBrowserName()); // "Chrome"
console.log(parser.getBrowserName(true)); // "chrome"
console.log(parser.getBrowserName(false)); // "Chrome"

// Handle unknown browsers
const unknownParser = Bowser.getParser("Unknown/1.0");
console.log(unknownParser.getBrowserName()); // ""

Get Browser Version

Returns the browser version string.

/**
 * Get browser's version
 * @returns Version of browser or undefined if not available
 */
getBrowserVersion(): string | undefined;

Usage Examples:

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

console.log(parser.getBrowserVersion()); // "91.0.4472.124"

// Handle cases where version is not available
const version = parser.getBrowserVersion();
if (version) {
  console.log(`Browser version: ${version}`);
} else {
  console.log("Version not available");
}

Is Browser

Checks if the current browser matches a specific browser name, with optional alias support.

/**
 * Check if the browser name equals the passed string
 * @param browserName - The string to compare with the browser name
 * @param includingAlias - The flag showing whether alias will be included into comparison
 * @returns Boolean indicating if the browser matches
 */
isBrowser(browserName: string, includingAlias?: boolean): boolean;

Usage Examples:

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

// Basic browser checking
console.log(parser.isBrowser("Chrome")); // true (if Chrome)
console.log(parser.isBrowser("Firefox")); // false (if Chrome)

// Case-insensitive checking
console.log(parser.isBrowser("chrome")); // true (case-insensitive)
console.log(parser.isBrowser("CHROME")); // true (case-insensitive)

// With alias support
console.log(parser.isBrowser("chrome", true)); // true
console.log(parser.isBrowser("chrome", false)); // true

// Conditional logic
if (parser.isBrowser("Chrome")) {
  console.log("Using Chrome-specific features");
} else if (parser.isBrowser("Firefox")) {
  console.log("Using Firefox-specific features");
}

Parse Browser

Explicitly parses and returns browser information, useful when using lazy parsing.

/**
 * Parse browser information specifically
 * @returns Browser details with name and version
 */
parseBrowser(): BrowserDetails;

Usage Examples:

// With lazy parsing
const parser = Bowser.getParser(window.navigator.userAgent, true);

// Force browser parsing
const browser = parser.parseBrowser();
console.log(browser); // { name: "Chrome", version: "91.0.4472.124" }

// Subsequent calls return cached result
const sameBrowser = parser.parseBrowser();
console.log(sameBrowser === browser); // false (new object, same data)

Common Patterns

Browser Feature Detection

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

// Check for modern browsers
if (parser.isBrowser("Chrome") || parser.isBrowser("Firefox") || parser.isBrowser("Safari")) {
  // Use modern JavaScript features
  console.log("Modern browser detected");
}

// Check for legacy browsers
if (parser.isBrowser("Internet Explorer")) {
  console.log("Legacy browser - provide fallbacks");
}

Version-aware Feature Usage

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

if (parser.isBrowser("Chrome") && version) {
  const majorVersion = parseInt(version.split('.')[0]);
  if (majorVersion >= 80) {
    // Use features available in Chrome 80+
    console.log("Chrome 80+ features available");
  }
}

Types

interface BrowserDetails {
  name?: string;
  version?: string;
}