Browser Detection

Hi all,

This is my first blog. :)

This post is about Browser detection. Browser name and version can (not) be easily detected either at client side or server side.

Browser can be identified by many ways. Here, I am trying to identify a browser and its version using User Agent string. User Agent information can be obtained at client side using navigator object and at server side this is available in request header.

How to get User Agent string
Client side - navigator.userAgent (Java Script)
Server side – request.getHeader("user-agent") (This is jsp request object)

This user agent string, if accessed in Mac Mozilla Firefox browser, will give you something like this

Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US; rv:1.9.2.12) Gecko/20101026 Firefox/3.6.12

and Mac Safari Browser gives you something like this

Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; en-us) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1

( :O let me check my calender .. is it 1st April today?... Y is it giving Mozilla for both the browser )

This user-agent string looks very confusing at first sight, but once you start deciphering it and comparing the user agent strings of different browser and version you can easily formulate a method to decode the user agent string to get your information.

Here is my finding to help you start with

User agent string of all IE browser has sub-string of this pattern 'MSIE VV.VV' e.g MSIE 7.0 for IE 7 and MSIE 8.0 for IE 8.0, hence presence of pattern MSIE (\d+\.\d+) confirms us the browser is IE and version number can be extracted from string.

Firefox browser has sub-string of pattern 'Firefox/VV.VV.VV' or 'Firefox VV.VV.VV'

Opera browser has sub-string of pattern 'Opera/VV.VV.VV' or ' Opera VV.VV.VV'

These were simple, but if you have to differentiate between Chrome and Safari you will have to dig little deep, so get ready with your shovel :P

Chrome User-agent string looks like this-

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/534.30 (KHTML, like Gecko) Chrome/12.0.742.122 Safari/534.30

( :O U must be joking Aman.. it is both Safari and Chrome)

Safari User-agent string -

Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; en-us) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1

All Chrome and Safari browser user-agent string contains 'WebKit' string, this information will help you to narrow down your browser list.
One more thing to notice is that User-agent string of both the browser contains 'Safari' string in it. ( :D Confusing is not it ) So if a user-agent string contains both the 'WebKit' and 'Chrome' string it is Chrome browser and if it contains 'WebKit', 'Safari' but not 'Chrome' it is Safari browser.
Another important point to note is that Chrome browser version number is given just after 'Chrome/' in user-agent where as Safari browser version number is given right after 'Version/' string.

Here is JavaScript code for your reference


function getBrowserDetails(userAgent)
{
          if (/MSIE (\d+\.\d+);/.test(userAgent))
         {
                    return 'IE '+ RegExp.$1;
         }
        else if (/Firefox[\/\s](\d+\.\d+)/.test(userAgent))
        {
                  return 'FIREFOX '+ RegExp.$1;
        }
       else if (/Opera[\/\s](\d+\.\d+)/.test(userAgent))
       {
                 return 'OPERA '+ RegExp.$1;
        }
       else if(/webkit/.test(userAgent.toLowerCase()))
        {
                if (/Chrome[\/](\d+\.\d+)/.test(userAgent))      
                        return 'CHROME '+ RegExp.$1;
                else if(/Safari[\/](\d+\.\d+)/.test(userAgent))
                {
                              if(/Version[\/](\d+\.\d+)/.test(userAgent))
                                    return 'SAFARI '+ RegExp.$1;
                 }


         }
}