Talk In Code

As the new Google web browser was released last night (I’m writing this post using the new browser) I thought it would be good to update our readers on the user agent string that this web browser has.

The user agent of any browser can be found out by using the userAgent property of the navigator object. This is available in most modern browsers and is thankfully also present in Google Chrome.

navigator.userAgent

As an example the user agent for FireFox 3 on a Windows XP machine looks like this.

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1

Using the same code, and the same machine, the user agent produced by Google Chrome is as follows.

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13

So detecting it should only be a case of looking for the word “chrome”. Just like this:

var ischrome = navigator.userAgent.indexOf("Chrome")? true : false;

If you want to see what the user agent is on your machine then past this code into a web page and hit refresh. It is quite a basic bit of code and should work in most browsers.

<span id="useragent"></span>
<script type="text/javascript">
document.getElementById('useragent').innerHTML = navigator.userAgent;
</script>

If you are running FireFox then there is a handy little short cut you can use to view the source of a page you are looking at. If you add the text view-source on any web address then you will see the equivalent of viewing the source of a page (perhaps by pressing Ctrl+u). Although not entirely useful, it does have a couple of benefits, such as being able to view your code in another tab, rather than another window.

Unfortunately, this only works in FireFox up to the latest version (currently 3). I have tested this in IE 7, Opera and Safari and they all complain about invalid protocols. Apparently it used to work in IE 6 before SP2, but was removed with that patch. This leads me to believe that it is not really a protocol, but a command that the browser understands on a local level. Much in the same way as about:config works.

If you want to view the source of the page you are currently looking at quickly then add this bit of HTML and JavaScript into your page. It will just take the current URL, paste view-source in front of it and then redirect to that address.

<form><input type="button" value="View Source Code" onclick="javascript:location='view-source:'+location"></form>

Retrieving the current user agent using PHP is done via the use of the $_SESSION super global array. The following line of code will print off your user agent.

echo $_SERVER['HTTP_USER_AGENT'];

For Firefox on Windows this user agent will look like this.

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.8.1.12) Gecko/20080201 Firefox/2.0.0.12

This is all fine, but what about getting more meaningful information, like just the version number. Here is a function that will get the version number (major or minor) from anyone visiting a page with Internet Explorer.

function ieVersion($minor=false){
 preg_match('/MSIE ([0-9]\.[0-9])/',$_SERVER['HTTP_USER_AGENT'],$match);
 if(!isset($match[1])){
  return -1;
 }else{
  if($minor){
   return $match[1];
  }else{
   return floor($match[1]);
  }
 }
}

This will work for all of the different versions of Internet Explorer, but what about other browsers. One solution might be to create lots of functions that each checked the user agent string for a specific string. However, this is just overcomplicating things. Here is a function that will detect the user agent and version number and present it in a nice form.

function userAgent($minor=false){
 $agents = array('MSIE'=>'/MSIE ([0-9]\.[0-9])/',
  'Firefox'=>'/Firefox\/([0-9]*\.[0-9]*\.[0-9]*\.[0-9]*)/',
  'Opera'=>'/Opera\/([0-9]*\.[0-9])/',
  'Safari'=>'/Version\/([0-9]*\.[0-9]*\.?[0-9]*)/');
 foreach($agents as $agent=>$pattern){
  preg_match($pattern,$_SERVER['HTTP_USER_AGENT'],$match);
  if(isset($match[1])){
   if($minor){
    return $agent.' '.$match[1];
   }else{
    return $agent.' '.floor($match[1]);
   };
  };
 };
 return 'Unknown browser';
}

This only checks for four different browser types so if you want to add more then just append the name and pattern to match to the array. To run this function and find out the browser version of a visitor use the following code.

echo userAgent(true).'<br />';

From the user agent example given above this will output Firefox 2.0.0.12.

This is a very simplified mechanism of fetching user agents as it just gives a version number. To get a very clear idea about the capabilities of the browser you can use the get_browser() function. By passing a user agent string into the function it will return an array detailing everything that the browser is capable of, right down to whether cookies or JavaScript is enabled. The only problem is that a browser.ini file is needed to decode the user agent string, and this is not always available.

Detecting the user agent in JavaScript can be important due to the way in which different browsers implement JavaScript. Sometimes it is necessary to create logic to do one thing in Firefox and another thing in IE. Luckily, all modern browsers support the navigator.userAgent property so that is a good start.

Because it is possible to mask your user agent in Opera it is necessary to detect this browser first. There are actually two different ways to hide the user agent in Opera. The default user agent is as follows:

Opera/9.23 (Windows NT 5.1; U; en)

It is possible to identify Opera as either Firefox or Internet Explorer. In this case the version of Opera is appended to the end of the user agent string so it is still possible to detect if the user has Opera and act accordingly.

Identify as IE
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; en) Opera 9.23
Identify as Firefox
Mozilla/5.0 (Windows NT 5.1; U; en; rv:1.8.0) Gecko/20060728 Firefox/1.5.0 Opera 9.23

It is also possible to mask Opera as either Firefox or Internet Explorer. In this case the Opera browser is completely hidden and as far as JavaScript is concerned it can see Firefox or Internet Explorer.

Mask as IE
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; en)
Mask as Firefox
Mozilla/5.0 (Windows NT 5.1; U; en; rv:1.8.0) Gecko/20060728 Firefox/1.5.0

To detect the presence of non-masked Opera you can use the a boolean options called isOpera which is set by looking for any instance of the word Opera.
var isOpera = sUserAgent.indexOf("Opera") > -1;

To detect the presence of Opera with masking turned on you can use the window.opera object. If this is present then you can assume the user is running Opera.
if(window.opera){
  alert('opera!');
  isOpera = true;
}

Next, you must detect the presence of Internet Explorer. To do this you need to look for the words "compatible" and "MSIE", but still make sure that the isOpera variable is false.
var isIE = sUserAgent.indexOf("compatible") > -1
  && sUserAgent.indexOf("MSIE") > -1
  && !isOpera;

Detecting the presence of Safari is relatively straight forward. The Safari user agent string looks like this.
Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/xx.x (KHTML, like Gecko) Safari/yy.y
So a simple test to see if the string "Apple" or "Safari" is contained within the user agent is a sufficient enough test.

An alternate way of user agent detection is to see what objects are available to you. For example, anyone using Internet Explorer on a Windows system will have the object window.ActiveXObject available. If they are using any other browser then this object will be undefined. So to test for this use the typeof operator.

if(typeof window.ActiveXObject != "undefined"){
  // user is using IE
}

This is a more reliable way of detecting what browser is in use as it gets past Opera masking the user agent. It is better to just test for the correct objects when they are needed, rather than write different versions of code for different browsers.