CODEWITHSUNDEEP
angulartypescriptbrowserangular6browser-detection
J Hogan
J Hogan

Reputation: 115

Angular 6 browser detection?

I have an angular6 app that we are only supporting with chrome, but I would like a page/message to appear of the user attempts to navigate to the app in IE saying that it is not supported, either paste this link into chrome or download chrome.

Would I need a polyfill to enable the app to run on IE to show this message or is there some sort of browser detection I can use that only shows this pop up?

I know you can do browser detection in TS, which I have, but this means I need an IE polyfill so the app will load to even show the page. 

// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';

// Safari 3.0+ "[object HTMLElementConstructor]" 
var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);

// Internet Explorer 6-11
var isIE = /*@cc_on!@*/false || !!document.documentMode;

// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;

// Chrome 1+
var isChrome = !!window.chrome && !!window.chrome.webstore;

// Blink engine detection
var isBlink = (isChrome || isOpera) && !!window.CSS;

var output = 'Detecting browsers by ducktyping:<hr>';
output += 'isFirefox: ' + isFirefox + '<br>';
output += 'isChrome: ' + isChrome + '<br>';
output += 'isSafari: ' + isSafari + '<br>';
output += 'isOpera: ' + isOpera + '<br>';
output += 'isIE: ' + isIE + '<br>';
output += 'isEdge: ' + isEdge + '<br>';
output += 'isBlink: ' + isBlink + '<br>';
document.body.innerHTML = output;

Thoughts? Thanks!

Upvotes: 6

Views: 11912

Answers (3)

codeandcloud
codeandcloud

Reputation: 55210

window.navigator.userAgent holds the user-agent as a string. To detect a browser one needs to parse the userAgent

To detect Microsoft Internet Explorer and Microsoft Edge we use the condition

window.navigator.userAgent.toLowerCase().indexOf('trident') > -1 || 
window.navigator.userAgent.toLowerCase().indexOf('edge') > -1

But its always better not to re-invent the wheel. Instead, use a package like bowser npm install bowser

Now import and get the details

import * as Bowser from "bowser";
// ......
userAgent = Bowser.parse(window.navigator.userAgent);
browser = Bowser.getParser(window.navigator.userAgent);

Example: https://stackblitz.com/edit/angular-bowser

P.S: Also note that navigator.userAgent.toLowerCase().indexOf('edge') > -1 fails for Microsoft Edge Beta(current version=79.0.309.43) as the userAgent is

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.74 Safari/537.36 Edg/79.0.309.43

Upvotes: 1

Adrita Sharma
Adrita Sharma

Reputation: 22213

You can also add this in index.html:

  <script>
    var browserName = getBrowserName();
    if (browserName == 'ie') {
       alert("IE is not supported")
    }

    function getBrowserName() {
      const agent = window.navigator.userAgent.toLowerCase()
      switch (true) {
        case agent.indexOf('edge') > -1:
          return 'edge';
        case agent.indexOf('opr') > -1 && !!(window).opr:
          return 'opera';
        case agent.indexOf('chrome') > -1 && !!(window).chrome:
          return 'chrome';
        case agent.indexOf('trident') > -1:
          return 'ie';
        case agent.indexOf('firefox') > -1:
          return 'firefox';
        case agent.indexOf('safari') > -1:
          return 'safari';
        default:
          return 'other';
      }
    }
  </script>

Upvotes: 0

Ken Whipday
Ken Whipday

Reputation: 71

In ngOninit in app.component.ts, use an if else block. In the example below, the user is taken back to the previous (non Angular) page after they close the alert, hence the rest of angular doesn't load. 

if (isIE) {
    alert('Message for users about not using IE');
    window.history.go(-1);
} else {
    // the rest of ngOnInit
}

Upvotes: 1

Related Questions