Require minimum browser versions for a web application

Question

I have a web application in PHP which in the frontend requires some more modern browser features like the MutationObserver. As stated on the site only very new browsers support this feature. The same holds for some HTML5-features I need to rely on.

What I would like to achieve now, is to check server-side with the UserAgent-String which browser the user is running, and if it is below a specific version, redirect him to an info-page where he is informed that he should use a newer browser.

I've been trying now for a while to setup appropriate Regex-Expressions to check the UA-strings against. However, I'm stuck a little bit as the browser manufacturers don't always keep a clean schema - e.g. let's say for an Opera-Browser I would require a minimum version of 12.

• Opera 12.14 example 1: Opera/9.80 (Windows NT 6.0) Presto/2.12.388 Version/12.14
• Opera 12.14 example 2: Mozilla/5.0 (Windows NT 6.0; rv:2.0) Gecko/20100101 Firefox/4.0 Opera 12.14
  This could also be Firefox 4.0.
• Opera 11.51: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; de) Opera 11.51
  This could also be Internet Explorer 9.0.

Also tracking for the same browser and version is tricky as shown in the two examples for Opera 12.14: either it is "Version/12.14" or "Opera 12.14" or some other pretty "random" string. For other browsers the problem is quite similar.

So the question is: how would you proceed?

Method 1:
useragentstring.com has an API that I could query each time a user accesses the welcome page and/or logs in. I'm not sure whether this is a good idea in matters of security and app performance.

Method 2:
PHP's get_browser() function in conjunction with browscap.ini. This method can't distinguish between desktop and mobile browsers.

Method 3:
An alternative to Method 2 could be phpbrowscap where you can define your own browsercap.ini without depending on a browscap.ini somewhere on the server where you don't have access to.

Or any other method?

I'd be happy for some comments.

Answer 1

Rather than keeping your own database of user agents and features, which can be hard to get right, and a pain to keep updated, many developers these days use JavaScript to query whether a feature is available in the browser.

The Modernizr JavaScript library makes this relatively straightforward. This article goes into more depth about why this approach is a good idea, and shows a few alternative methods of doing feature detection if you don't want to rely on a library.

Answer 2

Why do you want to do everything on the server? Use javascript browser or object detection and use javascript to display a message to the user.

Answer 3

I've used this little ditty in the past (excerpted) :

var browsers = [{
        browser : "Opera",
        css     : "o",
        engine  : "Presto",
        rex     : {
                    eng : /(?:Gecko|Presto)\/([0-9.]*)/,
                    brw : /.+(?:Opera|Version).([0-9\.]+)/
          },
        ever    : 0,
        bver    : 0
   },{}]

var UA = function(p_ua) {

    var curr, i;

    for (i in browsers) {
        var r = new RegExp(browsers[i].browser);

        if (p_ua.match(r) && (!!browsers[i].rex)) {
            curr = browsers[i];
            curr.ever = curr.rex.eng.exec(p_ua)[1] || curr.rex.eng.exec(p_ua)[0];
            curr.bver = curr.rex.brw.exec(p_ua)[1] || curr.rex.brw.exec(p_ua)[0];

            break;
        }
    }

    return curr;
}

(See jsfiddle). It's not complete, but it was sufficient for my needs at the time. Outside of something like that, capability detection on the client side is definitely the way to go - whether it's css, html OR javascript (ie http://www.sitepoint.com/detect-css3-property-browser-support/, 1/3 of the way down). I love using regular expressions - but the browser vendors can't be depended on to keep the UA string the same from version to version (let alone follow an actual standard! see : useragentstring.com/pages/useragentstring.php).