/browser-detect

Simplify detecting your browser.

Primary LanguageJavaScriptMIT LicenseMIT

browser-detect

Simplify detecting your browser.

npm version Bower version License: MIT ghit.me Join the chat at https://gitter.im/KennethanCeyer/PIGNOSE GitHub stars


This library helps you detect user's browser and version.
And this project is focusing to support client and server(Node).

Getting Started

Installation

* NPM

$ npm install browser-detect --save

* Bower

$ bower install browser-catch --save

* Yarn

$ yarn add browser-detect

* Download zip

Download zip file from this link


How to use

Client (browser)

Add following code in your head tag.

<script src="node_modules/browser-detect/dist/browser-detect.min.js"></script>

And follow this code to detect browser.

var result = browser();
console.log(result);
> { name: 'chrome', version: '58.0.3029', versionNumber: 58.03029, mobile: false, os: 'Windows NT 10.0' } # Chrome v58.0.3029

Server (node)

Just simple :trollface:

var browser = require('browser-detect');
var result = browser();
console.log(result);
> { name: 'node', version: '7.9.0', versionNumber: 7.9, mobile: false, os: 'win32' } # Node v7.9

Server (node with express)

Using req.headers like following code.

var router = express.Router();
var browser = require('browser-detect');

router.get('/', function (req, res, next) {
    var result = browser(req.headers['user-agent']);
    console.log(result);
});

return router;
> { name: 'ie', version: '9.0', versionNumber: 9, mobile: false, os: 'Windows NT 10.0' } # IE 9

Or set a middleware and send to res.locals.

// browserDetectMiddleware.js
var browser = require('browser-detect');

var MiddleWare = function() {
    return function (req, res, next) {
        res.locals.browser = browser(req.headers['user-agent']);
        next();
    };
};

module.exports = MiddleWare;
// app.js

const express = require('express');
const browserDetectMiddleware = require('./browserDetectMiddleware');

let app = express();
app.use(browserDetectMiddleware())

View will can access browser variable.

<!-- view.ejs -->

<%=JSON.stringify(browser)%>
> { name: 'firefox', version: '53.0.0', versionNumber: 53, mobile: false, os: 'Windows NT 10.0' } // Firefox v 53.0.0

Values

  • name

    Name of browser such as ie, chrome, firefox.

  • version

    Version of browser with comma (string).

  • versionNumber

    Version of browser of which format is only number.

  • mobile

    If browser is based mobile device it will be true, and if is not false.

  • os

    User OS type such as Windows NT 10.0.


Try with an example

Client

  • Open examples/client.html by your browser.

Server

  • Open command or terminal.
  • Move directory to browser-detect path that you download.
  • Type following code.
$ node ./examples/server.js

Features

  • Detect browser both compatible client and server.
  • Support AMD and CommonJS module feature.

Completed

  • Support typings.
  • Support guideline and documentations for contributors.
  • Support browser compatity to IE7.
  • Support to detect mobile and OS.

Plan for near near, very near future.

  • Support Webpack2.x. (Including build process with reactjs or angular4.x)
  • Support TDD. (Mocha)
  • Support CI. (TravisCI)
  • Suport CDN. (JSDelivr)

Compatibility

Test completed

  • IE 7+
  • Chrome (Windows, MacOS)
  • Edge
  • Firefox
  • Safari (Windows, MacOS)
  • Opera
  • Android
  • Chromium Browsers (Will be named chrome)

Expected

  • IOS
  • Window phone (Edge)
  • IE 6

Contribution

Setting environment for contribute

  1. Install project from GitHub.
$ git clone https://github.com/KennethanCeyer/browser-detect.git
  1. Install all modules from NPM.
$ cd browser-detect
$ npm install
  1. Install gulp.
$ npm install gulp -g
  1. Build sources
$ gulp