HTML Manifest und Application Cache

Web App: Webseiten für den Offline-Betrieb speichern

Mit dem HTML Manifest und Application Cache sind Webseiten auch dann erreichbar sind, wenn der Benutzer nicht mit dem Internet verbunden ist.

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 Ressourcen aufgelistet, die in den lokalen Cache des Benutzers übernommen werden sollen.

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

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

Jede einzelne Ressource, die auf der Seite angesprochen wird, muss in den Appcache eingetragen werden. Fehlt eine Ressource, 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:

webstorage.appcache
# 2018-02-12 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

Webfonts im App-Cache

Zwar können auch Fonts in den App-Cache der Manifest-Datei einbezogen werden, aber wenn die Seite unter https läuft, müssen Daten aus externen Domains draußen bleiben.

webstorage.appcache
# 2018-02-12 v0.1
# Daten, die gecached werden sollen
CACHE: 
/style.CSS
/branding.png
/script.js
https://fonts.googleapis.com/css?family=Carrois+Gothic
/fonts/ptc55f-webfont.woff2

Fontdateien, die in derselben Domain zur Verfügung gestellt werden, müssen wie alle anderen externen Resourcen in der Appcache-Liste aufgeführt werden.

Hartnäckiger 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 Application Cache ausgesprochen beharrlich ist, läßt er sich in keinem Browser ohne Weiteres auffrischen. Änderungen an der Web App 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 (u.U. Tab schließen und öffnen) – dann sollten Änderungen durchschlagen. 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.

Web App mit Chrome / Safari testen

Mit Chrome läßt sich der Appcache einer Web App während der Tests einfach löschen. In die URL-Zeile von Chrome alle Seiten mit Application Cache anzeigen:

chrome://appcache-internals/

Remove item und weg ist der App Cache.

Safari hat war Cache-Speicher löschen unter den Entwickler-Tools, aber die Seite muss ein zweites Mal neu geladen werden, am besten sogar das Browserfenster schließen und Seite in einem neuen Browserfenster öffnen.