Web-Anwendungen für Smartphones sind speziell für mobile Endgeräte optimierte Webseiten. Sie imitieren das Aussehen nativer Anwendungen und der Interaktionselemente der Plattformen, um so eine der Anwendung ähnliche Nutzungserfahrung zu vermitteln. Sie basieren technisch auf HTML, CSS und JavaScript und können von einem Browser über eine URL aufgerufen und dargestellt werden.

Abbildung 4.1: Aufbau einer Web-Anwendung

Früher waren die technischen Möglichkeiten der mobilen Endgeräte und die Übertragungsraten der Funknetze stark eingeschränkt. Mobile Webseiten verwendeten das Übertragungsprotokoll WAP und die Auszeichnungssprache WML (Wireless Markup Language). Diese dienten dazu, die Inhalte möglichst einfach und ressourcenschonend auf mobile Endgeräte zu bringen. Damit einher ging jedoch eine Reduzierung der Flexibilität und Komplexität der Inhalte. Web-Anwendungen waren damit nicht darstellbar (Ernst, 2008 S. 32).

Dies änderte sich im letzten Jahrzehnt. Mit der Einführung von breitbandigen Mobilfunknetzen mit UMTS konnten größere Datenmengen transportiert und mit rechenstarken Smartphones aufwändigere Programme ausgeführt werden. Die Gerätehersteller nutzten diese neuen Möglichkeiten und integrierten das von herkömmlichen Computern bekannte HTTP zur Übertragung und HTML zur Auszeichnung von Inhalten auf neueren Geräten.

Den Durchbruch schafften Web-Anwendungen schließlich mit der Veröffentlichung des Apple iPhones im Jahr 2007. Dort waren sogenannte „Web-Apps“ zu Beginn die einzige Möglichkeit eigene und angepasste Anwendungen auf dem Gerät zu betreiben (Stark, 2010 S. IX). Daraus entstanden verschiedene Ansätze, die die Entwicklung von mobilen Anwendungen mit Web-Techniken unterstützen.

Funktionsweise

Die Kombination der drei Standards HTML5, CSS3 und JavaScript ermöglicht die Erstellung plattformunabhängiger Web-Anwendungen für Smartphones.

HTML und CSS sind vom internationalen World Wide Web Consortium (W3C) entwickelte und betreute Sprachen zur Auszeichnung und Darstellung von strukturierten Dokumenten. HTML5 und CSS3 stellen hierbei die derzeit neuesten Versionen dar, die vielfältige Verbesserungen zur Erstellung von anwendungsähnlichen Webseiten beinhalten. Die Spezifikationen beider Sprachen sind in ausgereiften Stadien und es wird erwartet, dass diese bald in sogenannte „W3C Recommendations“, die dem Status „Standard“ anderer Organisationen entsprechen, umgewandelt werden.

Die Inhalte der Web-Anwendung werden mit HTML ausgezeichnet, um sie so für den Browser verständlich zu machen. Das Aussehen wird über CSS gesteuert. Besonderes Augen-merk gilt dabei den Besonderheiten der Smartphones wie die geringe Auflösung oder die Touch-Steuerung.

Die Bedienelemente simulieren durch die Nutzung von Grafiken das Aussehen der Elemente der jeweiligen Plattformen. Damit ist es möglich, die mobile Anwendung aussehen zu lassen, als würde sie native Elemente aus der Interface-Bibliothek der Plattform nutzen. Anima­tionen und Übergänge werden mit CSS3-Effekten erzielt. Damit können Seitenelemente gedreht, bewegt, in der Größe verändert oder anderweitig manipuliert werden.

Mit HTML und CSS ist jedoch keine Interaktivität möglich. Dazu nutzen Web-Anwendungen die eng mit Webseiten und Browsern verknüpfte Programmiersprache Java-Script. Diese lässt sich in Webseiten einbinden und kann die Inhalte der Webseite zur Laufzeit manipulieren. Es gibt eine Vielzahl vorgefertigter Bibliotheken und Skript­samm-lungen, die oft genutzte Funktionalität bündeln und die Entwicklung mit JavaScript vereinfachen.

WebKit

Während auf dem Desktop verschiedene Browser um Marktanteile kämpfen (Microsoft Internet Explorer, Mozilla Firefox, Google Chrome, Opera), die jeweils leichte Unterschiede bei Funktionalität und Interpretation der Standards aufweisen, ist die Landschaft bei mobilen Browsern homogener. Auf fast allen Plattformen kommen WebKit-basierte Browser zum Einsatz, die hervorragende und gleichwertige Unterstützung für Web-Standards bieten.

WebKit ist eine quelloffene und plattformunabhängige Bibliothek zur Darstellung von Webseiten, welche als Basis für einen Webbrowser genutzt werden kann. Sie wurde von Apple für den Browser von Mac OS X „Safari“ auf Basis der Linux-Bibliothek KHTML entwickelt und als Open Source veröffentlicht. Da die Quellcodes als übersichtlich und strukturiert galten, wurden sie bald auch von anderen Anbietern (Nokia, Adobe, Google) genutzt. Aufgrund dieser bestehenden Erfahrung hielt WebKit bald auf mobilen Plattformen Einzug und wird heute von den Browsern in Apple iOS, Google Android und Palm webOS genutzt. Im August 2010 kündigte auch RIM an, in der neuen Version seiner Plattform einen WebKit-basierten Browser zu verwenden. Damit ist WebKit zum Quasi-Standard für mobile Browser geworden und es ist verhältnismäßig einfach, Quellcode zu schreiben der plattform-übergreifend gleich aussieht und funktioniert.

Gleichzeitig bietet WebKit Zugriff auf einige für andere Browser noch unbekannte Funktionalitäten. So ist es mit dem Geolocation API möglich, die Positionskoordinaten des Nutzers auszulesen, Local- und Sessionstorage ermöglichen es, einfache Daten auf dem Gerät abzuspeichern und mit der clientseitigen Datenbank sogar relationale Datensätze abzulegen. Ähnliche Funktionalitäten stehen normalerweise nur nativen Anwendungen zur Verfügung und verkleinern den Abstand zwischen Web-Anwendungen und nativen Anwendungen. Weitere gerätespezifische Funktionen wie Medien- oder Sensorenzugriff (vgl. Abschnitt 3.1.3) sind jedoch leider nicht möglich.

Online- und Offline-Webanwendungen

Um diese Art von Anwendung nutzen zu können ist eine permanente Verbindung mit dem Internet nötig. Die Daten sind rein serverseitig gespeichert oder es findet serverseitig eine Interaktion statt, die für die Nutzung der Web-Anwendung notwendig ist. Hierfür eignen sich vor allem Anwendungen mit großen oder sich häufig ändernden Datensätzen im Hintergrund.

Es ist jedoch auch möglich, eine Web-Anwendung zu entwickeln, die keine Internetverbindung benötigt. Dazu wird der sogenannte Offline Application Cache genutzt. In ihm können definierte Dateien der Web-Anwendung gespeichert werden, damit diese beim nächsten Start der Anwendung nicht wieder neu geladen werden müssen. Serverseitige Interaktivität ist damit natürlich ausgeschlossen, kann jedoch über clientseitige Interaktivität per JavaScript auf dem Smartphone ausgeglichen werden.

Getestet werden kann die Web-Anwendung direkt in den Browsern der Smartphones. Aber auch bei der Entwicklung auf dem Desktop-System kann mit den Browsern Apple Safari oder Google Chrome die Anwendung auf Funktionalität und Aussehen geprüft werden. Beide Browser verwenden die WebKit-Engine und unterscheiden sich im Rendering von Seiten daher kaum von ihren mobilen Gegenstücken. Die Desktop-Browser bieten zudem umfangreiche Möglichkeiten zum Debugging der Anwendung bei Fehlern. Die Fenstergröße des Browsers kann an die Auflösung eines Smartphones angepasst werden, um so schon bei der Entwicklung ein Gefühl für die spätere Anwendung zu bekommen.

Web-Anwendungen lassen sich grundsätzlich nicht auf dem Gerät „installieren“, da sie immer über eine URL abgerufen werden müssen. Bei einigen Plattformen ist es zumindest möglich eine zu anderen nativen Anwendungen gleichwertige Verknüpfung anzulegen, die ebenso mit einem Icon und Namen versehen wird. Dieses Icon sowie eine Grafik, die angezeigt wird während die Anwendung lädt, können als Meta-Tags im HTML-Quelltext festgelegt werden. Zusätzlich lassen sich bei einer Verknüpfung die Steuerelemente des Browsers ausblenden und so die Identität als Web-Anwendung weiter verschleiern.

Für den Vertrieb und Verkauf über den Apple App Store oder Android Market eignen sich Web-Anwendungen leider nicht. Ihnen bleibt die Aufnahme in diese Anwendungskataloge verwehrt.

Einschätzung

Web-Anwendungen können gerade für Entwickler, die täglich mit HTML, CSS und JavaScript arbeiten eine gute Alternative zur Entwicklung von mobilen Anwendungen sein. Durch die vielfältigen technischen Möglichkeiten der im Mobilbereich genutzten WebKit-basierten Browser sind sowohl der Zugriff auf Gerätefunktionen, CSS-Animationen als auch die Nutzung als Offlineanwendung möglich.

Die simulierte Oberfläche der Anwendungen ist jedoch nur ein provisorischer Ersatz für native Bedienelemente. Die Startzeit der Anwendung ist sehr lange und die Performance lässt zu wünschen übrig. Das größte Problem ist, dass es nicht möglich ist, Web-Anwendungen über die Anwendungs-Shops der Anbieter zu verbreiten oder zu verkaufen.

Ansätze dieser Klasse

• jQTouch
• Sencha Touch