mirror of
https://github.com/faisalman/ua-parser-js.git
synced 2025-09-27 07:58:45 +03:00
Update README contents & structures
This commit is contained in:
Faisal Salman
parent
10475761cf
commit
1667f5f2b2
160
readme.md
160
readme.md
@ -1,18 +1,49 @@
|
||||
<p align="center">
|
||||
<img src="https://raw.githubusercontent.com/faisalman/ua-parser-js/gh-pages/images/logo.png" width="128" height="128">
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<img src="https://travis-ci.org/faisalman/ua-parser-js.svg?branch=master">
|
||||
<img src="https://img.shields.io/npm/v/ua-parser-js.svg">
|
||||
<img src="https://img.shields.io/npm/dw/ua-parser-js.svg">
|
||||
</p>
|
||||
|
||||
# UAParser.js
|
||||
|
||||
<img align="right" src="https://raw.githubusercontent.com/faisalman/ua-parser-js/gh-pages/images/logo.png"> A JavaScript-based User-Agent string parser. Can be used either in browser (client-side) or in node.js (server-side) environment. Also available as jQuery/Zepto plugin, Bower/Meteor package, & RequireJS/AMD module. This library aims to identify detailed type of web browser, layout engine, operating system, cpu architecture, and device type/model, entirely from user-agent string with a relatively small footprint (~17KB when minified / ~6KB gzipped). Written in vanilla JavaScript, which means it doesn't require any other library and can be used independently. However, it's not recommended to use this library as browser detection since the result may not be more accurate than using feature detection.
|
||||
|
||||
[](https://travis-ci.org/faisalman/ua-parser-js)
|
||||
[](https://www.npmjs.com/package/ua-parser-js)
|
||||
[](https://www.npmjs.com/package/ua-parser-js)
|
||||
[](https://bower.io/)
|
||||
[](https://cdnjs.com/libraries/UAParser.js)
|
||||
JavaScript library with relatively small footprint (~17KB minified, ~6KB gzipped) that can be used either in browser (client-side) or node.js (server-side) to detect Browser, Engine, OS, CPU, and Device type/model from User-Agent data.
|
||||
|
||||
* Author : Faisal Salman <<f@faisalman.com>>
|
||||
* Demo : http://faisalman.github.io/ua-parser-js
|
||||
* Source : https://github.com/faisalman/ua-parser-js
|
||||
|
||||
# Constructor
|
||||
|
||||
# Development
|
||||
|
||||
## Sponsors
|
||||
|
||||
<a href="https://opencollective.com/ua-parser-js"><img src="https://opencollective.com/ua-parser-js/tiers/backers.svg?avatarHeight=64" height="80"/></a> <a href="https://opencollective.com/ua-parser-js"><img src="https://opencollective.com/ua-parser-js/tiers/sponsors.svg?avatarHeight=64" height="80"/></a>
|
||||
|
||||
<a href="https://www.paypal.me/faisalman/"><img src="https://cdn.rawgit.com/twolfson/paypal-github-button/1.0.0/dist/button.svg" height="40"></a>
|
||||
|
||||
## Contributors
|
||||
|
||||
<a href="https://github.com/faisalman/ua-parser-js/graphs/contributors">
|
||||
<img src="https://contrib.rocks/image?repo=faisalman/ua-parser-js" />
|
||||
</a>
|
||||
|
||||
Made with [contributors-img](https://contrib.rocks).
|
||||
|
||||
## How To Contribute
|
||||
|
||||
* Fork and clone this repository
|
||||
* Make some changes as required
|
||||
* Write unit test to showcase its functionality
|
||||
* Run the test suites to make sure it's not breaking anything `$ npm test`
|
||||
* Submit a pull request under `develop` branch
|
||||
|
||||
# Documentation
|
||||
|
||||
## Constructor
|
||||
|
||||
* `new UAParser([uastring][,extensions])`
|
||||
* returns new instance
|
||||
@ -20,7 +51,7 @@
|
||||
* `UAParser([uastring][,extensions])`
|
||||
* returns result object `{ ua: '', browser: {}, cpu: {}, device: {}, engine: {}, os: {} }`
|
||||
|
||||
# Methods
|
||||
## Methods
|
||||
|
||||
* `getBrowser()`
|
||||
* returns `{ name: '', version: '' }`
|
||||
@ -103,11 +134,12 @@ WebOS, Windows [Phone/Mobile], Zenwalk, ...
|
||||
* returns UA string of current instance
|
||||
|
||||
* `setUA(uastring)`
|
||||
* set UA string to parse
|
||||
* set UA string to be parsed
|
||||
* returns current instance
|
||||
|
||||
# Usage
|
||||
|
||||
# Example
|
||||
## Using HTML
|
||||
|
||||
```html
|
||||
<!doctype html>
|
||||
@ -117,16 +149,15 @@ WebOS, Windows [Phone/Mobile], Zenwalk, ...
|
||||
<script>
|
||||
|
||||
var parser = new UAParser();
|
||||
|
||||
// by default it takes ua string from current browser's window.navigator.userAgent
|
||||
console.log(parser.getResult());
|
||||
/*
|
||||
/// this will print an object structured like this:
|
||||
/// This will print an object structured like this:
|
||||
{
|
||||
ua: "",
|
||||
browser: {
|
||||
name: "",
|
||||
version: ""
|
||||
version: "",
|
||||
major: "" //@deprecated
|
||||
},
|
||||
engine: {
|
||||
name: "",
|
||||
@ -146,14 +177,14 @@ WebOS, Windows [Phone/Mobile], Zenwalk, ...
|
||||
}
|
||||
}
|
||||
*/
|
||||
// Default result depends on current window.navigator.userAgent value
|
||||
|
||||
// let's test a custom user-agent string as an example
|
||||
var uastring = "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/535.2 (KHTML, like Gecko) Ubuntu/11.10 Chromium/15.0.874.106 Chrome/15.0.874.106 Safari/535.2";
|
||||
parser.setUA(uastring);
|
||||
|
||||
// Now let's try a custom user-agent string as an example
|
||||
var uastring1 = "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/535.2 (KHTML, like Gecko) Ubuntu/11.10 Chromium/15.0.874.106 Chrome/15.0.874.106 Safari/535.2";
|
||||
parser.setUA(uastring1);
|
||||
var result = parser.getResult();
|
||||
// this will also produce the same result (without instantiation):
|
||||
// var result = UAParser(uastring);
|
||||
// You can also use UAParser constructor directly without having to create an instance:
|
||||
// var result = UAParser(uastring1);
|
||||
|
||||
console.log(result.browser); // {name: "Chromium", version: "15.0.874.106"}
|
||||
console.log(result.device); // {model: undefined, type: undefined, vendor: undefined}
|
||||
@ -162,7 +193,7 @@ WebOS, Windows [Phone/Mobile], Zenwalk, ...
|
||||
console.log(result.engine.name); // "WebKit"
|
||||
console.log(result.cpu.architecture); // "amd64"
|
||||
|
||||
// do some other tests
|
||||
// Do some other tests
|
||||
var uastring2 = "Mozilla/5.0 (compatible; Konqueror/4.1; OpenBSD) KHTML/4.1.4 (like Gecko)";
|
||||
console.log(parser.setUA(uastring2).getBrowser().name); // "Konqueror"
|
||||
console.log(parser.getOS()); // {name: "OpenBSD", version: undefined}
|
||||
@ -201,40 +232,6 @@ http.createServer(function (req, res) {
|
||||
console.log('Server running at http://127.0.0.1:1337/');
|
||||
```
|
||||
|
||||
## Using requirejs
|
||||
|
||||
```js
|
||||
requirejs.config({
|
||||
baseUrl : 'js/lib', // path to your script directory
|
||||
paths : {
|
||||
'ua-parser-js' : 'ua-parser.min'
|
||||
}
|
||||
});
|
||||
|
||||
requirejs(['ua-parser-js'], function(UAParser) {
|
||||
var parser = new UAParser();
|
||||
console.log(parser.getResult());
|
||||
});
|
||||
```
|
||||
|
||||
## Using CDN
|
||||
|
||||
```html
|
||||
<script src="https://cdn.jsdelivr.net/npm/ua-parser-js@0/dist/ua-parser.min.js"></script>
|
||||
```
|
||||
|
||||
## Using bower
|
||||
|
||||
```sh
|
||||
$ bower install ua-parser-js
|
||||
```
|
||||
|
||||
## Using meteor
|
||||
|
||||
```sh
|
||||
$ meteor add faisalman:ua-parser-js
|
||||
```
|
||||
|
||||
## Using TypeScript
|
||||
|
||||
```sh
|
||||
@ -245,18 +242,18 @@ $ npm install --save @types/ua-parser-js
|
||||
|
||||
## Using jQuery/Zepto ($.ua)
|
||||
|
||||
Although written in vanilla js (which means it doesn't depends on jQuery), this library will automatically detect if jQuery/Zepto is present and create `$.ua` object based on browser's user-agent (although in case you need, `window.UAParser` constructor is still present). To get/set user-agent you can use: `$.ua.get()` / `$.ua.set(uastring)`.
|
||||
Although written in vanilla js, this library will automatically detect if jQuery/Zepto is present and create `$.ua` object (with values based on its User-Agent) along with `window.UAParser` constructor. To get/set user-agent you can use: `$.ua.get()` / `$.ua.set(uastring)`.
|
||||
|
||||
```js
|
||||
// In browser with default user-agent: 'Mozilla/5.0 (Linux; U; Android 2.3.4; en-us; Sprint APA7373KT Build/GRJ22) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0':
|
||||
// Say we are in a browser with default user-agent: 'Mozilla/5.0 (Linux; U; Android 2.3.4; en-us; Sprint APA7373KT Build/GRJ22) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0':
|
||||
|
||||
// Do some tests
|
||||
// Get the details
|
||||
console.log($.ua.device); // {vendor: "HTC", model: "Evo Shift 4G", type: "mobile"}
|
||||
console.log($.ua.os); // {name: "Android", version: "2.3.4"}
|
||||
console.log($.ua.os.name); // "Android"
|
||||
console.log($.ua.get()); // "Mozilla/5.0 (Linux; U; Android 2.3.4; en-us; Sprint APA7373KT Build/GRJ22) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0"
|
||||
|
||||
// reset to custom user-agent
|
||||
// Now lets try to reset to another custom user-agent
|
||||
$.ua.set('Mozilla/5.0 (Linux; U; Android 3.0.1; en-us; Xoom Build/HWI69) AppleWebKit/534.13 (KHTML, like Gecko) Version/4.0 Safari/534.13');
|
||||
|
||||
// Test again
|
||||
@ -270,49 +267,20 @@ console.log(parseInt($.ua.browser.version.split('.')[0], 10)); // 4
|
||||
$('body').addClass('ua-browser-' + $.ua.browser.name + ' ua-devicetype-' + $.ua.device.type);
|
||||
```
|
||||
|
||||
## Extending regex patterns
|
||||
## Using Extension
|
||||
|
||||
* `UAParser([uastring,] extensions)`
|
||||
|
||||
Pass your own regexes to extend the limited matching rules.
|
||||
|
||||
```js
|
||||
// Example:
|
||||
var myOwnRegex = [[/(myownbrowser)\/([\w\.]+)/i], [UAParser.BROWSER.NAME, UAParser.BROWSER.VERSION]];
|
||||
var myParser = new UAParser({ browser: myOwnRegex });
|
||||
var uaString = 'Mozilla/5.0 MyOwnBrowser/1.3';
|
||||
console.log(myParser.setUA(uaString).getBrowser()); // {name: "MyOwnBrowser", version: "1.3"}
|
||||
var myOwnListOfBrowsers = [
|
||||
[/(mybrowser)\/([\w\.]+)/i], [UAParser.BROWSER.NAME, UAParser.BROWSER.VERSION]
|
||||
];
|
||||
var myParser = new UAParser({ browser: myOwnListOfBrowsers });
|
||||
var myUA = 'Mozilla/5.0 MyBrowser/1.3';
|
||||
console.log(myParser.setUA(myUA).getBrowser()); // {name: "MyBrowser", version: "1.3"}
|
||||
```
|
||||
|
||||
|
||||
# Development
|
||||
|
||||
## Contribute
|
||||
|
||||
* Fork and clone this repository
|
||||
* Make some changes as required
|
||||
* Write a unit test to showcase your feature
|
||||
* Run the test suites to make sure the changes you made didn't break anything `$ npm run test`
|
||||
* Commit and push to your own repository
|
||||
* Submit a pull request to this repository under `develop` branch
|
||||
* Profit? $$$
|
||||
|
||||
## Build
|
||||
|
||||
Build a minified & packed script
|
||||
|
||||
```sh
|
||||
$ npm run build
|
||||
```
|
||||
|
||||
|
||||
# Donate
|
||||
|
||||
Do you use & like UAParser.js but you don’t find a way to show some love? If yes, please consider donating to support this project. Otherwise, no worries, regardless of whether there is support or not, I will keep maintaining this project. Still, if you buy me a cup of coffee I would be more than happy though :)
|
||||
|
||||
[](https://www.paypal.me/faisalman/)
|
||||
|
||||
|
||||
# License
|
||||
|
||||
MIT License
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user