Browser detection using Angular

Question

I have a requirement in my project to show outdated browser message when user uses old browser.

I am using angular 1.5.5. I tried with angular-bowser module which works on angular supported browser, but the problem comes with old versions like IE8, which doesn't support my angular version . So angular-bowser module doesn't work .

Can somebody let me know about any other ways or some library or anything in that matter that can help?

Have you tried using native javascript to check browser version ? — Erick Boshoff, Aug 05 '16 at 13:13
modernizr _may_ help, although I don't know of any specific implementation to help with Angular compatibility. Generally speaking, the better practice is to do feature detection with a browser. — IronAces, Aug 05 '16 at 13:19
Possible duplicate of [Browser detection in JavaScript?](http://stackoverflow.com/questions/2400935/browser-detection-in-javascript) — developer033, Aug 05 '16 at 13:46

score 4 · Answer 1 · answered Aug 05 '16 at 13:21

because angularjs doesn't just depend on angular modules you can use native javascript like so to detect the browser version:

JAVASCRIPT:

navigator.sayswho= (function(){
    var ua= navigator.userAgent, tem, 
    M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
    if(/trident/i.test(M[1])){
        tem=  /\brv[ :]+(\d+)/g.exec(ua) || [];
        return 'IE '+(tem[1] || '');
    }
    if(M[1]=== 'Chrome'){
        tem= ua.match(/\b(OPR|Edge)\/(\d+)/);
        if(tem!= null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
    }
    M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
    if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]);
    return M.join(' ');
})();

//Invoke 
navigator.sayswho;

You can use this function to determine current browser and version in your angular app and do your message dialog accordingly. Something like

JAVASCRIPT

var version = navigator.sayswho;

if (version <= 8) {
    alert("Browser outdated! Please update browser!");
    return false; //don't forget.
}

Box · Answer 2 · 2018-09-27T12:02:07.427

1

let isMobile = /Android|iPhone/i.test(window.navigator.userAgent)

edited Sep 27 '18 at 12:02

answered Sep 26 '18 at 10:01

Box

11
4

score 0 · Answer 3 · answered Aug 05 '16 at 13:18

0

I suggest looking at Bowser; it's sole purpose is browser detection. Check out the details here

answered Aug 05 '16 at 13:18

Cam

1
3

Syam Pillai · Answer 4 · 2016-08-05T13:31:32.153

You can use this

$scope.isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
$scope.isFirefox = typeof InstallTrigger !== 'undefined'; // Firefox 1.0+
$scope.isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
// At least Safari 3+: "[object HTMLElementConstructor]"
$scope.isChrome = !!window.chrome && !$scope.isOpera; // Chrome 1+
$scope.isIE = /*@cc_on!@*/ false || !!document.documentMode; // At least IE6


function getDevice() {
  var userAgent = navigator.userAgent || navigator.vendor || window.opera;
  if (userAgent.match(/iPhone/i) || userAgent.match(/Android/i)) {
     // you can write code here for mobile
  }
}

function hasGetUserMedia() {
  return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
}

if (!hasGetUserMedia()) {
  alert('Your browser is not supported. Please switch to Google Chrome or Mozilla Firefox.');
}

Only the value of current browser will be true

Browser detection using Angular

4 Answers4

Linked