amoilanen / sniffr

Browser, os and device detection

Browser, OS and device detection based on the available user agent string. Can be used both in a browser (also as a standalone script) or in a server environment.

it's very rarely a good idea to use user agent sniffing. You can almost always find a better, more broadly compatible way to solve your problem! MDN: Browser detection using the user agent

Note: Sniffr is written in Typescript and includes all the necessary typings, can be used both in JavaScript and Typescript projects

Why use it

In case some browser-specific issue cannot be fixed uniformly across browsers we may need to perform some browser detection. For example, browser X crashes when function Y from library Z is used, so we have to detect when we are dealing with browser X and disable library Z.

What is recognized

Browsers

• Firefox
• Internet Explorer
• Edge
• Chrome
• Opera
• Opera mini
• Safari
• Android Browser
• BlackBerry Browser
• Yandex Browser
• SeaMonkey

Operating Systems

• Windows
• Linux
• Mac OS
• ChromeOS
• iOS
• Blackberry OS
• OpenBSD
• Android
• Firefox OS
• Windows Phone
• Windows Mobile

Devices

• iPad
• iPhone
• Galaxy
• HTC
• Nexus
• Nokia
• Lumia
• Blackberry
• XBox

Installation

NPM

To install the library use npm:

npm install sniffr

As a standalone script in a browser

Hosted version (by jsDelivr) can be found here (replace the version number) https://cdn.jsdelivr.net/gh/amoilanen/[email protected]/dist/sniffr.standalone.min.js

https://github.com/amoilanen/sniffr/blob/master/dist/sniffr.standalone.min.js is a downloadable minified version of the library to be used as a standalone script in a browser.

How to use in a browser

NPM

The library is can be directly used in a browser, no server-side code is run.

import { RecognizedBrowser } from "sniffr"

//If Windows and Firefox 28 or later
if (RecognizedBrowser.os.name === "windows"
  && RecognizedBrowser.browser.name === "firefox" && RecognizedBrowser.browser.version[0] >= 28) {
  //Apply some workaround
}

For backward compatibility purposes the following more wordy legacy usage pattern is also supported:

import Sniffr from "sniffr"

const sniffr = new Sniffr()
sniffr.sniff()

//If Windows and Firefox 28 or later
if (sniffr.os.name === "windows"
  && sniffr.browser.name === "firefox" && sniffr.browser.version[0] >= 28) {
  //Apply some workaround
}

As a standalone script

When the script is loaded Sniffr object will be initialized and put to the global namespace, it can be accessed directly:

//If Windows and Firefox 28 or later
if (Sniffr.os.name === "windows"
  && Sniffr.browser.name === "firefox" && Sniffr.browser.version[0] >= 28) {
  //Apply some workaround
}

API

• RecognizedBrowser.os: operating system
• RecognizedBrowser.browser: browser
• RecognizedBrowser.device: device

Sniffr.sniff : function that expects a user agent string as an argument, it is called automatically in a browser

How to use on the server side

Sniffr can also be used in a Node.js environment in case you need to do some server-side user agent analysis as well.

First install it

npm install sniffr

Then load the module, provide it the agent string and query the results just like in a browser environment:

var Sniffr = require("sniffr").default;
var s = new Sniffr();

s.sniff("Mozilla/5.0 (iPad; CPU OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A5355d Safari/8536.25");

console.log("Operating System:");
console.log(s.os);
console.log("Browser:");
console.log(s.browser);
console.log("Device:");
console.log(s.device);

Other libraries

Some libraries like jQuery provide only browser information and not the OS information. Some like Detectizr are plugins for other libraries that you may not use. And some require server-side code. A few libraries are usable only on the server or only in a browser.

Sniffr provides simple and symmetric API, does not depend on other libraries, does not require the server part, is tiny, fast and easily extensible. In addition, it can be used both in browser and server environments.

Credits

The original sniffing dog image location is http://publicdomainvectors.org/en/free-clipart/Dog-sniffing-vector-image/11807.html

sniffr's Issues

Detect engine

in addition to browser, os and device also detect the rendering engine, such as WebKit

Run sniffr against a large set of user agent strings, detect "unknown" cases, improve matching logic

This might help improve the accuracy of the os, browser and device recognition

1. Get the list of user agents, including also the most recent ones
2. Create an automated script which will run Sniffr and detect which user agent strings are not recognizable
3. Update the implementation and add new tests for the not recognized user agent strings

Why

Should reduce the number of cases such as #8

Can't parse some Firefox UserAgent strings

Try to parse:
Mozilla/5.0 (iPhone; CPU OS 13_3_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) FxiOS/25.1 Mobile/15E148 Safari/605.1.15

I expect Browser to be Firefox 25.1 but I get "Unknown"

Can see parsed example using this site: https://developers.whatismybrowser.com/useragents/parse/#parse-useragent

unknown data

im using google chrome

android tablet detect

Is there any way to distinguish between a phone or tablet on android?

Add more test cases with the recent user agents

Use examples from https://www.useragents.me/ update the list of recognized mobile devices

Defining the exports object in the global environment breaks the libs on the client side

Hi.

The latest update in the library brings new lines of code:

if (typeof window !== 'undefined') { window.exports = window.exports || {} }

It's breaking the libraries these are defining the environment and putting itself on the object's dependence on the environment

var globalObject = typeof window === 'object' && window || typeof self === 'object' && self; if(typeof exports !== 'undefined') { factory(exports); } else if(globalObject) { globalObject.hljs = factory({}); }

In this case, all of the client libraries that do not bundling or importers as modules are defending in the exports global object, which is not expected. Because these should be defined in the global window object.

Would be nice to have a flag for bots

Opera in iOS

Hi Anton,

for Opera in iOS, Sniffr.browser.name returns 'UNKNOWN', as navigator.userAgent does not contain /opera/.

Since for Opera in iOS we have to expect a UA-String like

something like

navigator.userAgent.match( /OPiOS/i )

will work.

Thank you!

How to get browser URL

I am working at electron js. I want to capture Browser URL

Improve accuracy of detection using User-Agent Client Hints API

Consider using Client Hints to improve the accuracy of detection

See the following article for details
https://developer.mozilla.org/en-US/docs/Web/API/User-Agent_Client_Hints_API