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