Offline-Applikation
Neben Daten lassen sich auch ganze Webapplikationen offline halten. Damit werden die Nachteile einer möglicherweise fehlenden oder eingeschränkten Internetverbindung umgangen. Das iPhone oder der iPod touch müssen die WebApp dann nur einmal laden und sie steht anschließend jederzeit zur Verfügung. Möglich macht das ein zukünftiger, aber seit iPhone OS 2.1 schon verfügbarer Standard: der „HTML5 Offline Application Cache“. Um ihn zu nutzen, werden ein so genanntes Cache-Manifest und ein zugehöriges JavaScript-Interface benötigt.
Das Cache-Manifest
Das Cache-Manifest ist eine Textdatei, die alle Ressourcen auflistet, beispielsweise Bilder, CSS- oder JavaScript-Dateien. Der Browser muss so für das Caching also nicht jede einzelne Seite aufrufen, sondern lädt beim Öffnen der Seite sämtliche Dateien, die Sie angegeben haben. Anschließend lädt der Browser keine Daten mehr vom Server, sondern greift nur noch auf den Cache zu. Die Dateien bleiben auch beim Schließen des Browsers erhalten. Folgende Eigenschaften besitzt das Manifest:
- Der Mime-Type lautet text/cache-manifest.
- Die erste Zeile lautet immer CACHE MANIFEST.
- Jede Zeile enthält entweder die URL zu einer Ressource oder einen Kommentar. Kommentare sind einzeilig und werden mit dem Hash-Symbol (#) eingeleitet.
- URLs können absolut oder relativ sein.
- Die HTML-Datei, die das Cache-Manifest referenziert, muss nicht enthalten sein.
Ein Beispiel für das Cache-Manifest könnte wie folgt aussehen:
Cache-Manifest
CACHE MANIFEST # HTML-Dateien produkte.html service.html kontakt.html # JavaScript-Dateien lib/iUI/iui.js lib/main.js #CSS-Dateien lib/iUI/iui.css lib/main.css # Bilder img/logo.png http://example.com/images/brand.gif
Listing 6
Nun müssen Sie das Cache-Manifest referenzieren, indem Sie das HTML-Tag auf der Startseite erweitern: „<html manifest="filename.manifest">“. Dabei können Sie einen absoluten oder einen relativen Pfad angeben.
Offline-Application-Cache updaten
Würden nun Änderungen an der Website vorgenommen, würden diese nicht angezeigt werden, da die Seiten ja schon im Cache vorgehalten werden. Also muss der Cache aktualisiert werden. Zum einen geschieht das automatisch, sobald Sie den Inhalt des Cache-Manifests ändern – das Ändern des Dateidatums bringt also noch nichts. Ändert sich an der Verzeichnisstruktur nichts, ändert sich auch das Cache-Manifest nicht. Änderungen innerhalb einer Datei werden also nicht übernommen.
Sie müssen also etwas nachhelfen. Mit JavaScript können Sie eine Aktualisierung manuell anstoßen. Das DOMWindow-Objekt besitzt dazu die Eigenschaft „DOMApplicationCache“, deren Instanz jeweils den Application-Cache eines Dokuments repräsentiert.
Cache aktualisieren
// Cache-Objekt ermitteln cache = window.applicationCache; // Wenn der Cache mit dem Update fertig ist ... if (cache.status == cache.UPDATEREADY) ... // Update manuell anstoßen. Update wird in Zwischenspeicher geschrieben cache.update(); // War das Update erfolgreich, Zwischenspeicher mit Cache austauschen cache.swapCache(); // Weiterarbeiten, wenn Cache wieder in UPDATEREADY-Zustand ist if (cache.status == cache.UPDATEREADY) ...
Listing 7
Außer „UPDATEREADY“ gibt es noch weitere Zustände des Caches:
- UNCACHED = 0
- IDLE = 1
- CHECKING = 3
- DOWNLOADING = 4
- UPDATEREADY = 5
- OBSOLETE = 6
Nach dem Update sollten Sie die Seite noch einmal laden, da das Update erst greift, wenn eine neue Seite aufgerufen wird. Es ist aktuell nicht möglich, dem Cache einzelne Dateien hinzuzufügen oder sie zu entfernen. Dieses Feature soll aber in einer zukünftigen Version des Standards implementiert werden.
Cache Events
Auch der Cache kennt JavaScript-Events, die ausgelöst werden, wenn sich der Application Cache ändert oder beim Update ein Fehler auftritt.
Cache aktualisieren
// Cache-Objekt ermitteln
cache = window.applicationCache;
// Der Eventlistener ruft die Funktion 'cacheUpdatereadyListener' auf, wenn das Update erfolgreich war.
cache.addEventListener('updateready', cacheUpdatereadyListener, false);
// Der Eventlistener ruft die Funktion 'cacheErrorListener' auf, wenn das Update fehlgeschlagen ist.
cache.addEventListener('updateready', cacheErrorListener, false);
Listing 8
Weitere Events sind „onchecking“, „onerror“, „onnoupdate“, „ondownloading“, „onprogress“, „onupdateready“, „oncached“, „onobsolet“.
Fazit
Mit den hier vorgestellten Techniken ist es möglich, Webapplikationen zu bauen, die sich fast nicht mehr von richtigen Applikationen unterscheiden. Mit dem Offline Application Cache und dem Offline Data Storage fallen zudem die Nachteile normaler WebApps wie die zwingende Verfügbarkeit eines Netzzugangs oder die Latenz durch das Laden der nächsten Seite weg.
| Alle Artikel dieser Serie: | |
| Teil 1 (t3n Nr. 13) | Websites für das iPhone optimieren |
| Teil 2 (t3n Nr. 14) | Eine iPhone-Applikation entwickeln (Design und iUI) |
| Teil 3 (t3n Nr. 16) | iPhone-spezifische Features nutzen (CSS Transitions/Transformations, GPS) |
| Teil 4 (t3n Nr. 17) | Offline-Datenbankenanbindung (mit SQLite) |
Alexander Ebner arbeitet als TYPO3-Developer bei einem Münchner Reiseveranstalter. Als Entwickler setzt er seit Jahren auf PHP/MySQL und lernte dadurch auch TYPO3 als CMS kennen und schätzen.
Links und Literatur
Softlink 2413- Listings: Alle Listings des Artikels als zip-File
von Howto: Offline-Datenbank für die eigene… 22.02.2010 (08:51Uhr) 1.
[...] Artikel aus t3n Nr. 17, wie man sie für seine eigene iPhone-Webapp nutzt. Der Artikel ist nun im Heftarchiv verfügbar. t3n Nr. 17 kann man zudem in unserem Shop bestellen.Ads_BA_AD('CAD2'); var pf_id = "1725617"; [...]
von Linkhub – Woche 09-2010 « pe… 07.03.2010 (17:48Uhr) 2.
[...] Offline-Datenbanken für die eigene Webanwendung. [...]