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
; if isIOSDevice && supportsBackdropFilter console;
Changelog:
v0.1.5:
-
Made the library support IE8 too. Load
agentdetection-ie8.js
ortiny-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
andIEMobileVersion
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
andsupportsES7ArrayMethods
v0.07:
- Added new constants:
supportsES6Collections
andsupportsMutationObservers
.
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-fashionedindexOf
for better support for older browsers.
v0.03:
- Fixed a bug where
vendorPrefix
andvendorPrefixDashed
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:
; // (standard) Transpiled to ES5.// or // or
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
andbackdrop-filter
. - Browser API features such as
fetch
,Promise
andrequestAnimationFrame
. - 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.