CSS, HTML und Javascript mit {stil}

HTML Manifest: Application Cache

Offline – HTML manifest

HTML5 Manifest und Application Cache sind die Grundlage für Web-Anwendungen oder kurz »Apps«, die sich besser an Desktop-Anwendungen anlehnen. Sie stellen sicher, dass Webseiten auch dann erreichbar sind, wenn der Benutzer nicht mit dem Internet verbunden ist.

  • Mit einem Application Cache kann der Benutzer auch offline durch die Seiten navigieren,
  • wird die Zugriffszeit auf die Seiten kürzer, da die Resourcen lokal gespeichert sind,
  • werden die Server entlastet.

Die Vorbereitungen sind minimal. Auf dem Server muss eine .appcache-Datei (vormals mit der Endung .manifest) angelegt werden.

Vorbereitungen für HTML Manifest

Vorsichtshalber kann die .htaccess-Datei den Dateityp .appcache mit AddType text/cache-manifest .appcache verankern. Die modernen Server erkennen den Dateityp, auch wenn der Mimetype nicht vom Server unterstützt wird.

Das HTML-Tag der Seite braucht ein zusätzliches Attribut "manifest". Der Wert des manifest-Attributs ist die URL mit der appcache-Datei.

In der Appcache-Datei muss als erste Zeile CACHE MANIFEST stehen. Nach CACHE: werden die Resourcen aufgelistet, die in den lokalen Cache des Benutzers übernommen werden sollen.

index.html
<!DOCTYPE html>
<html lang="de" manifest="webstorage.manifest">
…
</html>
webstorage.appcache
CACHE MANIFEST

CACHE:
index.html
branding.png
prettyphoto.jpg
style.css
script.js

Jede einzelne Resource, die auf der Seite angesprochen wird, muss in den Appcache eingetragen werden. Fehlt eine Resource, z.B. weil prettyphoto.jpg gelöscht wurde, kann der Appcache evtl. nicht zur Verfügung stehen und das Laden der Seite ohne Internet-Verbindung scheitert.

.htaccess
AddType text/cache-manifest .appcache

appcache-Datei

Das Cache Manifest kann weiter detailliert werden:

# 2016-01-22 v0.1
# Daten, die gecached werden sollen
CACHE: 
/style.CSS
/branding.png
/script.js
		
# Seiten, die nur online genutzt werden können
NETWORK:
		
# Statische Seiten, wenn eine Anwendung nicht erreichbar ist
FALLBACK:
/static.html
/logo.png 
/logo-offline.png

Agressiver App-Cache

Mit dem Cache-Manifest speichert der Browser die Seite lokal. Das Cache-Manifest wird also erst nach dem Abschluss der Entwicklung und der Tests eingesetzt.

Eines Tages ist es soweit: Die Webseite wird geändert. Da der Manifest-Cache hartnäckig ist, läßt er sich sowohl in Safari als auch in Firefox nicht ohne Weiteres auffrischen. Änderungen an der Webseite werden nicht angezeigt.

Wenn die Manifest-Datei geändert wird oder Fehler aufweist, geben die Browser nach und leeren das Manifest aus dem Cache. Manifest-Datei also einmal leeren – dann zweimal ein Refresh – dann sollten Änderungen wieder angezeigt werden. Für erneute Tests wird das Manifest-Attribut natürlich aus dem html-Tag entfernt.

Das spezielle window-Objekt window.ApplicationCache gibt einem Script Zugriff auf den Application Cache des Browsers.

window.applicationCache.update(); // versucht, den Application Chache aufzufrischen
window.applicationCache.status    // Aufgefrischt?
window.applicationCache.swapCache // neuen Cache einspielen

Nach dieser Prozedur ist der Cache zwar aufgefrischt, aber der Benutzer hat weiterhin die alte Version der Seite. Die Seite muss im Browser neu geladen werden. Dem Benutzer kann man diese Aktion nicht überlassen – er kann schließlich nicht sehen, dass seine Seite oder seine Anwendung neue Inhalte aufweist. Ein EventListener muss feststellen, dass ein neuer Cache bereit gestellt und geladen wurde und die Seite neue laden:


Das alert sollte man dem Besucher ersparen, aber die Seite per Javascript neu laden.