Add some future usage examples

pull/227/head
Denis Demchenko 7 years ago
parent d3fec85440
commit 85cf8f8bbb

@ -3,22 +3,107 @@ A Browser detector. Because sometimes, there is no other way, and not even good
[![bowser ci](https://secure.travis-ci.org/ded/bowser.png)](https://travis-ci.org/ded/bowser/)
So... it works like this:
# Contents
- Overview
- Use cases
- API
- Changes history
- How can I help?
``` js
if (bowser.msie && bowser.version <= 6) {
alert('Hello China');
}
# Overview
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.
# Use cases
First of all let's require the lib to the project:
```
const Bowser = require('bowser')
```
## 1.1.0 breaking changes
We don't save built script in the repo anymore. The main file (`src/bowser.js`) is available through NPM or Bower.
Also you can download minified file from [the release page](https://github.com/ded/bowser/releases).
## Browser props detection
## 1.0.0 breaking changes
`browser = require('bowser').browser;` becomes `bowser = require('bowser');`
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 make it with Bowser:
---
```
const browser = new Bowser(window.navigator.userAgent);
console.log(`Current browser name is ${browser.getBrowserName()}`);
// Current browser name is Internet Explorer
```
or
```
const impression = new Impression();
const browser = new Bowser(window.navigator.userAgent);
const browserInfo = browser.getBrowser();
impression.brName = browserInfo.name;
impression.brVer = browserInfo.version;
```
or
```
const browser = new Bowser(window.navigator.userAgent);
impression.userTechData = browser.parse();
console.log(impression.userTechData);
```
## Filtering browsers
You could want to filter some particular browsers to provide any special
support for them or make any workarounds.
It could look like this:
```
const isValidBrowser = Bowser.match({
windows: {
ie: "> 10",
},
macos: {
safari: ">= 10"
},
any: {
chrome: "> 20",
ff: ">= 31",
opera: ">= 22"
}
}, window.navigator.userAgent);
```
or you can either get to know if it's a blacklisted browser
```
const isValidBrowser = Bowser.match({
any: {
chrome: "< 25"
},
ios: {
chrome: "< 20"
}
windows: {
ie: "<= 9",
},
macos: {
safari: "5"
}
}, window.navigator.userAgent);
```
As you can see, settings for any particular OS has more priority and redefines settings of `any` property.
Read more details in the [API section]()
# API
-----------
OLD DOCS
## API

Loading…
Cancel
Save