WURFL

Introduction

Providing a website which works on both desktop computers and mobile devices

One common problem in web development is to ensure that your site is usable on both desktop computers and mobile devices, such as mobile phones. A related issue is that, even if you are aiming only at phones, you will probably want to make your site viewable across a wide range of different models running different operating systems, such as Android, iPhone OS and Symbian. There are a number of reasons why this might require extra effort.

The screen size is much smaller on a typical mobile device, and a different orientation (portrait rather than landscape) compared to a desktop machine. Furthermore, different mobile devices have different screen resolutions, e.g. a tablet such as an iPad is much bigger than a typical smartphone, and a basic (non smart) phone will have a smaller screen than a smartphone.
Different mobile devices run different browsers, or different versions of the same browser. Phone browsers include the Nokia browser, the Android Browser, Safari on the iPhone, Opera Mobile and (shortly to be released) Firefox 4. Each browser supports HTML, CSS and JavaScript to a different extent. Some of the more advanced features, such as AJAX or the Canvas tag, are only available on up-to-date phone browsers. Some older phones do not even support full XHTML, but instead, support a subset known as XHTML-MP; and some very old phones may not even support commonly-used image formats such as JPEG or PNG.

What can we do about this?

Clearly, it is quite a challenge to develop websites which are compatible amongst a range of different mobile devices
How then do we solve this problem?

User-agent detection

Each browser sends a so-called user agent string which is a unique description identifying the browser, version and operating system. For example for this browser it is

CCBot/1.0 (+http://www.commoncrawl.org/bot.html)

We can obtain the user agent string quite easily in PHP:

<?php
$a = $_SERVER['HTTP_USER_AGENT'];
echo "The user agent is " .$a; 
?>

Then, we can generate different code for the website depending on the user agent string.

There is a remaining problem with this approach, however: there are many different mobile devices and browsers and clearly it would be a big job to try and test for all. This is where the WURFL comes in.

The WURFL: A repository of device capabilities

The WURFL (see here) is "an XML configuration file which contains information about capabilities and features of several wireless devices" (wurfl.sourceforge.net). In other words, the WURFL is an XML file which maps individual mobile devices to their capabilities (e.g. do they support XHTML?). You can write a web application which queries this XML file to look up the capabilities of a given mobile device.

WURFL can be used from a range of languages such as PHP and Java (see the WURFL site). From PHP the following procedure is performed:

The user agent is obtained using $_SERVER['HTTP_USER_AGENT'] (see above)
The WURFL is loaded into memory and can be accessed from PHP. Reading the WURFL XML is slow, so, the first time it's used, the WURFL is cached in a form which is much faster to load, so that it can be loaded almost instantly next time.
A device object is created within PHP, and the user agent is passed to into it. We can then use the device object to find out the capabilities of our client device

Example of using the WURFL from PHP

See here for a full example. Here is an explanation of each line of code:

```
define('WURFL_DIR','/var/www/wurfl-php-1.2.1');
```
In this line, we define our WURFL installation directory.
```
require_once(WURFL_DIR."/WURFL/Application.php");
```
The first line of a WURFL-using PHP script needs to link in the PHP WURFL library. The path to the PHP WURFL library is as shown above.
```
$config = WURFL_DIR."/examples/resources/wurfl-config.xml";
```
This line reads in a configuration file for the WURFL. This controls things such as how the WURFL is cached for fast access (e.g. whether to use a file cache or a database cache).
```
$factory=new WURFL_WURFLManagerFactory
	(new WURFL_Configuration_XmlConfig($config));
$mgr=$factory->create(true);
```
These lines create the WURFL manager - a PHP variable that provides a handle on the whole WURFL system. This code will be common to all WURFL applications.
We then obtain a PHP variable representing the device - the actual phone/browser combination we're using - from the manager, using the user agent, as follows:
```
$device = $mgr->getDeviceForUserAgent($_SERVER["HTTP_USER_AGENT"]);
```

We can then query the device to find out what it's capabilities are. For example the following will display the device's brand name, and determine whether it supports JPEG files:

echo "Device brand name " . $device->getCapability("brand_name");
echo "<br />";
echo "Device model name " . $device->getCapability("model_name");
echo "<br />";
if ($device->getCapability("jpg") == "true")
{
    echo "This device supports JPEG images.";
}
else
{
    echo "This device does not support JPEG images.";
}
?>

If we ran this on a Nokia N95 we would get:

Device brand name Nokia
Device model name N95
This device supports JPEG images.

Note that we have to test for the string values "true" and "false", not the boolean values true and false.

More on Capabilities

The most important concept in the WURFL is the capability. A capability is a particular feature that the mobile device may or may not support, and we can query any capability. The way in which we reference a capability is shown above.

Full documentation of all capabilities is available here. There are a number of capability categories, which are described in detail on the WURFL site; they include such things as:

Various XHTML capabilities;
CSS capabilities;
JavaScript/AJAX capabilities;
Support for Java ME

Most capabilities give either a true or a false value, but a few return text. For example the mobile_browser capability returns a string (i.e. text) representing the browser being used on the mobile device.

Some specific examples:

wav true if the device supports the .wav sound format
preferred_markup preferred markup language (e.g. XHTML or XHTML-MP) for this device - if more than one is offered, the newer (e.g. XHTML rather than XHTML-MP) will be returned
ajax_support_javascript - does the device support JavaScript?
ajax_support_inner_html - is the innerHTML feature of JavaScript supported? i.e. can you use innerHTML to stick content into a <div> ?