bowser

What is bowser?

The bowser npm package is a browser detection library. It helps in identifying the browser and rendering engine a user is using, as well as providing information about the browser's capabilities, such as whether it supports touch events or service workers. This can be particularly useful for tailoring user experiences to different environments or for analytics and debugging purposes.

What are bowser's main functionalities?

Browser Detection

Detects the browser name using the user agent string.

const Bowser = require('bowser');
const browser = Bowser.getParser(window.navigator.userAgent);
const browserName = browser.getBrowserName();

Browser Version Detection

Determines the version of the browser being used.

const Bowser = require('bowser');
const browser = Bowser.getParser(window.navigator.userAgent);
const browserVersion = browser.getBrowserVersion();

Platform Detection

Identifies the platform (desktop, mobile, tablet, etc.) on which the browser is running.

const Bowser = require('bowser');
const browser = Bowser.getParser(window.navigator.userAgent);
const platformType = browser.getPlatformType();

Feature Checks

Checks if the browser supports certain features, such as touch events.

const Bowser = require('bowser');
const browser = Bowser.getParser(window.navigator.userAgent);
const supportsTouch = browser.satisfies({
  'mobile': { 'touch': true }
});

OS Detection

Determines the operating system on which the browser is running.

const Bowser = require('bowser');
const browser = Bowser.getParser(window.navigator.userAgent);
const osName = browser.getOSName();

Other packages similar to bowser

useragent

The 'useragent' package is similar to 'bowser' in that it parses user agent strings to detect browser information. However, it focuses more on the parsing aspect and less on the browser's capabilities.

platform

The 'platform' package provides information about the operating system, browser, and device based on the user agent string. It is similar to 'bowser' but has a simpler API and less detailed detection of browser features.

detect-browser

The 'detect-browser' package is another alternative for detecting browser information from the user agent string. It is a smaller and more lightweight library compared to 'bowser', but it may not offer as comprehensive feature detection.

README

Bowser

A Browser detector. Because sometimes, there is no other way, and not even good modern browsers always provide good feature detection mechanisms.

So... it works like this:

if (bowser.msie && bowser.version <= 6) {
  alert('Hello China');
}

Detected Browsers

• msie
• safari[webkit]
• chrome[webkit]
• firefox[gecko]
• opera

Notes

Safari, Chrome, and Firefox will report that they have webkit|gecko engines

if (bowser.webkit) {
  // do stuff with safari & chrome
}

Ender installation

If you don't already have Ender (an npm package) install it now (and don't look back)

$ npm install ender

then add bowser to your module collection

$ ender add bowser

use it like this:

if ($.browser.chrome) {
  alert('Hello Silicon Valley');
}

Graded Browser Support

One useful feature of Bowser is that aside from checking one browser from another -- it will keep up to date with Yahoo's Graded Browser Support chart, giving you access to each grade on the bowser object

if (bowser.a) {
  // support full feature set
}
else if (bowser.c) {
  // serve degraded version
}
else {
  // unsupported (bowser.x)
}