CODEWITHSUNDEEP
phpuser-agentdom4
Stefan
Stefan

Reputation: 337

Require minimum browser versions for a web application

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.

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.

Upvotes: 2

Views: 2006

Answers (3)

do or do not
do or do not

Reputation: 156

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).

Upvotes: 0

imjosh
imjosh

Reputation: 4872

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.

Upvotes: 1

Chris
Chris

Reputation: 136889

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.

Upvotes: 4

Related Questions