Simpele query engine voor mobiele apparaten

In de tijd voordat Responsive Design was ontdekt als antwoord op het cross-device internet, was mobiele ontwikkeling veel meer dan nu gericht op de vraag: 'Welk apparaat gebruikt de bezoeker en wat kan dat apparaat?". Het uitgangspunt was dat de server voor elk apparaat een andere variant van de website serveerde.

Daarom schreef ik in 2010 een  lichtgewicht query engine voor gebruik met de Tera-Wurfl database. Hiermee was het mogelijk om -aan de hand van de User-Agent string van het mobiele apparaat- snel de benodigde apparaateigenschappen op te vragen, zoals bijvoorbeeld schermresolutie, de vraag of Flash werd ondersteund, enzovoort. Op die manier was het mogelijk om in plaats van een headerafbeelding van 980 pixels breed op te halen en deze -na een lange laadtijd-  in de mobiele browser te verschalen, een headerafbeelding op te halen die op de server verschaald was tot de schermbreedte van het apparaat.

Tera-Wurfl

Tera-Wurfl (ScientiaMobile) is een database-implementatie van de Wireless Universal Resource File (WURFL). WURFL noemt zichzelf Device Description Repository (DDR), oftewel:

a software component that maps HTTP Request headers to the profile of the HTTP client (Desktop, Mobile Device, Tablet, etc.) that issued the request.  

Voordeel van het gebruik van Tera-Wurfl (die mySQL gebruikt als database) tegenover het rechtstreeks bevragen van WURFL is vooral de snelheid waarmee Tera-Wurfl z'n werk doet.

Tera-Wurfl is eenvoudig te gebruiken:

<?php
require_once('TeraWurfl.php');
$wurflObj = new TeraWurfl();
$wurflObj->GetDeviceCapabilitiesFromAgent([user-agent string], false);
$cap = $wurflObj->capabilities;
?>

Mijn query engine maakt het mogelijk om via een REST request selectief apparaateigenschappen op te vragen, om zo device-detectie te kunnen doen met een minimale druk op de verwerkingstijd van de opgevraagde pagina's.

Een query

Een query aan de database ziet er ongeveer zo uit:

<?php
$device = unserialize(join(file("http://webserver.com/?ua=" 
. urlencode($_SERVER['HTTP_USER_AGENT'])
. "&q=product_info:brand_name,model_name;display:resolution_width;")));
?>

waarbij $ua de gewenste User-Agent is. De query engine geeft het resultaat terug als serialized array zodat nu bijvoorbeeld de schermbreedte wordt gevonden met:

$device['display']['resolution_width'];

ua en q zijn beide optioneel; als de User-Agent string ontbreekt gebruikt de query engine die van de aanvrager en als q ontbreekt dan geeft het script een standaard set eigenschappen terug.

Om snel van een browser deze set standaardeigenschappen te kunnen bekijken, hebben we op http://t.snixz.nl een kleine proxy geschreven die deze in een overzichtje toont.

JSON

Om de proxy flexibeler te maken en bijvoorbeeld vanuit een script aan te kunnen roepen, kan de resultatenset als JSON-object worden verkregen door de GET parameter json de waarde 1 mee te geven.

http://t.snixz.nl?json=1

Waarna elk van de 'standaardeigenschappen kunnen worden verkregen door:

// $eigenschap = $device->groep->eigenschap'
// Bijvoorbeeld:
$device = json_decode(join(file('http://t.snixz.nl?json=1' . urlencode($_SERVER['HTTP_USER_AGENT']))));
$res_width = $device->display->resolution_width;

Device detectie is met de komst van Responsive Design, brede ondersteuning door smartphones van HTML5 en CSS3 en snellere en goedkopere mobiele netwerken veel minder aan de orde dan enkele jaren geleden. Daarbij komt dat het een techniek is die met voorzichtigheid gebruikt moet worden. In mijn praktijk speelt het inmiddels een veel minder grote rol dan voorheen maar verdwenen is het niet en zal het voorlopig ook niet zijn.