What your browser provides = 😱😵💫❌
What {UAParser.js} provides = 🙂💰✅
To get started, install UAParser.js using npm:
$ npm install ua-parser-js
Then, import the library in your application:
import { UAParser } from 'ua-parser-js';
const ua = 'Mozilla/5.0 (X11; U; Linux armv7l; en-GB; rv:1.9.2a1pre)
Gecko/20090928 Firefox/3.5 Maemo Browser 1.4.1.22 RX-51 N900';
const { browser, cpu, device } = UAParser(ua);
console.log(browser.name); // Maemo Browser
console.log(cpu.is('arm')); // true
console.log(device.is('mobile')); // true
console.log(device.vendor); // Nokia
console.log(device.model); // N900
Download UAParser.js from the official GitHub repository: ua-parser-js, then place the following script tag in your HTML file to include the library:
<script src="ua-parser.min.js"></script>
Alternatively, you can use a CDN like jsDelivr or cdnjs in your script tag:
<script src="https://cdn.jsdelivr.net/npm/ua-parser-js/dist/ua-parser.min.js"></script>
Then, use the library in your HTML page:
<!doctype html>
<html>
<head>
<script src="ua-parser.min.js"></script>
<script>
const uap = new UAParser();
console.log(uap.getResult());
/*
/// This will print an object structured like this:
{
ua: "",
browser: {
name: "",
version: "",
major: "",
type: ""
},
engine: {
name: "",
version: ""
},
os: {
name: "",
version: ""
},
device: {
model: "",
type: "",
vendor: ""
},
cpu: {
architecture: ""
}
}
*/
// The result depends on current window.navigator.userAgent value
// Now let's try a custom user-agent string as an example
const 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";
uap.setUA(uastring1);
const result = uap.getResult();
console.log(result.browser); // {name: "Chromium", version: "15.0.874.106", major: "15", type: undefined}
console.log(result.device); // {model: undefined, type: undefined, vendor: undefined}
console.log(result.os); // {name: "Ubuntu", version: "11.10"}
console.log(result.os.version); // "11.10"
console.log(result.engine.name); // "WebKit"
console.log(result.cpu.architecture); // "amd64"
// Do some other tests
const uastring2 = "Mozilla/5.0 (compatible; Konqueror/4.1; OpenBSD) KHTML/4.1.4 (like Gecko)";
console.log(uap.setUA(uastring2).getBrowser().name); // "Konqueror"
console.log(uap.getOS()); // {name: "OpenBSD", version: undefined}
console.log(uap.getEngine()); // {name: "KHTML", version: "4.1.4"}
const uastring3 = 'Mozilla/5.0 (PlayBook; U; RIM Tablet OS 1.0.0; en-US) AppleWebKit/534.11 (KHTML, like Gecko) Version/7.1.0.7 Safari/534.11';
console.log(uap.setUA(uastring3).getDevice().model); // "PlayBook"
console.log(uap.getOS()); // {name: "RIM Tablet OS", version: "1.0.0"}
console.log(uap.getBrowser().name); // "Safari"
</script>
</head>
<body>
</body>
</html>
In a server-side environment like Node.js, UAParser.js can parse the [User-Agent] and [Sec-CH-UA-*] headers from the incoming HTTP requests.
To get started, install UAParser.js using npm:
$ npm install ua-parser-js
Then, require the library in your Node.js application:
const http = require('http');
const uap = require('ua-parser-js');
http.createServer(function (req, res) {
// get user-agent header
let ua = uap(req.headers['user-agent']);
/*
// Since v2.0.0
// you can also pass Client Hints data to UAParser
// note: only works in a secure context (localhost or https://)
// from any browsers that are based on Chrome 85+
// https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-UA
const getHighEntropyValues = 'Sec-CH-UA-Full-Version-List, Sec-CH-UA-Mobile, Sec-CH-UA-Model, Sec-CH-UA-Platform, Sec-CH-UA-Platform-Version, Sec-CH-UA-Arch, Sec-CH-UA-Bitness';
res.setHeader('Accept-CH', getHighEntropyValues);
res.setHeader('Critical-CH', getHighEntropyValues);
ua = uap(req.headers).withClientHints();
*/
// write the result as response
res.end(JSON.stringify(ua, null, ' '));
})
.listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');
Although written in vanilla JavaScript, UAParser.js automatically detects the presence of jQuery (or Zepto) and creates a $.ua object in addition to the window.UAParser constructor.
Properties
The result of detected user-agent
$.ua.browser$.ua.cpu$.ua.device$.ua.engine$.ua.os
Methods
To get or set the user-agent
$.ua.get()$.ua.set(ua)
Code Example:
// Say we are in a browser where jQuery is present
// with 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"
// 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"
if($.ua.browser.is("IE")) {
alert("Please upgrade!");
}
// Now let's try 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
console.log($.ua.browser.name); // "Safari"
console.log($.ua.engine.name); // "Webkit"
console.log($.ua.device); // {vendor: "Motorola", model: "Xoom", type: "tablet"}
console.log($.ua.browser.version); // "4.0"
console.log($.ua.browser.major); // "4"
// Add class to <body> tag
// <body class="ua-browser-safari ua-devicetype-tablet">
$('body')
.addClass(
'ua-browser-' +
$.ua.browser.name +
' ua-devicetype-' +
$.ua.device.type);
npx to run UAParser.js from the command line without installing the package:
$ npx ua-parser-js "Flock/2.16 (Zenwalk 7.3; es_PR;)"
# console output:
"
[
{
"ua": "Flock/2.16 (Zenwalk 7.3; es_PR;)",
"browser": {
"name": "Flock",
"version": "2.16",
"major": "2"
},
"cpu": {},
"device": {},
"engine": {},
"os": {
"name": "Zenwalk",
"version": "7.3"
}
}
]
"
# let's save the result into a log file:
$ npx ua-parser-js "Flock/2.16 (Zenwalk 7.3; es_PR;)" >> log.txt
Extract Only What's Valuable
{UAParser.js} filters the noise away and only extracts the most meaningful data in a well-structured format.
Relatively Small Footprint
While {UAParser.js} covers a vast range of detection, on the other hand its size is always kept to be as light as possible.
Zero-deps Vanilla JS
No dependencies, bloated framework, unnecessary boilerplate, transpiler, or large-sized files required.
100% Free & Open Source
{UAParser.js} is free to use & modify at no charge. PRO licenses also available if you need a non-free license.
Best Developer Experience
{UAParser.js} generates a plugin for jQuery user, and provides predefined type for TypeScript user.
Client-side & Server-side
{UAParser.js} is an isomorphic JavaScript library that's able to run either in browser or node.js environment.
"A great utility library to have when you're investigating what kind of users are visiting your website and how you can improve their UX. Supports most browsers out there."
Gabrijel Golubić - Frontend Web Developer
"I've been using your library for a long time and it totally rocks!".
Christian Rich - Web Developer
"Thank you for putting out this very useful library!".
Anuj Nijhawan - Web Developer
Who's Using {UAParser.js} ?Showcasing some
companies that are using our library
Package OptionsComparison between our regular open-source & PRO licenses
| Open-Source Editions | Commercial Editions | ||||
|---|---|---|---|---|---|
| License | MIT | AGPL | PRO Personal | PRO Business | PRO Enterprise |
| Browser detection | |||||
| CPU detection | |||||
| Device detection | |||||
| Engine detection | |||||
| OS detection | |||||
| Enhanced detection | |||||
| Client Hints support | |||||
| Extras (Apps, Bots, Libs, Emails, Media Players, etc) | |||||
| CommonJS support | |||||
| ES modules support | |||||
| TypeScript declarations available | |||||
| Public npm module available | |||||
| Direct downloads available | |||||
| Allowed for commercial use | |||||
| Permissive license | |||||
| Unlimited use per 1 license | |||||
| 1-year limited support | |||||
| Lifetime updates | |||||
| Price | FREE | FREE | $12 | $25 | $500 |
| GET THE PACKAGE | |||||
Contributors Those who collaborate and
continuously improve this library to be awesome
Backers & Sponsors Those who give back and get
the value from using this library
Contribute to UAParser.jsIt's free to use, but
feel free to contribute if you find it helpful
ONE-TIME SPONSOR
MONTHLY SPONSOR
GITHUB SPONSOR
UAParser.js is licensed under MIT, AGPLv3 & PRO licenses. Copyright (c) 2012-2024 Faisal Salman.