You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
lancedikson_bowser/docs/index.html

223 lines
12 KiB

6 years ago
<!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">
<script src="scripts/nav.js" defer></script>
6 years ago
<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>
<nav >
6 years ago
<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#assign">assign</a></li><li><a href="global.html#find">find</a></li><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>
6 years ago
</nav>
<div id="main">
<section class="package">
<h3> </h3>
</section>
6 years ago
6 years ago
<section class="readme">
<article><h2>Bowser</h2>
<p>A small, fast and rich-API browser/platform/engine detector for both browser and node.</p>
<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://opencollective.com/bowser"><img src="https://opencollective.com/bowser/all/badge.svg?label=financial+contributors" alt="Financial Contributors on Open Collective"></a> <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> <img src="https://img.shields.io/npm/dm/bowser" alt="Downloads"></p>
<h1>Contents</h1>
<ul>
6 years ago
<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>
</ul>
<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. Check it out on this page: https://bowser-js.github.io/bowser-online/.</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>
<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>
<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>
5 years ago
<pre class="prettyprint source lang-javascript"><code>const Bowser = require(&quot;bowser&quot;); // CommonJS
import * as Bowser from &quot;bowser&quot;; // TypeScript
import Bowser from &quot;bowser&quot;; // 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>
<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.
6 years ago
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>
6 years ago
<p>You may need to use the source files, so they will be available in the package as well.</p>
<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>
<pre class="prettyprint source lang-javascript"><code>const browser = Bowser.getParser(window.navigator.userAgent);
console.log(`The current browser name is &quot;${browser.getBrowserName()}&quot;`);
// The current browser name is &quot;Internet Explorer&quot;
</code></pre>
<p>or</p>
<pre class="prettyprint source lang-javascript"><code>const browser = Bowser.getParser(window.navigator.userAgent);
5 years ago
console.log(browser.getBrowser());
// outputs
{
name: &quot;Internet Explorer&quot;
version: &quot;11.0&quot;
}
</code></pre>
<p>or</p>
5 years ago
<pre class="prettyprint source lang-javascript"><code>console.log(Bowser.parse(window.navigator.userAgent));
5 years ago
// outputs
{
browser: {
name: &quot;Internet Explorer&quot;
version: &quot;11.0&quot;
},
os: {
name: &quot;Windows&quot;
version: &quot;NT 6.3&quot;
versionName: &quot;8.1&quot;
},
platform: {
type: &quot;desktop&quot;
},
engine: {
name: &quot;Trident&quot;
version: &quot;7.0&quot;
}
}
</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.
It could look like this:</p>
<pre class="prettyprint source lang-javascript"><code>const browser = Bowser.getParser(window.navigator.userAgent);
6 years ago
const isValidBrowser = browser.satisfies({
// declare browsers per OS
windows: {
&quot;internet explorer&quot;: &quot;>10&quot;,
},
macos: {
safari: &quot;>10.1&quot;
},
// per platform (mobile, desktop or tablet)
mobile: {
5 years ago
safari: '>=9',
'android browser': '>3.10'
},
// or in general
5 years ago
chrome: &quot;~20.1.1432&quot;,
firefox: &quot;>31&quot;,
opera: &quot;>=22&quot;,
6 years ago
// also supports equality operator
chrome: &quot;=20.1.1432&quot;, // will match particular build only
// and loose-equality operator
chrome: &quot;~20&quot;, // will match any 20.* sub-version
6 years ago
chrome: &quot;~20.1&quot; // will match any 20.1.* sub-version (20.1.19 as well as 20.1.12.42-alpha.1)
});
</code></pre>
<p>Settings for any particular OS or platform has more priority and redefines settings of standalone browsers.
6 years ago
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>
<h3>Browser names for <code>.satisfies()</code></h3>
<p>By default you are supposed to use the full browser name for <code>.satisfies</code>.
5 years ago
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>
<h2>Similar Projects</h2>
<ul>
<li><a href="https://github.com/BigBadBleuCheese/Kong">Kong</a> - A C# port of Bowser.</li>
</ul>
<h2>Contributors</h2>
<h3>Code Contributors</h3>
<p>This project exists thanks to all the people who contribute. [<a href="CONTRIBUTING.md">Contribute</a>].
<a href="https://github.com/lancedikson/bowser/graphs/contributors"><img src="https://opencollective.com/bowser/contributors.svg?width=890&button=false" /></a></p>
<h3>Financial Contributors</h3>
<p>Become a financial contributor and help us sustain our community. [<a href="https://opencollective.com/bowser/contribute">Contribute</a>]</p>
<h4>Individuals</h4>
<p><a href="https://opencollective.com/bowser"><img src="https://opencollective.com/bowser/individuals.svg?width=890"></a></p>
<h4>Organizations</h4>
<p>Support this project with your organization. Your logo will show up here with a link to your website. [<a href="https://opencollective.com/bowser/contribute">Contribute</a>]</p>
<p><a href="https://opencollective.com/bowser/organization/0/website"><img src="https://opencollective.com/bowser/organization/0/avatar.svg"></a>
<a href="https://opencollective.com/bowser/organization/1/website"><img src="https://opencollective.com/bowser/organization/1/avatar.svg"></a>
<a href="https://opencollective.com/bowser/organization/2/website"><img src="https://opencollective.com/bowser/organization/2/avatar.svg"></a>
<a href="https://opencollective.com/bowser/organization/3/website"><img src="https://opencollective.com/bowser/organization/3/avatar.svg"></a>
<a href="https://opencollective.com/bowser/organization/4/website"><img src="https://opencollective.com/bowser/organization/4/avatar.svg"></a>
<a href="https://opencollective.com/bowser/organization/5/website"><img src="https://opencollective.com/bowser/organization/5/avatar.svg"></a>
<a href="https://opencollective.com/bowser/organization/6/website"><img src="https://opencollective.com/bowser/organization/6/avatar.svg"></a>
<a href="https://opencollective.com/bowser/organization/7/website"><img src="https://opencollective.com/bowser/organization/7/avatar.svg"></a>
<a href="https://opencollective.com/bowser/organization/8/website"><img src="https://opencollective.com/bowser/organization/8/avatar.svg"></a>
<a href="https://opencollective.com/bowser/organization/9/website"><img src="https://opencollective.com/bowser/organization/9/avatar.svg"></a></p>
<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>
6 years ago
</section>
</div>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 09 2020 22:10:18 GMT+0300 (Eastern European Summer Time) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
6 years ago
</footer>
<script>prettyPrint();</script>
<script src="scripts/polyfill.js"></script>
6 years ago
<script src="scripts/linenumber.js"></script>
6 years ago
</body>
</html>