Dedizierte mobile Websites: User-Agent-Analyse und alternative Verfahren

Bei separaten mobilen Websites werden, abhängig vom aufrufenden Gerät, unterschiedliche HTML-Dokumente mit jeweils zugehörigen Ressourcen ausgeliefert. Wird eine solche Website mittels Smartphones aufgerufen, werden die speziell für mobile Endgeräte hinterlegten HTML-Dokumente ausgeliefert – wird dieselbe Seite hingegen mittels eines klassischen Desktop-PCs aufgerufen, werden die HTML-Dokumente angezeigt, die für eben jene Ansicht optimiert wurden. Diese Vorgehensweise erfordert, dass die besuchte Seite vor Auslieferung des Inhalts feststellt, ob der jeweilige Besucher mit einem mobilen Endgerät zugreift oder nicht. Hierzu hat sich die Auswertung des sog. User-Agents etabliert, auf deren technische Umsetzung im Folgenden eingegangen wird. Auch weitere Verfahren werden kurz vorgestellt, sind in der Praxis aber kaum verbreitet (vgl. Maurice 2012a, S. 331).

Browserweiche durch Analyse des User-Agents

Ruft ein Nutzer mittels seines Browsers eine Webseite auf, sendet dieser hierzu einen HTTP Request an den Webserver. Dieser enthält neben dem Hostname und der Request URI u.a. auch den User-Agent. Der User-Agent wiederum enthält Informationen zum verwendeten Webbrowser –meist den Browsernamen und dessen Versionsnummer- sowie zum Betriebssystem. Ein vereinfachter Request-Header zum Abruf der Startseite von www.dhbw-mannheim.de könnte beispielsweise folgendermaßen aussehen:

GET / HTTP/1.1 Host: www.dhbw-mannheim.de User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:28.0) Gecko/2010101 Firefox/28.0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: de,en-US;q=0.7,en;q=0.3 Accept-Encoding: gzip, deflate

An der User-Agent Zeile lässt sich nun ablesen, dass es sich beim aufrufenden Browser um den Mozilla Firefox Version 28.0 handelt. Wird dieselbe Website mit einem Smartphone (in diesem Fall einem Samsung Galaxy S4) aufgerufen, wird folgender User-Agent übermittelt:

User-Agent: Mozilla/5.0 (Linux; Android 4.4.2; pt-br; SAMSUNG GT-I9500 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Version/1.5 Chrome/28.0.1500.94 Mobile Safari/537.36

Eine klare und eindeutige Auskunft darüber, ob es sich beim verwendeten Gerät um ein mobiles Endgerät handelt oder nicht, gibt der Browser allerdings nicht mit. Die Website muss den User-Agent analysieren und daraus ableiten, in welche Kategorie sich der Besucher einordnen lässt. Hierzu bieten sich verschiedene Verfahren an, die im Folgenden kurz angerissen werden (vgl. Roselli 2011; Gardner et al. 2012, S. 98f.).

User-Agent serverseitig analysieren:

Es ist nicht ausreichend allein den Namen des Browsers oder das Betriebssystem als Grundlage für die Differenzierung zwischen mobilen und stationären Endgeräten heranzuziehen. In der Regel werden mehrere Faktoren des User-Agent Strings zur Bestimmung der Gerätekategorie herangezogen. Da dies in aller Regel zu relativ komplexen Abfragen führt und zudem ständig neue Geräte und Softwareversionen auf dem Markt erscheinen, sollten sich Websitebetreiber vorhandener Scripts bedienen und diese in ihre Applikation einbinden. Auch ist sicherzustellen, dass die Gerätelisten regelmäßig manuell oder automatisiert auf den neuesten Stand gebracht werden (vgl. Maurice 2012a, S. 334–340).

Eine clientseitige Analyse des User-Agents erfolgt noch bevor Inhalte ausgeliefert werden. Dies hat den Vorteil, dass keine Ressourcen auf Seiten des Nutzers benötigt werden. Sie kann auf verschiedenen Ebenen erfolgen: So ist bereits der Webserver in der Lage, eine entsprechende Erkennung und Umleitung zu veranlassen (vgl. Craft 2013; Kelly 2012). Auch für die jeweils verwendete Programmiersprache, beispielsweise PHP, Ruby oder Python lassen sich Sammlungen mit entsprechenden Analysewerkzeugen integrieren. Oft werden diese in Form sog. Klassen auf Open Source Basis zur Verfügung gestellt. Solche Klassen bieten darüber hinaus meist weitere Funktionen, die in der Anwendung genutzt werden können. Zu nennen sind hier beispielsweise Methoden um abzufragen, ob es sich um ein Tablet handelt, ob iOS verwendet wird oder auch um die Version des jeweiligen Browsers auszulesen (vgl. Lim 2008; MobileDetect.net 2014; Python.org 2013). Auf der Website detectmobilebrowsers.com bietet der Entwickler Chad Smith Scripts für die verschiedensten Programmiersprachen und Webserver an (vgl. Smith 2013). Große Websites, so auch viele Nachrichtenseiten, setzen darüber hinaus spezielle Puffer-Speicher (Caches) ein, die das Ergebnis von Seitenaufrufen zwischenspeichern. Sogar auf dieser Ebene lässt sich eine Browserweiche implementieren, beispielsweise beim häufig eingesetzten Varnish Cache (vgl. GitHub 2014).

User-Agent clientseitig mittels JavaScript analysieren

Auch mittels JavaScript kann der User-Agent ausgelesen und analysiert werden. Hierzu steht der Zugriff auf das DOM-Objekt navigator zur Verfügung, welches wiederum die Eigenschaft userAgent beinhaltet. Nachfolgender Code öffnet im Browser ein Dialogfenster mit dem aktuellen User-Agent. Dieser erscheint in derselben Form, in der ihn der Browser auch in HTTP-Anfragen mitsendet (vgl. SELFHTML.org 2005):

<script type="text/javascript"> 	alert(navigator.userAgent); </script>

Analog zur serverseitigen Auswertung lässt sich der so ermittelte User-Agent nun beispielsweise anhand eines regulären Ausdrucks auf das Vorkommen bestimmter Begriffe hin überprüfen. So deutet beispielsweise der Begriff „mobile“ im User-Agent auf ein mobiles Endgerät hin. Auch für JavaScript hält die Seite detectmobilebrowsers.com eine fertige Lösung bereit (vgl. Smith 2013; W3Schools.com 2014).

Weitere Verfahren

Neben der Auswertung des User-Agent Strings existieren theoretisch noch einige weitere Indizien, die genutzt werden können, um ein mobiles Endgerät zu identifizieren. Beispielsweise das, ebenfalls im Header enthaltene, sog. User Agent Profile (UAprof), welches von der Open Mobile Alliance weiterentwickelt und ursprünglich auf die WAP 2.0-Spezifikation zurückgeht. Dieses beinhaltet eine Beschreibung des jeweiligen Gerätes. Daneben existiert eine weitere Header-Angabe, mit der der Browser das präferierte Format der Antwort mitteilt: HTTP_ACCEPT. Bei mobilen Endgeräten wird XML gefordert, wohingegen Desktop-Rechner i.d.R. HTML angeben. Beide Angaben sind jedoch nicht zwingend vorhanden und daher nur eingeschränkt verwendbar (vgl. Maurice 2012a, S. 337–339).

Theoretisch lässt sich auch mittels JavaScript Auflösung und Pixeldichte des aufrufenden Gerätes ermitteln und heranziehen, um mobile Zugriffe zu identifizieren. Zum einen wäre dann aber nur eine nachträgliche Umleitung möglich, zum anderen ist das Ermitteln von Auflösung und Pixeldichte aufgrund der großen Diversifikation bei Geräten, Browsern und Betriebssystemen kein zuverlässiges Verfahren, was auch der Webentwickler James Pearce in einem ausführlichen Artikel darlegt (vgl. Pearce 2011). Das beim Nutzer zudem zwangsweise JavaScript aktiviert sein muss, erschließt sich von selbst. Zudem bieten sog. „Media Queries“ deutlich komfortablere Ansätze um auf die Auflösung und Pixeldichte des jeweiligen Gerätes einzugehen. Dazu mehr in einem späteren Beitrag.