Angular 2 How to show warning page if browser is unsupported
13,940
Solution 1
I think you should use clear JavaScript code:
var BrowserDetect = {
init: function () {
this.browser = this.searchString(this.dataBrowser) || "Other";
this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
},
searchString: function (data) {
for (var i = 0; i < data.length; i++) {
var dataString = data[i].string;
this.versionSearchString = data[i].subString;
if (dataString.indexOf(data[i].subString) !== -1) {
return data[i].identity;
}
}
},
searchVersion: function (dataString) {
var index = dataString.indexOf(this.versionSearchString);
if (index === -1) {
return;
}
var rv = dataString.indexOf("rv:");
if (this.versionSearchString === "Trident" && rv !== -1) {
return parseFloat(dataString.substring(rv + 3));
} else {
return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
}
},
dataBrowser: [
{string: navigator.userAgent, subString: "Edge", identity: "MS Edge"},
{string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
{string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
{string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
{string: navigator.userAgent, subString: "Opera", identity: "Opera"},
{string: navigator.userAgent, subString: "OPR", identity: "Opera"},
{string: navigator.userAgent, subString: "Chrome", identity: "Chrome"},
{string: navigator.userAgent, subString: "Safari", identity: "Safari"}
]
};
BrowserDetect.init();
document.write("You are using <b>" + BrowserDetect.browser + "</b> with version <b>" + BrowserDetect.version + "</b>");
More methods to detect more browsers you can find in this question: Correct way to use Modernizr to detect IE?
If you want support IE 11/10/9 in your Angular app - add polyfills. For older IE version detection use code below:
function detectIE() {
var ua = window.navigator.userAgent;
var msie = ua.indexOf('MSIE ');
if (msie > 0) {
// IE 10 or older => return version number
return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
}
var trident = ua.indexOf('Trident/');
if (trident > 0) {
// IE 11 => return version number
var rv = ua.indexOf('rv:');
return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
}
var edge = ua.indexOf('Edge/');
if (edge > 0) {
// Edge (IE 12+) => return version number
return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
}
// other browser
return false;
}
or
<!--[if lt IE 9]>
Place Content here for Users of Internet Explorer 9 or lower.
<![endif]-->
in HTML code.
Solution 2
if you don't need know which browser or version, exists other way.
In index.html, check the content of app-root tag.
...
<script>
function checkSupport() {
var appRoot = document.getElementsByTagName('app-root')[0];
if (appRoot && appRoot.innerHTML === '') {
appRoot.innerHTML = '<h1>Old Browser Man!</h1> <p>Please, be smart and update it!</p>';
}
}
</script>
<body class="mat-typography theme" onload="checkSupport()">
<app-root></app-root>
</body>
...
Related videos on Youtube
Author by
pavel
Updated on September 15, 2022Comments
-
pavel over 1 year
I have a problem with demonstrating warning page, if Angular 2 app doesn't support browser. I have tried to use routing system, but actually it didn't help. Here is my index page. How can I redirect(show to user) warning page if browser is unsupported? Maybe I need add some extra script to body, but what about
<app>
tag?<!DOCTYPE html> <html> <head> <base href="/"> </head> <body> <app>Loading...</app> </body> </html>
-
pavel over 6 yearsOk, if I'll write clean javascript code, what should i do with <app> tag. Can I just remove it from the DOM? If i can, when it should be done? I think you have already mention, I am a newbie in Angular.
-
Krzysztof Raciniewski over 6 yearsYes, you can remove <app> tag(but then you should load this script before AngularJS code) or redirect user to static page with not-supported message, example: yourdomain/browser-not-supported.html (this is preffered way)
-
Endrju about 4 yearsWhoa, that's a wholalot of code for simple
if (/MSIE |Trident\/|Edge\//.test(window.navigator.userAgent)) { window.location.replace("unsupported.html"); }