Anzeige
Anzeige
How-To
Artikel merken

HTTP-Header, UAProf und WURFL: Entwicklung mobiler Web-Anwendungen

Das Leben wird immer mobiler. Schon heute nutzen mehr Menschen ein Mobiltelefon als einen PC. Daher wird es für jeden, der Informationen im World Wide Web anbieten möchte, immer wichtiger, seine Website so zu gestalten, dass sie auf mobilen Endgeräten funktioniert. Es gibt tausende Handymodelle, die sich in ihren Fähigkeiten deutlich unterscheiden. Daher ist es unerlässlich, die Fähigkeiten der Geräte gut zu kennen. Die hier vorgestellten Verfahren unterstützen Webentwickler dabei, an die benötigten Informationen zu kommen.

6 Min. Lesezeit
Anzeige
Anzeige

Bei der Entwicklung mobiler Webangebote steht der Entwickler vor dem Problem, seine Anwendung so zu schreiben, dass sie auf einer großen Zahl sehr unterschiedlicher Endgeräte sinnvoll genutzt werden kann.

Anzeige
Anzeige

Mobiltelefone unterscheiden sich deutlich stärker voneinander als ihre Desktop-Kollegen, die PCs.
Bildschirmgröße, unterstützte HTML-Variante, Stylesheetfähigkeiten und vieles mehr variieren. Möchte man noch besondere Funktionen einbauen, wie den Download von Sounddateien (z. B. Klingeltöne) oder den Versand von SMS direkt aus dem Internetbrowser, wird es noch unübersichtlicher. Alle Varianten zu berücksichtigen ist ein Ding der Unmöglichkeit, zumal die Entwicklung nicht stehen bleibt und sich der Zoo der potenziellen Endgeräte jederzeit vergrößert.

LCD für den mobilen Bildschirm

Ein beliebter Lösungsansatz für das beschriebene Problem ist LCD (kurz für Least Common Denominator, „kleinster gemeinsamer Nenner“). Luca Passani beschreibt diesen Ansatz im Dokument „Global Authoring Practices for the Mobile Web“ [1] wie folgt: Man definiere das absolute Minimum der benötigten Eigenschaften, die ein Endgerät erfüllen muss (z. B. die minimale Bildschirmgröße und die unterstützte HTML-Variante) und entwickle primär dafür. Geräte, die diese Anforderungen nicht erfüllen, bekommen allenfalls eine Fehlermeldung zu sehen.

Anzeige
Anzeige

So sinnvoll dieser Ansatz ist, hilft er doch nur wenig beim Bahnen eines Wegs durch den Endgerätedschungel. Schließlich möchte man den Besuchern seiner Website das Bestmögliche anbieten. In der Regel wird der verantwortliche Entwickler den Inhalt (meistens lediglich die Darstellung des Inhalts) für verschiedene Endgeräte entsprechend anpassen müssen. Das nennt man Content Adaptation („Inhaltsanpassung“) oder auch Multiserving. Der Entwickler erstellt dabei verschiedene Versionen der Website, die für verschiedene Endgeräte(klassen) optimiert sind. Wenn eine Anfrage vom Microbrowser des Handys beim Server eintrifft, muss dieser anhand der übermittelten Informationen entscheiden, welche Version er ausliefert.

Anzeige
Anzeige

Entscheidungshilfen

Die erste Möglichkeit, an die gewünschten Informationen zu kommen, bilden die sogenannten HTTP-Header. Jeder Internetbrowser verschickt mit seiner Anfrage einer Webseite Informationen, die dem Server mitteilen, mit wem er es zu tun hat. HTTP-Header bilden die Grundlage für alle weitergehenden Entscheidungen. Insbesondere der darin enthaltene Eintrag „user-agent“ ist von entscheidender Bedeutung. Er identifiziert den Typ des Endgerätes und ist damit der Ausgangspunkt für alle weiteren Aktivitäten. Das folgende Listing zeigt in Auszügen die Header, die der eingebaute Microbrowser eines SonyEricsson T630 verschickt. Alle Programmierumgebungen für Webanwendungen unterstützen den Zugriff auf diese Informationen, PHP beispielsweise durch die Funktion „http_get_request_headers()“.

HTTP Header
user-agent=SonyEricssonT630/R401 Profile/MIDP-1.0 Configuration/CLDC-1.0 UP.Link/5.1.2.16

profile=http://wap.sonyericsson.com/UAprof/T630R401.xml

accept-charset=us-ascii, iso-8859-1, utf-8, iso-10646-ucs-2, UTF-8, *

accept-language=de

accept=application/vnd.wap.multipart.mixed, image/bmp, image/png,
image/gif, image/jpeg, image/vnd.wap.wbmp, application/vnd.wap.wmlc,
application/vnd.wap.wbxml, application/vnd.wap.wmlscriptc,
application/xhtml+xml, application/vnd.wap.xhtml+xml, text/html,
application/vnd.wap.mms-message, application/java-archive,
application/java, application/vnd.oma.dd+xml, text/css, */*,
image/bmp,image/vnd.wap.wbmp,text/x-wap.wml,text/vnd.wap.wml,text/x-hdml,text/vnd.wap.wmlscript

Listing 1

Listing 1 zeigt außer dem „user-agent“ auch die „accept“-Header, die angeben, welche Zeichensätze (accecpt-charset), Sprachen (accept-language) und Datentypen bzw. MIME-Types (accept) der Browser unterstützt. Für mobile Webanwendungen sind die unterstützten Datentypen sehr wichtig. Während im „normalen“ Web die Inhalte in der Regel in einer der Markup-Sprachen XHTML 1.0 oder HTML 4.1 ausgeliefert werden, hat man es im mobilen Web vor allem mit WML [2] und XHTML MP [3] zu tun, wobei WML eigentlich nur noch für ein paar alte Geräte erforderlich ist. Die modernere Variante XHTML MP (XHTML Mobile Profile) wird von den meisten aktuellen Mobiltelefonen unterstützt. Sie unterscheidet sich bis auf ein paar mobilspezifische Ergänzungen kaum von XHTML 1.0. Einige Mobiltelefone geben an, HTML 3.2 oder 4.1 zu unterstützen. Welche Markup-Sprache ein gerade anklopfender Browser versteht, kann man dem „accept“-Header entnehmen. Ein Gerät, das XHTML MP „versteht“, zeigt dies durch den MIME-Type „application/vnd.wap.xhtml+xml“ an. In diesem Fall sollte man auch XHTML MP liefern, da dies der akzeptierte Standard der mobilen Welt ist.

Anzeige
Anzeige

HTTP-Header helfen bei den ersten Schritten in der mobilen Welt. Allerdings ist die Information, die sie liefern können, begrenzt. Schließlich werden sie bei jeder Anfrage an den Server neu übertragen und können schon deshalb nicht sehr ausführlich sein. Zwei alternative Ansätze, UAProf und WURFL, gehen einen anderen Weg, um an die benötigten Daten zu kommen.

UAProf

Die Spezifikation User Agent Profiles (kurz: UAProfs) [4] bildet den standardisierten Ansatz zur Lösung des Problems. Sie wurde im Rahmen der WAP-2.0-Standardisierung von der Open Mobile Alliance [5], der Vereinigung der Mobilfunkindustrie, eingeführt. UAProf definiert mit „profile“ einen neuen HTTP-Header, der eine URL zu einer vom Anbieter des Geräts erstellten Gerätebeschreibung im XML-Format enthält. Beim T630 (Release 4.01) ist das die Datei „T630R401.xml“, die unter http://wap.sonyericsson.com/UAprof/ zu finden ist.

Die Webanwendung ermittelt aus dem „profile“-Header die URL und lädt die Beschreibungsdatei herunter. Sinnvollerweise macht man das nur beim ersten Zugriff eines neuen Clients. Ein Cache für die Beschreibungen der bereits bekannten Geräte ist für eine akzeptable Performance der Webanwendung unverzichtbar.

Anzeige
Anzeige

Das Format der Beschreibung ist standardisiert, so dass die Webanwendung die benötigten Informationen mit den üblichen XML-Tools auswerten und so den korrekten Inhalt ausliefern kann. UAProf bietet eine gute Möglichkeit, an die benötigten Informationen zu kommen. Allerdings gibt es zahlreiche Mobiltelefone, die den „profile“-Header nicht kennen, da UAProf erst mit der zweiten Version des WAP-Standards eingeführt wurde. Außerdem ist der Aufwand für das Programmieren des Cache nicht zu unterschätzen.

WURFL

Das Wireless Universal Resource File (WURFL) [6] stellt einen alternativen (oder auch ergänzenden) Ansatz dar, um einer Webanwendung Informationen über die Fähigkeiten eines mobilen Geräts zur Verfügung zu stellen. WURFL ist, wie der ausgeschriebene Name erahnen lässt, eine (große) Datei, die Informationen über fast alle bekannten Mobiltelefone enthält. Diese Datei wird im Rahmen eines Open-Source-Projekts gepflegt. Die Köpfe hinter WURFL sind Luca Passani und Andrea Trasatti. WURFL enthält zurzeit Informationen über rund 10.000 verschiedene Mobiltelefone. Diese Informationen werden von vielen Freiwilligen aus aller Welt zusammen getragen und in der Datei konsolidiert. Interessant an WURFL ist ein Fallback-Mechanismus, der es erlaubt, Beziehungen zwischen verschiedenen Mobiltelefonen aufzubauen und damit selbst dann noch sinnvolle Informationen zu liefern, wenn über ein Gerät noch nicht alles bekannt ist.

XML
<!-- Auszug aus der WURFL-Datei, hier Informationen zum Nokia E61 -->
<device user_agent="NokiaE61" actual_device_root="true" fall_back="nokia_generic_series60_dp30" id="nokia_e61_ver1">
	<group id="product_info">
		<capability name="model_name" value="E61"/>
	</group>
	<group id="display">
		<capability name="resolution_width" value="320"/>
		<capability name="resolution_height" value="240"/>
		<capability name="max_image_width" value="320"/>
		<capability name="max_image_height" value="220"/>
	</group>
	<group id="image_format">
		<capability name="colors" value="16777216"/>
	</group>
	[...]
</device>

Listing 2

Für den Zugriff auf WURFL sind Bibliotheken für viele Programmiersprachen verfügbar, darunter PHP, Java, Perl, Python, .NET, C++ und andere. Die Bibliotheken nutzen Caching, um den Zugriff massiv zu beschleunigen. Manche, etwa Tera-WURFL [7] für PHP, setzen auch Datenbanken wie MySQL ein, wodurch der Zugriff noch stärker beschleunigt werden kann. Für TYPO3 existiert eine Extension, die eine Integration von WURFL vereinfacht [8]. Ein Tutorial hierzu ist in dem dieser T3N-Ausgabe beiliegenden HOWTO zu finden.

Anzeige
Anzeige

WURFL ist zwar nicht immer so aktuell wie UAProf, doch enthält es auch Informationen, die über UAProf nicht zu bekommen sind. Außerdem ist der Aufwand, eine WURFL-basierte Applikation zu entwickeln, geringer als bei UAProf. Häufig wird man die Technologien gemeinsam einsetzen, um dem Nutzer das bestmögliche Produkt anbieten zu können.

Fazit

Die Entwicklung mobiler Webanwendungen stellt den Entwickler vor neue Probleme. So muss er stärker als je zuvor darauf Rücksicht nehmen, dass die Endgeräte der Nutzer starke Unterschiede aufweisen. Über die HTTP-Header erhält er die grundlegenden Informationen, um angepasste Inhalte auszuliefern. Moderne Technologien und Werkzeuge wie UAProf und WURFL bieten zudem Möglichkeiten, die verschiedenen Fähigkeiten der Endgeräte wesentlich besser auszunutzen. Darüber hinaus unterstützen mittlerweile auch einige Content Management Systeme wie TYPO3 oder Drupal die Entwicklung mobiler Anwendungen.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Schreib den ersten Kommentar!
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige