In HTML5 gibt es die Möglichkeit den Browser zu instruieren, bestimmte Elemente der Webseite in seinen lokalen Cache zu speichern. Diese im Cache abgelegten Elemente sind dann ohne Netzzugriff verfügbar. Dies bringt 3 große Vorteile:
- Der Browser kann auch ohne physikalischen Internetzugang auf diese Elemente zugreifen. Wenn die gesamte Page gechacht wird ist diese somit komplett offline verfügbar
- Da der Browser diesen Cache auch anspricht, wenn Netzzugriff bestehen würde, fühlt sich die HTML Seite schneller an, da weniger Requests über die Leitung gehen. Für Bilder aus dem Cache reicht ein einfaches Laden - für Bilder übers Netzt muss ein kompletter HTTP-Request abgesetzt werden.
- Der ausliefernde WebServer wird entlastet, denn Clients die den Cache nutzen fragen Ressourcen nur einmal an.
Genutzt wird dieser neue Cache vor allem für mobile Anwendungen, denn hier ist die Bandbreite oft recht beschränkt. So lässt es sich erreichen, dass sich diese gechachten Seiten von der Reaktion anfühlen wie 'echte' Apps fürs iPhone oder Android-Phones.
Beispiel für die Nutzung des Caches
Um dem Browser mitzuteilen, dass man Elemente gerne in den Cache schreiben möchte, muss das umschließende Tag der Weibseite mit folgendem Attribut erweitert werden:
<html manifest="cache.manifest">
Wenn der Browser diese Anweisung findet lädt er zuerst die Datei 'cache.manifest' herunter und speichert dann alle dort angegebenen Ressourcen im lokalen Cache - von diesem Zeitpunkt an sind somit für die angegebenen Elemente keine Netzzugriffe mehr nötig.
Hier ein einfaches Beispiel für solche ein Manifest:
CACHE MANIFEST
# Version 0.1
CACHE:
index.html
style/main.css
script/script.js
img/header.jpg
NETWORK:
*.cgi
*.php
Dieses Manifestverwendet die beiden wichtigsten Bereiche, die für eine manifest-Beschreibung nötig sind:
CACHE MANIFEST
Einleitende 'Überschrift' für den Browser - muss angegeben werden
CACHE:
Alle unter diesem Attribut angegebenen Ressourcen werden vom Webbrowser gecacht und nicht mehr über dieLeitung nachgeladen. Hier sind keine Wildcards möglich - jede Ressource muss direkt angegeben werden.
NETWORK:
Alle hier angegebenen Elemente und Ressourcen werden vom Webbrowser NIE im Cache gehalten - diese werden also immer über das Netz angesprochen. Hier sind auch Wildcards möglich.
Kommentare werden über einen vorgestellten Hash angegeben, wie im Bsp: #Version
Neuladen erzwingen
Es kann natürlich passieren, dass man einem Webbrowser mitgeteilt hat, er solle doch die Header-grafik header.jpg in seinem Cache vorhalten, so dass diese nicht jedes mal neu geladen werden muss. Aber was wenn sich diese Header-Grafik nun ändert... von grün auf rot...
Der Webbrowser wird dies erst mal nicht merken - denn in seinem Cache ist die Grafik immer noch grün.
Hier gibt es jedoch einen relativ einfachen Weg dem Browser mitzuteilen, er solle doch einfach nochmal seinen Cahche aktualisieren - denn jeder Browser führt beim Laden der Seite ein 'update' Event aus. In diesem Update-Event versucht der Browser das cache manifest zu laden (nur das manifest selbst - nicht die angegebenne Ressourcen) und vergleicht es mit dem lokal gespeicherten. Wenn sich Änderungen ergeben haben wird der Cache invalide und alle Ressourcen werden neu geladen.
Wir können also um den Header auszutauschen diesen umbenennen, von header.jpg auf header_neu.jpg (was aber auch dazu führt, dass wir alle Referenzen auf diesen Header im HTML-Code anpassen müssen) oder wir zählen einfach unseren enthaltenen Versions-Kommentar hoch
#Version 0.1
wird dann zu
#Version 0.2
Dies reicht schon aus um dem Browser mitzuteilen, er solle doch einfach mal neu laden :-)
Webserver Konfiguration
Die Webbrowser interpretieren eine manifest-Datei nur dann korrekt, wenn sie über den richtigen MIME-Type ausgeliefert wird. Hierzu muss der Webserver so konfiguriert werden, dass es dieses Manifest als
text/cache-manifest
ausliefert. Wie das im jeweilligen Webserver (Apache, IIS, ...) gemacht wird findet sich in der Doku. Auch Google hilft hier bestimmt gerne weiter.
Browser-Verhalten
Unterstütz wird das HTML5 Feature der offline application durch:
- Firefox ab 3.6
- Safari
- Opera
- Crome
Der Internet-Exporer unterstützt dieses Feature aktuell NICHT!
Je nach Browser wird der Nutzer darüber informiert, dass eine bestimmte Webseite Daten im Cache ablegen möchte - so fragt FireFox nach:
"Diese Webseite möchte Daten für die Verwendung im Offline-Modus speicher .... Ja / Nein / Jetzt nicht"
Google Chrome speichert einfach ;-)
--- Links ---
http://www.w3.org/TR/html5/offline.html
