Jochen Block
Die Entwicklung kann dabei auf verschiedene Arten erfolgen: Entweder entwickelt man eine Web-App programmatisch und hat die volle Kontrolle über den Quellcode. Oder man verwendet Frameworks, die durch ihre vordefinierten Templates und Funktionen die Entwicklung erheblich erleichtern (können).
Web-App in Handarbeit
Ein Vorteil der Web-App-Programmierung ist der einfache Einstieg für Web-Entwickler, da sie keine neue Programmiersprache erlernen müssen, sondern ihr bisheriges Wissen in die Entwicklung einer mobilen Website einfließen lassen können. So sieht eine einfache App, die ein Bild und eine Überschrift anzeigt, kaum anders aus als eine herkömmliche HTML-Seite. Allerdings wird diese später auch offline verfügbar sein.
Only for iPhone
Ruft man diese Website mit dem iPhone (ab iOS 3.0) auf, so wird, während die Inhalte der Startseite geladen werden, ein so genannter Splashscreen, also ein Lade-Bild, angezeigt („apple-touch-startup-image“). Das Meta-Tag „viewport“ legt die Auflösung fest, mit der die Seite vom Browser gerendert werden soll. Im Beispiel soll die Auflösung des Geräts verwendet werden. Zusätzlich wird die initiale Skalierung der Seite festgelegt und ob der Inhalt der Seite durch den User skaliert werden darf (etwa durch „Pinch to Zoom“).
<?xml version=„1.0“ encoding=„utf-8“?> <!DOCTYPE html> <html manifest=„config/cache.manifest“> <head> <title>A simple Web-App</title> <meta name=„viewport“ content=„width=device-width, initial-scale=1.0, user-scalable=no“ /> <meta name=„apple-mobile-web-app-capable“ content=„yes“ /> <meta name=„apple-mobile-web-app-status-bar-style“ content=„black“ /> <link rel=„apple-touch-icon“ href=„images/icon.png“ /> <link rel=„apple-touch-startup-image“ href=„images/splashscreen.png“ /> <link rel=„stylesheet“ href=„css/simple.css“ type=„text/css“ media=„screen,mobile“ /> <script type=„text/javascript“ xsrc=„js/simple.js“></script> </head> <body> <header> <h1>Eine einfache Web-App</h1> </header> <section id=„content“> <img xsrc=„images/picture.jpg“ /> </section> </body> </html>
Listing 1
Die drei Meta-Tags in Listing 1 werden derzeit nur von iOS interpretiert. Alle anderen mobilen Betriebssysteme ignorieren diese Tags, sodass sich keine Komplikationen dadurch ergeben.
Setzt man das Attribut „content“ beim Meta-Tag „apple-mobile-web-app-capable“ auf „yes“, so wird die Web-App nach dem Aufruf über den Homescreen im Vollbild-Modus ohne Browser-Leiste angezeigt. „apple-mobile-web-app-status-bar-style“ definiert das Aussehen der Status-Leiste und kann einen der folgenden Werte annehmen:
- default (grau)
- black (schwarz)
- black-translucent (schwarz, transparent)
App-Icon
Um die Web-App mit dem Homescreen des iPhones zu verknüpfen, wird ein Icon in der Größe 114x114 Pixel im Format PNG benötigt. An dieser Stelle besteht die Möglichkeit, mehrere „apple-touch-icons“ mit unterschiedlichen Größen anzugeben. Für das Beispiel wird die Icon-Größe des iPhone 4 verwendet, da die älteren iPhones dieses Icon in einer akzeptablen Qualität herunterrechnen können.
Android unterstützt App-Icons ab Version 2.1, das passende Tag heißt „apple-touch-icon-precomposed“. Wird ausschließlich dieses Tag verwendet, stellt das iPhone das App-Icon allerdings ohne die Standard-Effekte wie abgerundete Ecken, Schattierungen und Reflexionen dar; das Icon gilt dann als „precomposed“.
<link rel=„apple-touch-icon-precomposed“ href=„icon_android.png“ />
Listing 2
Offline arbeiten
Eine wichtige Eigenschaft von Web-Apps ist es, Inhalte auch offline verfügbar machen zu können. HTML5 stellt Webseiten dafür einen sogenannten Application Cache zur Verfügung, mit dessen Hilfe Inhalte auch ohne Netzverbindung verwendet werden können. Die Einbindung dieses Caches ist recht einfach, da es sich hierbei um ein Manifest handelt, das in Form einer Textdatei vorliegen muss.
CACHE MANIFEST # 2011-10-26 Version 1.0 CACHE: index.html css/simple.css js/simple.js images/splashscreen.png images/picture.jpg NETWORK: FALLBACK: *.html /offline.html
Listing 3
Im CACHE-Bereich des Manifests werden alle Ressourcen angegeben, die vom Browser zwischengespeichert werden sollen. Unter NETWORK werden alle Ressourcen aufgelistet, die nicht speicherbar sind. Dazu zählen etwa Schnittstellen wie jene der Twitter-API. Sollten bestimmte Resourcen nicht verfügbar sein, so können im FALLBACK-Bereich Alternativen festgelegt werden. Im Beispiel wird festgelegt, dass für jede nicht vorhandene HTML-Seite die Datei „offline.html“ angezeigt werden soll.
Der Application Cache wird durch das Attribut „manifest“, das den Pfad zum Manifest enthält, im HTML-Tag aktiviert. Damit der Browser das Cache-Manifest interpretieren kann, muss dieses mit dem MIME-Type „text/cache-manifest“ vom Server ausgeliefert werden.
Cache aktualisieren
Um den Cache einer Web-App zu aktualisieren, leert der Benutzer entweder den Browser-Cache oder der Inhalt des Cache-Manifests ändert sich. Es reicht also nicht aus, dass sich der Inhalt einer Datei ändert. Im Beispiel-Manifest wird deshalb ein Datum und eine Versionsnummer in Form eines Kommentars verwendet. Ändert sich eine Datei, reicht es, im Manifest das Datum und die Version anzupassen, um der Web-App Änderungen mitzuteilen.
Design, Layout und UX
Um der Web-App einen nativen App-Look zu verpassen, kommen diverse CSS3-Eigenschaften zum Einsatz. CSS3 erfährt eine breite Unterstützung unter den mobilen Browsern, daher stellt es für Web-App-Entwickler ein äußerst nützliches Werkzeug dar. Einige der Eigenschaften im Überblick:
- Eigene Schriftarten in eine Webseite zu integrieren ist eigentlich kein neues Feature von CSS3, denn „@font-face“ wurde bereits mit CSS2 eingeführt. In der neuen Version unterstützt „@font-face“ jedoch beliebige TrueType- oder OpenType-Schriftarten.
@font-face {
font-family: Monospace;
src: url('fonts/own_monospace.otf');
}
Listing 4
- Dank CSS3 können Texte und Boxen mit einem Schatten versehen werden, ohne dafür spezielle Grafiken laden zu müssen. Das Rendering der Schatten ist allerdings sehr rechenintensiv, daher sollte sparsam mit diesen optischen Elementen umgegangen werden.
/* Die erzeugten Schatten sind nach oben und rechts je zwei Pixel breit. Der dritte * Parameter bestimmt den Blur-Effekt, der letzte die Farbe des Schattens. */ box-shadow: 2px 2px 2px #000; text-shadow: 2px 2px 2px #000;
Listing 5
- Auch abgerundete Kanten und Verläufe können mit CSS3-Bordmitteln realisiert werden. Aufgrund der neuen Tags sind auch hier die Grafiken überflüssig, was die Performance verbessert und damit die Ladezeit verkürzt.
/* Vier Angaben im Uhrzeigersinn für jede Ecke */ border-radius: 5px 5px 5px 5px; /* Zwei Angaben, wodurch die untere linke Ecke den Wert der oberen linken und die * rechte untere Ecke den Wert der rechten oberen Ecke übernimmt */ border-radius: 5px 5px; /* Eine Angabe für alle vier Ecken */ border-radius: 5px;
Listing 6
/* Parameter eins legt fest, ob der Verlauf linear oder radial verläuft. * X- und Y-Koordinaten legen den Start- und Endpunkt (2. und 3. Parameter) fest. * Die beiden letzten Parameter schließlich definieren die beteiligten Farben. */ -webkit-gradient(linear, 0 0, 0 100%, from(#FFFFFF), to(#0000FF);
Listing 7
von sec0nd 26.04.2012 (16:13Uhr) 1.
"Dank HTML5 und CSS3 lassen sich bereits heute Web-Apps bauen, die mit ihren nativen Konkurrenten problemlos mithalten können."
Dem kann ich leider nicht zustimmen. Selbst einfache Seitenübergänge, z. B. durch jQery mobile generiert, ruckeln vor sich hin. Und jqTouch legt beim Tap gewisse Denkpausen ein, bevor was passiert. Sitze gerade an einem Projekt und die Kiste läuft nur auf einem iPad 2 flüssig. iPhone 3/4 sind so lala. Ist leider (noch?) traurige Realität.
Javascript ist halt immer nur so schnell wie die Engine und die Hardware. Vielleicht ist das Geruckel in 2 Jahren mit Quadcore CPUs Geschichte. Aktuell ist es frustrierend.
Ich bin deswegen am Überlegen, ob ob ich mir nicht doch noch Objective-C antue.
von Erik 26.04.2012 (16:25Uhr) 2.
Bald kommt Mozillas Boot to Gecko, und gut ist :)
Wir erwarten ja auch nicht dass Internetanwendungen für Windows, Linux und Applezeug extra angepasst werden. Stellt euch das mal vor: hey coole Webseite, leider hab ich keinen Windowsrechner, deswegen läufts bei mir nicht richtig (oder halt umgekehrt, egal...).
Ist vielleicht noch ein Weg dahin, aber der wird immer stärker gegangen werden, das ist halt der eigentliche Sinn der Idee vom Internet.
von Jochen Seelig 26.04.2012 (16:56Uhr) 3.
Passend zu diesem Thema veranstalten wir am 16.Mai ein Webinar über:
Mobiles Umdenken - HTML5-Apps für Businessanwendungen
Das Webinar wird präsentiert von Martin Schröder (Developer bei der Mayflower GmbH).
Bis dahin kann man sich schon einen Podcast über WebApps als Einstimmung anhören.
Link zum Podcast: http://blog.mayflower.de/archives/864-Mayflower-Podcast-004.html
Anmeldung für das Webinar: http://bit.ly/webinar-mobiles-umdenken
Viel Spaß mit dem Input!
Jochen
von ursaberlin 27.04.2012 (12:18Uhr) 4.
Schaut euch mal Enyo an. http://enyojs.com/ War früher die Basis von webOS und jetzt der erste Teil von Open webOS. Klasse JS Bibliothek um Cross-Plattform web apps zu bauen. Und mit Phonegap kombiniert auch mobile apps.