Detect OS, browser and device in AngularJS

In this lesson we will see how we can gracefully detect the Operating System, browser and device used by our user to browse our website.

Detecting browser is usually a bad smell and means that you are getting your hands dirty, however there are genuine cases where this can’t be avoided.
Detecting OS can be sometimes very important for example, if you are providing a download package or a software to your users, you would want to point them to the appropriate version depending on the OS.

Usually detecting these entities involves a bit of dirty JavaScript work, matching regex etc. but here we will be using an AngularJS library known as “ng-device-detector”, which will reduce our work significantly. It will tell us the os version and the browser version as well.

DEMO DOWNLOAD

ngDeviceDetector

ngDeviceDetector is a library under the user name srfrnk, licensed as MIT. This library will help us detect the OS, browser and device in our AngularJS application with ease.

View on Github.

Installation

First thing you need to do is, grab the files required to detect our entities. There are a couple of ways to do so.

Run

$ bower install ng-device-detector

OR you can get them from the below links.

re-tree is a library that servers as regular expression engine. This library is required by ng-device-detector.

Include these two files into your app after angular.js.

<script type=”text/javascript” src=”bower_components/angular/angular.js”></script>
    <script type=”text/javascript” src=”bower_components/ng-device-detector/ng-device-detector.min.js”></script>
    <script type=”text/javascript” src=”bower_components/re-tree/re-tree.min.js”></script>
    <script type=”text/javascript” src=”app/app.js”></script>

app.js is our script file for the demo.

Next in your angular module inject ‘ng.deviceDetector‘ as a dependency to our app.

angular.module('myApp',["ng.deviceDetector"])

ng.deviceDetector provides us with ‘deviceDetector‘ service. Inject this into your controller. This service will contain all the data we would require to detect our entities.

Demo App

Lets have a look at the demo app.

app.js

angular.module('myApp',["ng.deviceDetector"])
.controller('myCtrl',['deviceDetector',function(deviceDetector){
var vm = this;
vm.data = deviceDetector;
vm.allData = JSON.stringify(vm.data, null, 2);
}])

index.html

<html>
<head>
<body ng-app="myApp">
<div ng-controller="myCtrl as vm">
<p>You are using <b>{{vm.data.browser}}</b> on <b>{{vm.data.os}} ({{vm.data.os_version}})</b>.</p>
<p>Your <b>{{vm.data.browser}}</b> version is <b>{{vm.data.browser_version}}</b></p>
<p>Device - <b></b>{{vm.data.device}}</p>
<p>Complete deviceDetector data - <b></b><pre>{{vm.allData}}<pre></p>
</div>
</body>
</head>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/ng-device-detector/ng-device-detector.min.js"></script>
<script type="text/javascript" src="bower_components/re-tree/re-tree.min.js"></script>
<script type="text/javascript" src="app/app.js"></script>
</html>

As you can see above in the code.

  • os — Gives us the operating system of the user.
  • browser — Gives us the browser of the user.
  • device — Gives us the device of the user.
  • os_version — Gives us the OS version.
  • browser_version — Gives us the browser version.

Below is the complete data provided by the deviceDetector service for your reference.

deviceDetector json object

{
"raw": {
"userAgent": "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.93 Safari/537.36",
"os": {
"windows": true,
"mac": false,
"ios": false,
"android": false,
"linux": false,
"unix": false,
"firefox-os": false,
"chrome-os": false,
"windows-phone": false,
"ps4": false,
"vita": false,
"unknown": false
},
"browser": {
"chrome": true,
"firefox": false,
"safari": true,
"opera": false,
"ie": false,
"ms-edge": false,
"ps4": false,
"vita": false,
"unknown": false
},
"device": {
"android": false,
"ipad": false,
"iphone": false,
"ipod": false,
"blackberry": false,
"firefox-os": false,
"chrome-book": false,
"windows-phone": false,
"ps4": false,
"vita": false,
"unknown": false
},
"os_version": {
"windows-3-11": false,
"windows-95": false,
"windows-me": false,
"windows-98": false,
"windows-ce": false,
"windows-2000": false,
"windows-xp": false,
"windows-server-2003": false,
"windows-vista": false,
"windows-7": false,
"windows-8-1": false,
"windows-8": false,
"windows-10": true,
"windows-phone-7-5": false,
"windows-phone-10": false,
"windows-nt-4-0": false,
"unknown": false
}
},
"os": "windows",
"browser": "chrome",
"device": "unknown",
"os_version": "windows-10",
"browser_version": "45.0.2454.93"
}

Conclusion

Detecting entities such as os, browser and device can turn out to be a pain, this post showed us how we can achieve it in our angular applications with ease.

Suggest

Upgrade your JavaScript to ES6

ES6 Javascript: The Complete Developer’s Guide

Angular 2 and NodeJS — The Practical Guide to MEAN Stack 2.0

Learn Angular 2 Development By Building 10 Apps

Angular 2 Crash Course with TypeScript

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.