agentdetection v0.1.5

agentdetection

A library of synchronous feature- and user agent detections with flow typings and ES-modules.

Installation

Simply do: npm install agentdetection.

What is it?

It's simply a collection of functions and constants that sniffs the user agent, window, navigator and document objects to determine which features are available as well as what type of browser and/or device is currently browsing your app.

Why another one?

Another, more comprehensive tool is already available: Modernizr. This library is different on some levels:

• It is much smaller and has less detections.

• Contrary to the general public opinion, this library relies heavily on user agent sniffing. This is because it allows us to do a lot of feature detections synchronously and at a lower performance cost with the downside that the user agent can be changed by the client. It also enables us to customize the user experience according to the client device.

• Everything is exported as ES-modules and typed with flow. This makes it very easy to tree-shake and only compile the stuff you need with webpack, rollup or something similar.

• It handles cordova as well, taking into account that features might be readily available if the client is browsing through a native app.

Example

import {isIOSDevice, iOSVersion, supportsBackdropFilter} from "agentdetection";

if (isIOSDevice && supportsBackdropFilter) {
	console.log("Yeah, i love background filters!");
}

Changelog:

v0.1.5:

• Made the library support IE8 too. Load agentdetection-ie8.js or tiny-ie8.js for IE8 support.

• Added .js.flow files for allowing flow to read the types without having to import from the /typed path.

v0.1.3:

• Updated tiny.js.

v0.1.2:

• Samsung Web apps and Samsung Internet has been combined to Samsung Internet.

v0.1.0:

• Opera Mobile on Android now shows CHROME as its browser if it is based on Chromium.

v0.0.9:

• BREAKING CHANGE: All browsers except for Opera Mini on iOS will now state that their browser name is SAFARI and return the iOS version when browserVersion() is called just like iOS safari. They are all running on WKWebView, so their capabilities are identical. This is done to make sure that no browsers are left behind. Opera Mini is a special case and continues to use Presto, even on iOS because of serverrendering.

• BREAKING CHANGE: Opera >= 15, Brave and Chrome-based Samsung Internet browsers will return CHROME as their browser type. They are both based on Webkit/Blink and has identical capabilities. This is done to make sure that no browsers are left behind.

• New browser detections: - UC Browser - One of the largest browsers on mobile devices outside of the western hemisphere. - Samsung Internet - The stock browser on Samsung mobile devices and Samsung SMART-TV's. - Firefox Mobile - Mozilla's mobile browser with wide device support. - Samsung Web apps - Samsung's own engine for Tizen-powered web apps, primarily for their TV-line.

  	They all come with new constants: `isUCBrowser`, `UCBrowserVersion`, `isFirefoxMobile`, `firefoxMobileVersion`, `isSamsungInternet`, `samsungInternetVersion`, `isSamsungWebApp`, `samsungWebAppVersion`.

• Added missing isIEMobile and IEMobileVersion constants and wrote tests for them.

• Added new constants: supportsEvents, supportsOnHashChange

v0.08:

• Added new constants: supportsES5DateMethods, supportsES5StringMethods, supportsES6StringMethods, supportsES7StringMethods, supportsES5ObjectMethods, supportsES6ObjectMethods, supportsES7ObjectMethods, supportsES5ArrayMethods, supportsES6ArrayMethods and supportsES7ArrayMethods

v0.07:

• Added new constants: supportsES6Collections and supportsMutationObservers.

v0.06:

• Added support for usage in node environments.

• Added a new version: 'tiny'. It only exports the browser name and version.

• Added new constants: 'supportsProxy', 'supportsMap', 'supportsWeakMap', 'supportsSet' and 'supportsWeakSet'.

• Updated development dependencies.

v0.05:

• Added a new constant: browserVersion that returns the version of the current browser.

v0.04:

• Switched from includes() calls on arrays and strings to old-fashioned indexOf for better support for older browsers.

v0.03:

• Fixed a bug where vendorPrefix and vendorPrefixDashed wasn't self-executing functions. Switched to $FlowFixMe for supressing unsupported vendor-prefixed properties.

v0.02:

• Supressed a few flow warnings for missing vendor prefixed style- and navigator props.

v0.01:

• First release!

Usage

Import it in your project like this:

import {isMobile, ...} from "agentdetection"; // (standard) Transpiled to ES5.
// or

import {isMobile, ...} from "agentdetection/native" // Transpiled to ES5, native ES-modules.
// or

import {isMobile, ...} from "agentdetection/typed" // Flow typings, ES-modules.

Documentation

The detections are separated into importable modules. There are detections for covering:

• Browser name and main browser version.
• Media features such as autoplay, loop and format support.
• CSS features such as contain and backdrop-filter.
• Browser API features such as fetch, Promise and requestAnimationFrame.
• Generals such as prefixes.

Device/Browser type detections

Types

BrowserName: "CHROME"|"FIREFOX"|"SAFARI"|"IE"|"EDGE"|"OPERA"|"ANDROID_STOCK"|"BLACKBERRY"|"OPERA_MOBILE"|"OPERA_MINI"|"IE_MOBILE"|"UNKNOWN";
NativePlatformName: "iOS"|"Android";

browser: BrowserName

The name of the browser.

isEdge: boolean

If the browser is Microsoft Edge.

isInternetExplorer: boolean

If the browser is Internet Explorer.

isInternetExplorerOrEdge: boolean

If the browser is Microsoft Edge or Internet Explorer.

isFirefox: boolean

If the browser is Firefox.

isChrome: boolean

If the browser is Chrome (or Brave).

isSafari: boolean

If the browser is Safari.

isOpera: boolean

If the browser is Opera.

isBlackberry: boolean

If the browser is the stock browser on Blackberry devices.

isOperaMobile: boolean

If the browser is Opera Mobile.

isOperaMini: boolean

If the browser is Opera Mini.

isNative: boolean

If the client is browsing through Cordova/PhoneGap.

nativePlatform: ?NativePlatformName

The name of the native platform, if any.

isMobile: boolean

If the client is browsing on a mobile device.

isIOSDevice: boolean

If the client is on an iOS device.

isIPhoneDevice: boolean

If the client is on an iPhone.

isIPadDevice: boolean

If the client is on an iPad.

isSafariOnDesktop: boolean

If the browser is Safari on a desktop device.

isSafariOnMobile: boolean

If the browser is Safari on a mobile device.

isNativeIOS: boolean

If the client is browsing through Cordova/PhoneGap on an iOS device.

isNativeAndroid: boolean

If the browser is browsing through Cordova/PhoneGap on an Android device.

isAndroidDevice: boolean

If the client is on an Android device.

isAndroidBrowser: boolean

If the client is browsing through the stock browser on Android.

isAppleDevice: boolean

If the client is browsing through Safari on desktop or mobile, natively or not.

isDesktopDevice: boolean

If the client is browsing on a desktop device.

isWebkitBrowser: boolean

If the client is browsing from a Webkit-browser.

iOSVersion: number

The main iOS-version of the device. Defaults to -1 if none is matched.

androidVersion: number

The main Android OS-version of the device. Defaults to -1 if none is matched.

IEVersion: number

The main version of the Internet Explorer browser browsing the app. Defaults to -1 if none is matched.

chromeVersion: number

The main version of the Chrome browser browsing the app. Defaults to -1 if none is matched.

firefoxVersion: number

The main version of the Firefox browser browsing the app. Defaults to -1 if none is matched.

safariVersion: number

The main version of the Safari browser browsing the app. Defaults to -1 if none is matched.

edgeVersion: number

The main version of the Edge browser browsing the app. Defaults to -1 if none is matched.

operaVersion: number

The main version of the Opera browser browsing the app. Defaults to -1 if none is matched.

operaMiniVersion: number

The main version of the Opera Mini browser browsing the app. Defaults to -1 if none is matched.

operaMobileVersion: number

The main version of the Opera Mobile browser browsing the app. Defaults to -1 if none is matched.

Media functionality detections

supportsWebP: boolean

If the browser supports the WebP format.

supportsMP4: boolean

If the browser supports the MP4 format.

supportsWebM: boolean

If the browser supports the WebM format.

supportsOGG: boolean

If the browser supports the OGG format.

supportsHLS: boolean

If the browser supports the HLS format.

supportsInlineVideoPlayback: boolean

If the browser supports playing videos inline.

supportsVideoLoop: boolean

If the browser supports looping videos.

supportsSilentVideoAutoplay: boolean

If the browser supports silent autoplaying videos .

supportsVideoAutoplay: boolean

If the browser supports autoplaying videos (with sound).

supportsAudioAutoplay: boolean

If the browser supports autoplaying audio.

supportsAudioLoop: boolean

If the browser supports looping audio.

CSS functionality detections

supportsBackdropFilter: boolean

If the browser supports the backdrop-filter CSS property.

supportsContain: boolean

If the browser supports the contain CSS property.

supportsWillChange: boolean

If the browser supports the will-change CSS property.

Browser API detections

supportsHistory boolean

If the browser supports the History API.

supportsRequestAnimationFrame: boolean

If the browser supports requestAnimationFrame.

supportsBattery: boolean

If the browser supports navigator.getBattery().

supportsBlobs: boolean

If the browser supports the Blob object.

supportsCustomEvents: boolean

If the browser supports custom events.

supportsServiceWorker: boolean

If the browser supports ServiceWorkers.

supportsWebWorker: boolean

If the browser supports WebWorkers.

supportsWebSockets: boolean

If the browser supports WebSockets.

supportsVibration: boolean

If the browser supports navigator.vibrate().

supportsPerformance: boolean

If the browser supports the performance object on window.

supportsGetUserMedia: boolean

If the browser supports getUserMedia.

supportsFetch: boolean

If the browser supports the fetch API.

supportsCustomElements: boolean

If the browser supports the Custom Elements v1 spec.

supportsLegacyCustomElements: boolean

If the browser supports the Custom Elements v0 spec.

supportsShadowDOM: boolean

If the browser supports the Shadow DOM.

supportsHTMLImports: boolean

If the browser supports HTMLImports.

supportsTemplateElement: boolean

If the browser supports the <template> element.

supportsPromises: boolean

If the browser supports the native Promise object.

supportsProxy

If the browser supports the "Proxy" object.

supportsMap

If the browser supports the "Map" object.

supportsWeakMap

If the browser supports the "WeakMap" object.

supportsSet

If the browser supports the "Set" object.

supportsWeakSet

If the browser supports the "WeakSet" object.

supportsES5DateMethods

If the browser supports the Date methods introduced in ES5.

supportsES5StringMethods

If the browser supports the string methods introduced in ES5.

supportsES6StringMethods

If the browser supports the string methods introduced in ES6.

supportsES7StringMethods

If the browser supports the string methods introduced in ES7.

supportsES5ObjectMethods

If the browser supports the object methods introduced in ES5.

supportsES6ObjectMethods

If the browser supports the object methods introduced in ES6.

supportsES7ObjectMethods

If the browser supports the object methods introduced in ES7.

supportsES5ArrayMethods

If the browser supports the array methods introduced in ES5.

supportsES6ArrayMethods

If the browser supports the array methods introduced in ES6.

supportsES7ArrayMethods

If the browser supports the array methods introduced in ES7.

supportsES6Collections

If the browser supports all the new collection types in ES6.

General

vendorPrefix: string

The vendor prefix, if any, without dashes.

vendorPrefixDashed: string

The vendor prefix, if any, with dashes.