I want to check client's browser version, and if it's too old, display a message that the user should update their browser in order to use the website. The website is built using ASP.NET MVC.
I have implemented 2 different solutions:
Solution 1 - Server side checking:
I have created an ActionFilter which checks if the browser is supported? If not it redirects to a static page: NotSupportedBrowser.aspx
public class BrowserSupportFilter : IActionFilter { public void OnActionExecuting(ActionExecutingContext filterContext) { string browserInfo; if (BrowserHelper.IsOutdatedBrowser(out browserInfo)) { filterContext.Result = new RedirectResult("/ErrorPages/NotSupportedBrowser.aspx?browserInfo=" + browserInfo); } } public void OnActionExecuted(ActionExecutedContext context) { } } And this is my BrowserHelper class which checks if the browser is supported:
public static class BrowserHelper { public static bool IsOutdatedBrowser(out string browserInfo) { bool isOutdated = false; var browser = HttpContext.Current.Request.Browser; if (!string.IsNullOrEmpty(browser.Browser) && float.TryParse(browser.Version, out float browserVersion)) { switch (browser.Browser) { case "Chrome": if (browserVersion < 57) { isOutdated = true; } break; case "Edge": if (browserVersion < 15) { isOutdated = true; } break; case "Safari": if (browserVersion < 12) { isOutdated = true; } break; case "Mobile Safari": if (browserVersion < 12) { isOutdated = true; } break; case "Firefox": if (browserVersion < 50) { isOutdated = true; } break; case "Opera": if (browserVersion < 50) { isOutdated = true; } break; case "Vivaldi": if (browserVersion < 1) { isOutdated = true; } break; case "Yandex": if (browserVersion < 17) { isOutdated = false; } break; case "InternetExplorer": isOutdated = true; break; default: isOutdated = false; break; } } browserInfo = $"{browser.Browser}{browser.Version}"; return isOutdated; } } Solution 2 - Client side checking
In the second solution, I check the browser in the client side and show a popup, letting the user know that their browse is not supported:
I have created _BrowserSupport.cshtml PartialView:
I got the code for testing the browser from this stackoverflow question.
<script> navigator.browserInfo = (function () { alert(navigator.userAgent); 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(' '); })(); //document.getElementById('printVer').innerHTML=navigator.browserInfo var str = navigator.browserInfo; var browser = str.substring(0, str.indexOf(" ")); var version = str.substring(str.indexOf(" ")); version = version.trim(); version = parseFloat(version); var isOutdated = false; switch (browser) { case "Chrome": if (version < 57) { isOutdated = true; } break; case "Edge": if (version < 16) { isOutdated = true; } break; case "Safari": if (version < 12) { isOutdated = true; } break; case "Mobile Safari": if (version < 11) { isOutdated = true; } break; case "Firefox": if (version < 62) { isOutdated = true; } break; case "Opera": if (version < 50) { isOutdated = true; } break; case "Vivaldi": if (version < 1) { isOutdated = true; } break; case "Yandex": if (version < 17) { isOutdated = false; } break; case "IE": isOutdated = true; break; } if (isOutdated) { alert("Your browser is not supported:" + browser + version); } </script> I include the above partial view in the head section of all of my page Layouts, e.g.
samplePageLayout:
<head> @Html.Partial("Common/_BrowserSupport") </head> Trade-offs
Both solutions works... I am not sure which one would be better.
The advantage of doing the check on the Server side is that my html document becomes smaller and there will be less data to download on every single request.
The advantage of doing the check on the client side is that I am using the client's processing power to do the check and therefore there is less task for the Server.
I am asking for recommendation to choose the better option.
if (version < 57) { isOutdated = true; } break;you could just doreturn version < 57;which is a lot less boilerplate code.\$\endgroup\$