Mobile Web Apps - what´s that?
Moderne mobile Browser wie der Mobile Safari auf dem iPhone oder der ebenfalls Webkit-basierte Android-Browser machen ein noch relativ neues Genre möglich: Mobile WebApps. Sie haben das Potential, eine Lücke zwischen nativen Apps für jede Plattform und mobilen Websites zu schließen. In diesem Artikel möchte ich kurz erklären, was mobile WebApps sind und wie sie im Vergleich zu nativen Apps dastehen.
Nach meinem Urlaub gibts dann hoffentlich noch ein, zwei Artikel zu dem Thema, die etwas tiefer drauf eingehen, welche Frameworks es zum Entwickeln von WebApps gibt und was heutzutage mit WebApps schon geht und was nicht.
Apps, Apps und… Apps
Bei uns im Büro vergeht momentan kein Tag, an dem wir nicht mit der Frage “App oder WebApp?” konfrontiert werden (siehe auch Ninas Artikel zu den M-Days 2010). Meistens möchten Kunden von uns wissen, was sie denn nun brauchen:
- iPhone-App (”hat jetzt jeder”)
- Android-App (”wird bestimmt bald durchstarten”)
- Blackberry-App (”wenn schon, denn schon”)
- Windows Mobile App (”bestimmt auch irgendwie wichtig”)
- Apps für weitere Plattformen (”warum nicht?”)
- Mobile Website (”definitiv sinnvoll!”)
- Mobile Widgets (”die gibts ja auch noch”)
- Mobile WebApp, Launcher und/oder Hybrid-Apps (”was war das gleich nochmal?”)
Auf die Frage nach der besten Mobile-Plattform möchte ich an der Stelle nicht eingehen (vielleicht ein ander Mal). Man muss sich ja schließlich auch mal auf eine Fragestellung beschränken können (schwer genug).
Was ist eine mobile WebApp?
Eine mobile WebApp (oder auch oft TouchWebApp) ist erstmal nichts anderes als eine mobil optimierte Website. Der Unterschied ist aber, dass eine mobile WeApp mehr Interaktion bietet (server- oder clientseitig) und den Anspruch erhebt, sich ganz oder teilweise wie eine native App anzufühlen. Um das zu erreichen muss man sich davon verabschieden, eine möglichst breite Anzahl an Endgeräten zu unterstützen. WebApps sind oft nur für einige wenige Browser/OS/Geräte-Varianten optimiert, manchmal sogar nur für eine einzige (errät jemand, für welche?).
Was bringts?
Mobile WebApps können mehr, als man von einem Browser erwarten würde. Je nach Browser bzw. Gerät kann man als Entwickler auf unterschiedliche Schnittstellen zugreifen, die einen schon mal vergessen lassen, dass man auf einem Browser unterwegs ist, z.B.:
- Geo-Lokalisierung
- Native Animationen
- Audio/Video
- Zugriff aufs Adressbuch
- Clientseitige Datenhaltung
- Bewegungssensor
- Fullscreen-Modus
Der zweite Punkt in dieser Liste, die Unterstützung nativer Animationen, ist nicht zu unterschätzen. Auch wenn es für manche eher nach Spielerei klingen mag, ist es auf der einen Seite erstaunlich, was da mit Webtechnik inzwischen möglich ist. Auf der anderen Seiten sind es nicht zuletzt diese kleinen visuellen Effekte, wie z.B. das “Flippen”, “Faden” oder “Swappen” beim Wechseln der Seiten, die das “App-Feeling” ausmachen und für die Akzeptanz der User eine ganz entscheidende Rolle spielen.
Das Mobile WebApp-Framework jQTouch zeigt auf der Startseite in einem Screencast und einer Live-Demo ein paar ganz nette Beispiele für diese Animationen.
Ein weiterer sehr spannender Punkt ist das Thema Offline-Speicherung. Man kann dem Browser exakt mitteilen, welche Dateien er im sogenannten Offline Application Cache speichern soll. Man braucht dann keine Online-Verbindung mehr, um die Seiten auf dem Gerät aufzurufen. Trotzdem kann man Dateien auf dem Server aktualisieren und der Browser wird sie sich bei nächster Gelegenheit holen.
Die Offline-Speicherung ist wie viele andere Features von WebApps Teil der HTML5-Spezifikation. Ich persönlich glaub, dass in dieser Art der Kombination aus Online- und Offline-Content die Zukunft liegt.
Standards
Womit wir schon beim Thema Standards wären. Irgendwie dreht sich bei den mobilen WebApps alles um HTML5. Die Browser-Hersteller versuchen, ihre Schnittstellen möglichst am HTML5-Standard zu orientieren. Nachdem der aber noch alles andre als in Blei gegossen ist und das wohl auch noch eine ganze Weile so bleibt, ist “write once, run everywhere” in dem Bereich leider noch weit entfernt.
Es wird wohl noch so bleiben, dass man sich entweder auf wenige unterstützte Geräte beschränken muss, oder Frameworks einsetzt, die diese Browser-Unterschiede wegkapseln.
Man muss auch ehrlich sagen, dass Apple hier mal wieder klar die Nase vorn hat. Es macht eindeutig am meisten Spaß, WebApps nur fürs iPhone zu bauen, weil im Mobile Safari einfach am meisten der WebApp-Features unterstützt werden. Und das auch noch weitestgehend standardkonform und sehr gut dokumentiert. Da müssen die anderen noch nachziehen. Oder warten, bis die Webkit-Engine die Implementierungen von Apple übernimmt. Spannend wird auch, wie sich der mobile Firefox in dem Bereich präsentiert, wenn er denn mal für eine breitere Anzahl Handys rauskommt…
Integration
Mobile WebApps müssen nicht unbedingt in Konkurrenz stehen zu einer nativen App. Es gibt verschiedene Möglichkeiten, sie mit nativen Apps zu kombinieren:
- Möglichkeit 1: Launcher-App
Sogenannte Launcher-Applikationen sind kleine Apps, die nicht viel anderes machen, als ein paar Eingaben vom User abzufragen und dann eine mobile Website oder eine WebApp im Browser des Handy zu öffnen. So kann man mit noch relativ geringem Aufwand nativ auf viele Plattformen und in viele AppStores kommen. - Möglichkeit 2: Mobile Widgets
Gefühlt täglich schießen schon seit einiger Zeit neue MobileWidget-Plattformen aus dem Boden. Ob das jetzt Vodafone, Yahoo oder Nokia ist, das Prinzip ist immer relativ ähnlich: Es wird Entwicklern ermöglicht, Anwendungen mit reiner Web-Technik (HTML/CSS/JavaScript) zu entwickeln und dabei trotzdem in den Genuss der Vorteile nativer Anwendungen zu kommen. Die Widgets sind für den User oft nicht von nativen Anwendungen zu unterscheiden. Der Entwickler bekommt über eine JavaScript-API Zugriff auf die Gerätehardware und der Wunsch des Kunden, in den jeweiligen AppStore und auf den Home-Screen des Users zu gelangen kann so erfüllt werden.
Aktuelles Beispiel: Auf dem Mobile World Congress in Barcelona Anfang dieser Woche hat Blackberry seine neue Widget-Plattform vorgestellt, die nach eigener Aussage dem Entwickler alles erlaubt, was über die sonst übliche Java-Programmierung auch möglich wäre.
Ein großes Problem von mobilen Widgets ist leider, dass wieder mal jeder Hersteller sein eigenes Süppchen kocht. Es gibt Widget-Plattformen wie Sand am Meer und jede ist doch wieder irgendwie anders.
Wird spannend, wohin diese Entwicklung noch geht. - Möglichkeit 3: Hybrid Apps
Hybrid-Apps nennt man native Applikationen, die mobile Webseiten oder WebApps innerhalb der Anwendung einbinden (vergleichbar mit einem iFrame in HTML). So können gut die Vorteile beider Welten miteinander kombiniert werden. Man kann entscheiden, welche Teile der App häufigen Updates unterliegen oder aus anderen Gründen als WebApp realisiert werden und welche Teile nativ abgebildet werden.
HybridApps sind auch dann sinnvoll, wenn ein komplexer Workflow auf unterschiedlichen Plattformen genutzt werden soll, aber nicht für jede neu umgesetzt und bei Änderungen nicht mehrfach angepasst werden soll. Mir bekannte Beispiele sind die Bahn und die Postbank, die in ihren iPhone-Apps für die Fahrkartenbuchung bzw. fürs Online-Banking integrierte WebApps verwenden.
Es gibt Frameworks, die speziell für die Erzeugung von Hybrid-Apps gedacht sind. Bekanntestes Beispiel ist PhoneGap, das seit Ende letzen Jahres auch offiziell von Apple für den AppStore “erlaubt” wird. Die Idee hinter PhoneGap ist, dass aus einer WebApp einfach Hybrid-Apps für unterschiedliche Plattformen erstellt werden können. Es stellt eine einheitliche Javascript-Schnittstelle für (z.B. Hardware-)Funktionen zur Verfügung, die in WebApps so nicht ohne weiteres auf allen Plattformen genutzt werden könnten. Aktuell unterstützt werden die Plattformen iPhone, Android, Palm, Symbian und Blackberry.
Und jetzt: Ausprobieren!
So, lang genug gewartet. Hier zum Abschluss ein paar Beispiele von interessanten mobilen WebApps. Man kan die meisten davon zwar auch im Desktop-Browser anschauen, aber richitg Spaß machts nur auf nem Smartphone.
- Eine schöne Sammlung an iPhone WebApps gibt es bei cssiphone.com
- Nicht unerwähnt bleiben darf an dieser Stelle, die entsprechend ihrer Philosophie versuchen, so viele ihrer Dienste wie möglich als WebApp abzubilden. Klassisches Beispiel ist Google Mail, das traditionell eine herausragende user experience auf mobilen Geräten bietet. Ungleich beeindruckender fand ich persönlich die Nachricht, dass Google Voice jetzt auch als WebApp zur Verfügung steht. Derzeit leider noch nicht in Deutschland nutzbar, aber das kommt auch bald. Schöne Antwort auf Apples Ablehnung der Google Voice App für den AppStore!
- Einen alternativen Ansatz für eine Touch-Navigation in einer WebApp zeigt dieses Beispiel
- Distractable liefert eine kleine Übersicht über Frameworks zur Entwicklung von mobilen WebApps
Tags: app, mobile web app, mobile widgets, web, webapp