javascriptphpuser-agentwurfl

Best practice for browser details detection - Should I do it in client side (Using JavaScript) or server side (Using PHP and WURFL)


So far, I am doing browser details detection, at client side by using JavaScript.

data['browserDetails'] = {
    'browser'       : getBrowser(),
    'majorVersion'  : getBrowserMajorVersion(),
    'appCodeName'   : navigator.appCodeName,
    'appName'       : navigator.appName,
    'appVersion'    : navigator.appVersion,
    'language'      : navigator.language,
    'platform'      : navigator.platform,
    'cookieEnabled' : navigator.cookieEnabled,
};

// http://stackoverflow.com/a/9851769
function getBrowser()
{
    var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
    if (isOpera) {
        return 'Opera';
    }

    var isFirefox = typeof InstallTrigger !== 'undefined';
    if (isFirefox) {
        return 'Firefox';
    }

    var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0 || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);
    if (isSafari) {
        return 'Safari';
    }

    var isIE = /*@cc_on!@*/false || !!document.documentMode;
    if (isIE) {
        return 'IE';
    }

    var isEdge = !isIE && !!window.StyleMedia;
    if (isEdge) {
        return 'Edge';
    }

    var isChrome = !!window.chrome && !!window.chrome.webstore;
    if (isChrome) {
        return 'Chrome';
    }

    return 'Unknown';
}

// http://stackoverflow.com/a/38080051
function getBrowserMajorVersion()
{
    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 (tem[1] || '');
    }

    if (M[1]=== 'Chrome') {
        tem= ua.match(/\b(OPR|Edge)\/(\d+)/);
        if (tem!= null) return tem[2];
    }

    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[1];
}

I had once try to perform browser details detection with server side code, by using PHP + WURFL. With my very limited test cases, it doesn't show server side detection is any better (accuracy) than client side detection.

I was wondering, what is the best practice for browser details detection? As far as accuracy is concerned, should I do it in client side (Using JavaScript) or server side (Using PHP and WURFL)?

Thanks.


Solution

  • I traditionally detect browsers on the server side.

    My reasons for detecting browsers to change what html I render before the application loads. This is why server side detection worked best for my use cases.

    I use this php function that I picked up a long time ago

    <?php
    /* USER-AGENTS  This is my custom function to add contact logic...
    ================================================== */
    function check_user_agent ( $type = NULL ) {
        $user_agent = strtolower ( $_SERVER['HTTP_USER_AGENT'] );
        if ( $type == 'bot' ) {
                // matches popular bots
                if ( preg_match (     "/googlebot|adsbot|yahooseeker|yahoobot|msnbot|watchmouse|pingdom\.com|feedfetcher-google/", $user_agent ) ) {
                        return true;
                        // watchmouse|pingdom\.com are "uptime services"
                }
        } else if ( $type == 'browser' ) {
                // matches core browser types
                if ( preg_match ( "/mozilla\/|opera\//", $user_agent ) ) {
                        return true;
                }
        } else if ( $type == 'mobile' ) {
                // matches popular mobile devices that have small screens and/or touch inputs
                // mobile devices have regional trends; some of these will have varying popularity in Europe, Asia, and America
                // detailed demographics are unknown, and South America, the Pacific Islands, and Africa trends might not be represented, here
                if ( preg_match ( "/phone|iphone|itouch|ipod|symbian|android|htc_|htc-|palmos|blackberry|opera mini|iemobile|windows ce|nokia|fennec|hiptop|kindle|mot |mot-|webos\/|samsung|sonyericsson|^sie-|nintendo/", $user_agent ) ) {
                        // these are the most common
                        return true;
                } else if ( preg_match ( "/mobile|pda;|avantgo|eudoraweb|minimo|netfront|brew|teleca|lg;|lge |wap;| wap /", $user_agent ) ) {
                        // these are less common, and might not be worth checking
                        return true;
                }
        }
        return false;
    } ?>
    

    Then I create a call to the function similar to this

    <?php $mobilehtml="<a href=''></a>";
    
    $ismobile = check_user_agent('mobile');
    if($ismobile) {
        echo "$mobilehtml";
    } 
    else {
    
        echo "$browserhtml";
    }
    ?>
    

    I hope this helps.