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

Question

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.

Of potential interest: https://51degrees.com/device-detection . Disclosure I am not affiliated with 51 Degrees, we just utilise it in one of our projects. — Jon P, Feb 03 '17 at 02:31
php only has the string in the header, i dont know if JS has more access. — , Feb 03 '17 at 02:54

score 2 · Answer 1 · answered Feb 03 '17 at 04:24

2

user-agent can be modified or removed by proxy (or some sophisticated firewall-proxy combo).
javascript takes a load from your server.

so it's better to check on client side using javascript.

answered Feb 03 '17 at 04:24

rsm

2,530
4
26
33

score 1 · Accepted Answer · answered Feb 03 '17 at 03:32

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.

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

2 Answers2