2018-09-09 12:08:48 +00:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< title > Home - Documentation< / title >
< script src = "scripts/prettify/prettify.js" > < / script >
< script src = "scripts/prettify/lang-css.js" > < / script >
<!-- [if lt IE 9]>
< script src = "//html5shiv.googlecode.com/svn/trunk/html5.js" > < / script >
<![endif]-->
< link type = "text/css" rel = "stylesheet" href = "styles/prettify.css" >
< link type = "text/css" rel = "stylesheet" href = "styles/jsdoc.css" >
2019-07-16 19:21:01 +00:00
< script src = "scripts/nav.js" defer > < / script >
2018-09-09 12:08:48 +00:00
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< / head >
< body >
< input type = "checkbox" id = "nav-trigger" class = "nav-trigger" / >
< label for = "nav-trigger" class = "navicon-button x" >
< div class = "navicon" > < / div >
< / label >
< label for = "nav-trigger" class = "overlay" > < / label >
2019-07-16 19:21:01 +00:00
< nav >
2018-09-09 12:08:48 +00:00
2019-08-04 20:53:47 +00:00
< h2 > < a href = "index.html" > Home< / a > < / h2 > < h3 > Classes< / h3 > < ul > < li > < a href = "Bowser.html" > Bowser< / a > < ul class = 'methods' > < li data-type = 'method' > < a href = "Bowser.html#.getParser" > getParser< / a > < / li > < li data-type = 'method' > < a href = "Bowser.html#.parse" > parse< / a > < / li > < / ul > < / li > < li > < a href = "Parser.html" > Parser< / a > < ul class = 'methods' > < li data-type = 'method' > < a href = "Parser.html#getBrowser" > getBrowser< / a > < / li > < li data-type = 'method' > < a href = "Parser.html#getBrowserName" > getBrowserName< / a > < / li > < li data-type = 'method' > < a href = "Parser.html#getBrowserVersion" > getBrowserVersion< / a > < / li > < li data-type = 'method' > < a href = "Parser.html#getEngine" > getEngine< / a > < / li > < li data-type = 'method' > < a href = "Parser.html#getEngineName" > getEngineName< / a > < / li > < li data-type = 'method' > < a href = "Parser.html#getOS" > getOS< / a > < / li > < li data-type = 'method' > < a href = "Parser.html#getOSName" > getOSName< / a > < / li > < li data-type = 'method' > < a href = "Parser.html#getOSVersion" > getOSVersion< / a > < / li > < li data-type = 'method' > < a href = "Parser.html#getPlatform" > getPlatform< / a > < / li > < li data-type = 'method' > < a href = "Parser.html#getPlatformType" > getPlatformType< / a > < / li > < li data-type = 'method' > < a href = "Parser.html#getResult" > getResult< / a > < / li > < li data-type = 'method' > < a href = "Parser.html#getUA" > getUA< / a > < / li > < li data-type = 'method' > < a href = "Parser.html#is" > is< / a > < / li > < li data-type = 'method' > < a href = "Parser.html#isBrowser" > isBrowser< / a > < / li > < li data-type = 'method' > < a href = "Parser.html#parse" > parse< / a > < / li > < li data-type = 'method' > < a href = "Parser.html#parseBrowser" > parseBrowser< / a > < / li > < li data-type = 'method' > < a href = "Parser.html#parseEngine" > parseEngine< / a > < / li > < li data-type = 'method' > < a href = "Parser.html#parseOS" > parseOS< / a > < / li > < li data-type = 'method' > < a href = "Parser.html#parsePlatform" > parsePlatform< / a > < / li > < li data-type = 'method' > < a href = "Parser.html#satisfies" > satisfies< / a > < / li > < li data-type = 'method' > < a href = "Parser.html#some" > some< / a > < / li > < li data-type = 'method' > < a href = "Parser.html#test" > test< / a > < / li > < / ul > < / li > < / ul > < h3 > Global< / h3 > < ul > < li > < a href = "global.html#getAndroidVersionName" > getAndroidVersionName< / a > < / li > < li > < a href = "global.html#getBrowserAlias" > getBrowserAlias< / a > < / li > < li > < a href = "global.html#getBrowserTypeByAlias" > getBrowserTypeByAlias< / a > < / li > < li > < a href = "global.html#getFirstMatch" > getFirstMatch< / a > < / li > < li > < a href = "global.html#getMacOSVersionName" > getMacOSVersionName< / a > < / li > < li > < a href = "global.html#getSecondMatch" > getSecondMatch< / a > < / li > < li > < a href = "global.html#getVersionPrecision" > getVersionPrecision< / a > < / li > < li > < a href = "global.html#map" > map< / a > < / li > < li > < a href = "global.html#matchAndReturnConst" > matchAndReturnConst< / a > < / li > < / ul >
2018-09-09 12:08:48 +00:00
< / nav >
< div id = "main" >
2019-07-16 19:21:01 +00:00
< section class = "package" >
< h3 > < / h3 >
< / section >
2018-09-09 12:08:48 +00:00
2019-07-16 19:21:01 +00:00
2018-09-09 12:08:48 +00:00
< section class = "readme" >
2019-07-16 19:21:01 +00:00
< article > < h2 > Bowser< / h2 >
2019-07-17 10:52:54 +00:00
< p > A small, fast and rich-API browser/platform/engine detector for both browser and node.< / p >
2019-07-16 19:21:01 +00:00
< ul >
< li > < strong > Small.< / strong > Use plain ES5-version which is ~4.8kB gzipped.< / li >
< li > < strong > Optimized.< / strong > Use only those parsers you need — it doesn't do useless work.< / li >
< li > < strong > Multi-platform.< / strong > It's browser- and node-ready, so you can use it in any environment.< / li >
< / ul >
< p > Don't hesitate to support the project on Github or < a href = "https://opencollective.com/bowser" > OpenCollective< / a > if you like it ❤️ Also, contributors are always welcome!< / p >
< p > < a href = "https://travis-ci.org/lancedikson/bowser/" > < img src = "https://travis-ci.org/lancedikson/bowser.svg?branch=master" alt = "Build Status" > < / a > < a href = "https://greenkeeper.io/" > < img src = "https://badges.greenkeeper.io/lancedikson/bowser.svg" alt = "Greenkeeper badge" > < / a > < a href = "https://coveralls.io/github/lancedikson/bowser?branch=master" > < img src = "https://coveralls.io/repos/github/lancedikson/bowser/badge.svg?branch=master" alt = "Coverage Status" > < / a > < / p >
< h1 > Contents< / h1 >
< ul >
2018-07-22 16:38:52 +00:00
< li > < a href = "#overview" > Overview< / a > < / li >
< li > < a href = "#use-cases" > Use cases< / a > < / li >
< li > < a href = "#advanced-usage" > Advanced usage< / a > < / li >
< li > < a href = "#contributing" > How can I help?< / a > < / li >
2018-07-08 09:09:27 +00:00
< / ul >
2019-07-16 19:21:01 +00:00
< h1 > Overview< / h1 >
< p > The library is made to help to detect what browser your user has and gives you a convenient API to filter the users somehow depending on their browsers.< / p >
< h3 > ⚠️ Version 2.0 breaking changes ⚠️< / h3 >
< p > Version 2.0 has drastically changed the API. All available methods are on the < a href = "https://lancedikson.github.io/bowser/docs" > docs page< / a > .< / p >
2019-02-14 03:41:45 +00:00
< p > < em > For legacy code, check out the < a href = "https://github.com/lancedikson/bowser/tree/v1.x" > 1.x< / a > branch and install it through < code > npm install bowser@1.9.4< / code > .< / em > < / p >
2019-07-16 19:21:01 +00:00
< h1 > Use cases< / h1 >
< p > First of all, require the library. This is a UMD Module, so it will work for AMD, TypeScript, ES6, and CommonJS module systems.< / p >
2019-01-19 13:44:08 +00:00
< pre class = "prettyprint source lang-javascript" > < code > const Bowser = require(" bowser" ); // CommonJS
2019-02-14 03:41:45 +00:00
import * as Bowser from " bowser" ; // TypeScript
2019-07-16 19:21:01 +00:00
import Bowser from " bowser" ; // ES6 (and TypeScript with --esModuleInterop enabled)
< / code > < / pre >
< p > By default, the exported version is the < em > ES5 transpiled version< / em > , which < strong > do not< / strong > include any polyfills.< / p >
2018-10-19 17:32:59 +00:00
< p > In case you don't use your own < code > babel-polyfill< / code > you may need to have pre-built bundle with all needed polyfills.
2018-07-22 16:38:52 +00:00
So, for you it's suitable to require bowser like this: < code > require('bowser/bundled')< / code > .
As the result, you get a ES5 version of bowser with < code > babel-polyfill< / code > bundled together.< / p >
2018-08-18 11:14:56 +00:00
< p > You may need to use the source files, so they will be available in the package as well.< / p >
2019-07-16 19:21:01 +00:00
< h2 > Browser props detection< / h2 >
< p > Often we need to pick users' browser properties such as the name, the version, the rendering engine and so on. Here is an example how to do it with Bowser:< / p >
2019-02-14 03:41:45 +00:00
< pre class = "prettyprint source lang-javascript" > < code > const browser = Bowser.getParser(window.navigator.userAgent);
2018-07-08 09:09:27 +00:00
console.log(`The current browser name is " ${browser.getBrowserName()}" `);
2019-07-16 19:21:01 +00:00
// The current browser name is " Internet Explorer"
< / code > < / pre >
< p > or< / p >
2019-02-14 03:41:45 +00:00
< pre class = "prettyprint source lang-javascript" > < code > const browser = Bowser.getParser(window.navigator.userAgent);
2019-03-06 12:31:37 +00:00
console.log(browser.getBrowser());
// outputs
{
name: " Internet Explorer"
version: " 11.0"
2019-07-16 19:21:01 +00:00
}
< / code > < / pre >
< p > or< / p >
2019-03-06 12:31:37 +00:00
< pre class = "prettyprint source lang-javascript" > < code > console.log(Bowser.parse(window.navigator.userAgent));
2019-01-19 13:44:08 +00:00
2018-07-08 09:09:27 +00:00
// outputs
{
browser: {
name: " Internet Explorer"
version: " 11.0"
},
os: {
name: " Windows"
version: " NT 6.3"
versionName: " 8.1"
},
platform: {
type: " desktop"
},
engine: {
name: " Trident"
version: " 7.0"
}
2019-07-16 19:21:01 +00:00
}
< / code > < / pre >
< h2 > Filtering browsers< / h2 >
< p > You could want to filter some particular browsers to provide any special support for them or make any workarounds.
2018-07-08 09:09:27 +00:00
It could look like this:< / p >
2019-02-14 03:41:45 +00:00
< pre class = "prettyprint source lang-javascript" > < code > const browser = Bowser.getParser(window.navigator.userAgent);
2018-07-22 16:38:52 +00:00
const isValidBrowser = browser.satisfies({
2018-07-08 09:09:27 +00:00
// declare browsers per OS
windows: {
" internet explorer" : " >10" ,
},
macos: {
safari: " >10.1"
},
// per platform (mobile, desktop or tablet)
mobile: {
2019-01-19 13:44:08 +00:00
safari: '>=9',
2018-07-08 09:09:27 +00:00
'android browser': '>3.10'
},
// or in general
2019-01-19 13:44:08 +00:00
chrome: " ~20.1.1432" ,
2018-07-08 09:09:27 +00:00
firefox: " >31" ,
2019-08-04 20:53:47 +00:00
opera: " >=22" ,
2018-08-18 11:14:56 +00:00
// also supports equality operator
chrome: " =20.1.1432" , // will match particular build only
// and loose-equality operator
2019-08-04 20:53:47 +00:00
chrome: " ~20" , // will match any 20.* sub-version
2018-08-18 11:14:56 +00:00
chrome: " ~20.1" // will match any 20.1.* sub-version (20.1.19 as well as 20.1.12.42-alpha.1)
2019-07-16 19:21:01 +00:00
});
< / code > < / pre >
< p > Settings for any particular OS or platform has more priority and redefines settings of standalone browsers.
2018-07-22 16:38:52 +00:00
Thus, you can define OS or platform specific rules and they will have more priority in the end.< / p >
< p > More of API and possibilities you will find in the < code > docs< / code > folder.< / p >
2019-07-16 19:21:01 +00:00
< h3 > Browser names for < code > .satisfies()< / code > < / h3 >
< p > By default you are supposed to use the full browser name for < code > .satisfies< / code > .
2019-04-07 08:48:26 +00:00
But, there's a short way to define a browser using short aliases. The full
list of aliases can be found in < a href = "src/constants.js" > the file< / a > .< / p >
2019-07-16 19:21:01 +00:00
< h2 > Similar Projects< / h2 >
< ul >
2018-07-08 09:09:27 +00:00
< li > < a href = "https://github.com/BigBadBleuCheese/Kong" > Kong< / a > - A C# port of Bowser.< / li >
< / ul >
2019-07-16 19:21:01 +00:00
< h2 > License< / h2 >
< p > Licensed as MIT. All rights not explicitly granted in the MIT license are reserved. See the included LICENSE file for more details.< / p > < / article >
2018-09-09 12:08:48 +00:00
< / section >
< / div >
< br class = "clear" >
< footer >
2019-08-04 20:53:47 +00:00
Documentation generated by < a href = "https://github.com/jsdoc3/jsdoc" > JSDoc 3.6.3< / a > on Sun Aug 04 2019 23:53:02 GMT+0300 (Eastern European Summer Time) using the < a href = "https://github.com/clenemt/docdash" > docdash< / a > theme.
2018-09-09 12:08:48 +00:00
< / footer >
< script > prettyPrint ( ) ; < / script >
2019-07-16 19:21:01 +00:00
< script src = "scripts/polyfill.js" > < / script >
2018-09-09 12:08:48 +00:00
< script src = "scripts/linenumber.js" > < / script >
2019-07-16 19:21:01 +00:00
2018-09-09 12:08:48 +00:00
< / body >
2018-07-05 19:44:43 +00:00
< / html >
