Web-App offline speichern: der Offline Application Cache

In den meisten Anwendungsfällen möchte man eine Web-App ebenso wie eine native App auch, offline nutzen, also ohne per WLAN oder Mobilfunk mit dem Internet verbunden zu sein. Native Apps tun sich da leicht, werden diese ja schon vor Verwendung heruntergeladen und auf dem Smartphone gespeichert.

Die Web App funktioniert super, solange man online ist – sobald jedoch die Verbindung unterbrochen ist, kann sie nicht mehr geöffnet werden. Um dieses Problem zu beheben, ist es notwendig, dem Browser die Anweisung zu geben, die Web-App mit allen benötigten Inhalten herunterzuladen in den sogenannten „application cache“.
Beim nächsten Öffnen der URL der Website, also der Web-App, werden die Inhalte dann direkt aus dem Cache geladen.

Das Cache Manifest

Die Technik dazu ist sehr simpel: man nehme ein einfaches Textfile, nenne es xyz.manifest und lege es ins Stammverzeichnis der Web App. In diesem Manifest-File werden dann nach der Einleitungszeile „CACHE MANIFEST“ einfach formlos alle Ressourcen eingetragen, die lokal gespeichert werden sollen; eine pro Zeile, also z.B.


CACHE MANIFEST
index.html
styles/ios.css
js/jquerypluginxy.js
img/icon.png

Das Cache Manifest einbinden

Im nächsten Schritt müssen wir unserer index.html mitteilen, dass es ein cache manifest gibt. Dazu wird im HTML Tag das Attribut manifest mit dem entpsrechenden Filenamen gesetzt:


<html manifest="xyz.manifest" ...>

Nun müssen wir nur noch dem Browser explizit mitteilen, dass es den content type „text/cache-manifest“ gibt, damit dieses File für den Browser verständlich ausgeliefert wird. Dazu müssen wir lediglich in der .htaccess die entsprechende Zeile ergänzen:


AddType text/cache-manifest .manifest

Falls noch keine htaccess vorhanden ist, einfach per Texteditor anlegen und als .htaccess speichern.

Differenzierung zwischen Offline- und Online-Inhalten

Alle Inhalte, die der Browser laut manifest file lokal speichern soll, werden von nun ab bei jedem Reload der Seite aus dem Cache geholt.
Oft ist es jedoch notwendig, aktuelle Daten trotz offline Funktionalität aus dem Web nachzuladen oder – falls dies nicht möglich sein sollte – einen Fallback anzuzeigen.

Dazu kann man im manifest file NETWORK definieren:


NETWORK:
data/updatingJSONdata.js

FALLBACK:
data/ data/standardJSONdata.js

Die Fallback-Zeile bedeutet, dass für alle Inhalte unter „data“ die nicht aus dem Netzwerk geladen werden können die Inhalte des nachfolgend angegebenen Files gelten sollen.

Aktualisierungen an Offline-Files erzwingen

Nach der Einrichtung des Offline-Caches kommt es allerdings zu dem unschönen Phänomen, dass beim Austausch eines Files auf der „Live-Seite“ alle Besucher, die die WebApp bereits geöffnet hatten, weiterhin das alte File aus dem Cache angezeigt bekommen. Denken Sie etwa an das optische Update eines Logos. Da dieses File grundsätzlich nicht geändert wird, möchte man es auch nicht im Bereich NETWORK des Cache Manifestes notieren.
Für diesen Fall hat sich ein Änderungsstatus in dem Manifest File etabliert. Sobald sich das Cache-Manifest selbst ändern, prüft der Browser auch den Stand aller offline gespeicherten Inhalte auf Aktualität.


CACHE MANIFEST
#v3.1 vom 04.06.2014
index.html
...

Möglichkeiten und Grenzen des App Cache einer offline Web App

Die Grenzen für den App Cache sind leider etwas enger gesetzt, als für native Apps.

  • Eine Webapp kann nicht mehr als 5 MB an Files speichern
  • Die Lebensdauer des Cache ist grundsätzlich nicht beschränkt. Selbst wenn der User den „Verlauf“ oder „Cookies und Daten“ unter Einstellungen löscht, bleibt der App Cache erhalten
  • Ist jedoch der gesamte Speicher des Endgeräts aufgebraucht, verdrängt aktiver Cache älteren Cache – eine absolute Abrufsicherheit der gechachten Daten gibt es also nicht.
Dieser Beitrag wurde unter HTML5 veröffentlicht. Setze ein Lesezeichen auf den Permalink.

3 Antworten auf Web-App offline speichern: der Offline Application Cache

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert