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.