Web Storage und Offline-Webapplikationen - HTML5 - page 234

Firefox Opera Chrome Safari IE

Web Storage 3.0 10.50 3.0 4.0 8.0

Offline-Apps 3.5 10.60 4.0 4.0
Tabelle 8.4: Web Storage und Offline-Web-Application-Unterstützung der Browser

8.5 Beispiel: Knapp dran!

Im abschließenden Beispiel werden die beiden in diesem Kapitel vorgestell-
ten Techniken kombiniert. Kapp dran! ist ein Lernspiel, das darauf abzielt, Orte
oder andere geografische Merkmale anhand einer stummen Karte (einer Karte
ohne Kartenbeschriftungen) zu finden. Auf dieser Karte versucht der Spieler
ein vorgegebenes Ziel möglichst nahe mit einem Mausklick zu markieren. Je
mehr Treffer pro Runde erzielt werden, desto mehr Punkte gibt es für die Ge-
samtwertung.

Damit Kinder das Spiel auch während einer langen Autofahrt auf dem iPad
spielen können, werden die benötigten Ressourcen, wie Bilder, JavaScript- und
HTML-Dateien in dem Offline-Speicher (vergleiche Abschnitt 8.3, Offline-Web-
Applikationen) abgelegt. Die Liste mit den besten Ergebnissen wird im local-
Storage (Abschnitt 8.2, Storage) gespeichert, damit diese Informationen nicht
verloren gehen, auch wenn der Computer ausgeschaltet wird. Kann der Com-
puter wieder eine Verbindung zum Internet aufbauen, könnten die neu erreich-
ten Punktezahlen auf den Spielserver geladen werden, eine Funktion, die in
Abschnitt 8.5.4, Erweiterungsmöglichkeiten diskutiert wird. Über eine Schalt-
fläche überprüft der Browser noch, ob es neue Spielziele gibt, und lädt diese
bei Bedarf auf den Computer.

Durch die Anwendung der neuen Techniken aus dem HTML5-Umfeld entsteht
ein eigenständiges Programm, das den Browser als eine Art Laufzeitumge-
bung verwendet. Sowohl Hardware als auch Software und Betriebssystem des
Endgeräts treten in den Hintergrund; der Browser ist die zentrale Komponente
für die Ausführung. Moderne Betriebssysteme wie das von Google entwickelte
ChromeOS oder webOS von der Firma Palm setzen genau auf diese Technik.
Durch den Einsatz des Offline-Speichers und der .manifest -Datei wird das Pro-
gramm mit einer automatischen Update-Funktion ausgestattet - eine wahre
Freude für Entwickler.