© best_vector/Shutterstock.com
Teil 2: Offlinefähige Webanwendungen mit HTML5 und dem Application Cache

Manifest your Cache


HTML5 und JavaScript geben dem Entwickler die Möglichkeit, Daten und auch Programmdateien im Browser zu speichern. Das erlaubt die Umsetzung offlinefähiger Webanwendungen, die gerade im Umfeld mobiler Geräte eine spannende Alternative zu nativen Entwicklungen darstellen, zumal sie plattformunabhängig betrieben werden können.

Der erste Artikel dieser zweiteiligen Serie hat beschrieben, wie Webanwendungen lokal Daten vorhalten können. Allerdings ist das nur die halbe Miete, wenn es darum geht, Webanwendungen offlinefähig zu gestalten, zumal auch einzelne HTML-Seiten inklusive der darin eingebundenen Elemente, wie JavaScript- und CSS-Dateien oder Bilder, lokal abzulegen sind. Genau in diese Kerbe schlägt das Konzept des HTML5-Anwendungscaches, kurz AppCache. Es sieht vor, dass der Entwickler ein so genanntes Cache-Manifest bereitstellt. Dieses informiert den Browser darüber, welche Elemente lokal vorzuhalten sind, wobei er dafür per Definition max. 5 MB verwenden darf.

Aufbau eines Cache-Manifests

Ein Beispiel für solch ein Manifest bietet Listing 1. Es handelt sich dabei um eine Textdatei, die mit den Worten CACHE MANIFEST eingeleitet wird, Kommentarzeilen beginnen mit einer Raute. Abgesehen davon besteht die Datei aus drei Sektionen: Die Sektion CACHE gibt an, welche Dateien der Browser lokal vorhalten soll. Die Einträge unter FALLBACK bilden hingegen Onlineressourcen auf Offlineressourcen ab. Das betrachtete Beispiel definiert somit, dass im Offlinemodus die Datei offline.html als Ersatz für index.html heranzuziehen ist. Die Sektion NETWORK gibt Dateien an, die nicht zwischengespeichert werde dürfen.

Listing 1: Ein Cache-Manifest gibt an, welche Dateien lokal zu speichern sind

CACHE MANIFEST # Kommentar CACHE: /pegel /scripts/jquery.mobile-1.1.0-rc.1.min.css /scripts/jquery-1.7.1.min.js /scripts/jquery.mobile-1.1.0-rc.1.min.js FALLBACK: /index.html /offline.html NETWORK: /api/hotels

Zum Einbinden eines Cache-Manifests sieht HTML5 das Attribut manifest für das html-Tag vor. Per Definition hat der Webserver die auf diesem Weg angegebene Datei unter Verwendung des Inhaltsyps text/cache-manifest auszuliefern. Um den jeweiligen Webserver dazu zu bringen, ist mitunter ein entsprechender Konfigurationseintrag vonnöten (Listing 2).

Listing 2

<!DOCTYPE HTML> <html manifest="pegel.appcache"> [...] </html>

Möchte der Entwickler den Browser dazu bewegen, Ressourcen, die er im AppCache vorhält, erneut zu laden, muss er das Cache-Manifest aktualisieren, z. B. indem ...

Neugierig geworden?

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang