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.
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.
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.
angular.module('myApp',["ng.deviceDetector"])
.controller('myCtrl',['deviceDetector',function(deviceDetector){
var vm = this;
vm.data = deviceDetector;
vm.allData = JSON.stringify(vm.data, null, 2);
}])
You are using {{vm.data.browser}} on {{vm.data.os}} ({{vm.data.os_version}}).
Your {{vm.data.browser}} version is {{vm.data.browser_version}}
Device – {{vm.data.device}}
Complete deviceDetector data –
{{vm.allData}}
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.
{
"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.
