mirror of
https://github.com/lancedikson/bowser
synced 2024-10-27 20:34:22 +00:00
203 lines
9.8 KiB
HTML
203 lines
9.8 KiB
HTML
<!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>
|
|
<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 >
|
|
|
|
<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>
|
|
</nav>
|
|
|
|
<div id="main">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<section class="package">
|
|
<h3> </h3>
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<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://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>
|
|
<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.</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>
|
|
<pre class="prettyprint source lang-javascript"><code>const Bowser = require("bowser"); // CommonJS
|
|
|
|
import * as Bowser from "bowser"; // TypeScript
|
|
|
|
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>
|
|
<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.
|
|
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>
|
|
<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 "${browser.getBrowserName()}"`);
|
|
// The current browser name is "Internet Explorer"
|
|
</code></pre>
|
|
<p>or</p>
|
|
<pre class="prettyprint source lang-javascript"><code>const browser = Bowser.getParser(window.navigator.userAgent);
|
|
console.log(browser.getBrowser());
|
|
|
|
// outputs
|
|
{
|
|
name: "Internet Explorer"
|
|
version: "11.0"
|
|
}
|
|
</code></pre>
|
|
<p>or</p>
|
|
<pre class="prettyprint source lang-javascript"><code>console.log(Bowser.parse(window.navigator.userAgent));
|
|
|
|
// 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"
|
|
}
|
|
}
|
|
</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);
|
|
const isValidBrowser = browser.satisfies({
|
|
// declare browsers per OS
|
|
windows: {
|
|
"internet explorer": ">10",
|
|
},
|
|
macos: {
|
|
safari: ">10.1"
|
|
},
|
|
|
|
// per platform (mobile, desktop or tablet)
|
|
mobile: {
|
|
safari: '>=9',
|
|
'android browser': '>3.10'
|
|
},
|
|
|
|
// or in general
|
|
chrome: "~20.1.1432",
|
|
firefox: ">31",
|
|
opera: ">=22",
|
|
|
|
// also supports equality operator
|
|
chrome: "=20.1.1432", // will match particular build only
|
|
|
|
// and loose-equality operator
|
|
chrome: "~20", // will match any 20.* sub-version
|
|
chrome: "~20.1" // 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.
|
|
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>.
|
|
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>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>
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<br class="clear">
|
|
|
|
<footer>
|
|
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.
|
|
</footer>
|
|
|
|
<script>prettyPrint();</script>
|
|
<script src="scripts/polyfill.js"></script>
|
|
<script src="scripts/linenumber.js"></script>
|
|
|
|
|
|
|
|
</body>
|
|
</html> |