Der Unterschied zwischen mobilen Webanwendungen und nativen Apps verschwimmt immer mehr. Browser erhalten zunehmend Zugriff auf Hardware, z.B. Batterie oder Kamera, Offline-Nutzung und Speicherung von Daten werden leichter, die Performance von JavaScript besser usw.
Was eine Website von einer Web-App unterscheidet, ist schwer zu sagen, aber folgende Punkte aus Human JavaScript ziehen eine gute Grenze:
Um die Unterschiede zwischen einer Website und einer App zu senken, lassen sich lokal gespeicherte Seiten durch spezielle Meta-Tags anpassen, beispielsweise durch Ausblenden der Browser-Leiste oder Setzen von Name und Icon.
<!-- Zoomen in der Anwendung verhindern. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<!-- Anwendung im Vollbildmodus anzeigen. -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Schwarze Statusbar mit weißem Text. -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Namen der Anwendung festlegen. -->
<meta name="apple-mobile-web-app-title" content="Meine Anwendung">
<!-- Icon der Anwendung festlegen. Das Suffix "precomposed" verhindert Veränderung durch iOS < 7. -->
<link rel="apple-touch-icon" href="/img/icon-precomposed.png">
<!-- Startbild der Anwendung festlegen. -->
<link rel="apple-touch-startup-image" href="/img/startup.png">
Weitere Informationen dazu finden Sie bei Apple unter Configuring Web Applications.
<input type="email"> <input type="tel"> <input type="datetime">
Wie Sie schon gelernt haben, wurden mit HTML5 neue Formular-Typen wie email und tel eingeführt. Browser unter Android, iOS etc zeigen für diese Typen passende Tastaturen an, beispielsweise eine mit Zahlen für Telefonnummern.
Da Smartphones, Tablets usw. nicht mehr durch Mäuse sondern meist Finger bedient werden, wurden (von Apple) entsprechende Touch-Events eingeführt.
touchstart |
Ein Finger wird auf ein DOM-Element gelegt. |
touchmove |
Ein Finger wird über ein DOM-Element gezogen. |
touchend |
Ein Finger wird von einem DOM-Element entfernt. |
Diese feuern sofort bei Berührung. Das click-Event hingegen wird (außer in neueren Chrome-Versionen) 300ms verzögert, um einen Klick von einem beginnenden Scrollen unterscheiden zu können. Das führt allerdings dazu, dass Web-Anwendungen sich per se langsamer anfühlen. Abhilfe schaffen spezielle Bibliotheken wie Fastclick oder Hammer.js.
Mehr dazu finden Sie im Artikel Multi-Touch-Webentwicklung.
Für langsame Verbindungen oder Offline-Momente wurde mit HTML5 der ApplicationCache eingeführt, über den sich – im Gegensatz zum normalen Browser-Cache – explizit steuern lässt, welche Ressourcen lokal verfügbar sein sollen. Diese Angaben werden in einem sogenannten “Cache Manifest” hinterlegt, das im HTML referenziert wird. Das sieht beispielsweise so aus:
<!doctype html>
<html manifest="app.appcache">
…
Die Manifest-Datei muss mit dem Content-Type text/cache-manifest ausgeliefert werden1 und enthält folgende Regeln:
CACHE MANIFEST
# Revision: 1.28
CACHE:
/images/logo.png
/styles/style.css
NETWORK:
/login.html
FALLBACK:
/index.html /offline.html
Das heißt, die Dateien logo.png und style.css werden immer über den Cache ausgeliefert, login.html immer vom Server geholt und sollte die index.html nicht geladen werden können, dient offline.html als Ersatz.
Eine ausführlichere Einführung finden Sie im Leitfaden für die ersten Schritte bei der Verwendung des Anwendungscaches.
Sie können überprüfen, ob gerade eine Netzverbindung besteht2 und auf einen Wechsel reagieren:
var online = window.navigator.onLine; // true / false
window.addEventListener('online', function(ev) { alert(':-)') });
window.addEventListener('offline', function(ev) { alert(':-(') });
Standardmäßig werden Links nach dem Klicken visuell hervorgehoben, um Feedback zu geben. Das entspricht nicht dem verhalten nativer Anwendungen und sieht zum anderen auch noch unschön aus. Beseitigt werden kann es wie folgt:
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }
Über CSS und den :active-State eines Elements lässt sich das Verhalten dann nach eigenem Wunsch beschreiben:
button:active { background-color: skyblue; }
Die Chrome DevTools bieten wieder viele hilfreiche Funktionen, beispielsweise zeigen sie unter “Resources” an, was derzeit in den verschiedenen Datenbanken liegt (LocalStorage, Web SQL, IndexedDB), welche Cookies zu der Seite gehören und welche Dateien vom AppCache behandelt werden. Der AppCache lässt sich über die URL chrome://appcache-internals/ auch leeren. Zudem bieten die DevTools eine Möglichkeit, per Remote-Debugging direkt auf Android-Geräten zu arbeiten.