Wäre es nicht verdammt cool, wenn man die eigene Web App auch, wie eine native App, offline zur Verfügung stellen könnte, ohne das man ständig eine Verbindung mit dem Internet zur Nutzung benötigt?
Für alle, die jetzt „Jaaaaa“ schreien, habe ich gut Nachrichten: Es ist möglich!
Es gibt dazu extra den sogenannten Offline Application Cache, der genau dies ermöglicht. Und das Beste daran ist, dass es gar nicht so kompliziert ist.
Das Cache Manifest
Zunächst benötigt man das Cache Manifest. Dabei handelt es sich um eine einfache Textdatei, die man unter beliebiger Bezeichnung, zum Beispiel ustrechner.manifest speichert und mit folgendem Inhalt füllt:
CACHE MANIFEST
index.html
static/css/main.a900eeda.css
static/css/main.a900eeda.css.map
js/main.feb84631.js
js/main.feb84631.js.map
Das Cache Manifest beinhaltet alle Dateien, die ich offline zur Verfügung stellen möchte (hier am Beispiel der Dateien meines Umsatzsteuerrechners).
Anschließend muss die .manifest-Datei in eure HTML-Datei eingebunden werden. Das sieht dann in meinem Beispiel wie folgt aus:
<html manifest="ustrechner.manifest" lang="en">...
Content-Type definieren
Dies allein reicht aber noch nicht aus, wir müssen nun noch dem Browser den Content-Type text/cache-manifest bekanntgeben. Dazu legt ihr folgenden Eintrag in euerer .htaccess-Datei an:
AddType text/cache-manifest .manifest
Ab sofort werden beim erstmaligen Aufruf der Web App die im Cache Manifest eingetragenen Dateien im Offline Application Cache gespeichert und auch zukünftig bei jedem Reload aus diesem direkt geladen.
Limitierung des Application Offline Cache
Natürlich gibt es bei dieser Methode der Offline-Verfügbarkeit die ein oder andere Limitierung:
Die maximale Speicherkapazität an Offline-Dateien variiert je nach Browser. Manche bieten lediglich 5 MB, andere deutlich mehr.
Ist der gesamte Speicher eines Endgerätes am Ende, so verdrängt der aktive Cache den gespeicherten, älteren Cache aus dem Speicher.
Updates erzwingen
Wer bis hierher nun aufmerksam gelesen hat, wird festgestellt haben, dass ab sofort alle Daten nur noch aus dem Offline Application Cache gezogen werden. Was aber, wenn ich ein Update meiner Web App, zum Beispiel Austausch eines Logos, Aktualisierung einer Funktionion, etc. bereitstellen möchte? Wie bekommt der Nutzer die neuen Dateien?
Auch hierfür gibt es eine mehr als simple Lösung. Hierzu muss lediglich das Cache Manifest aktualisiert werden. Dazu hat es sich etabliert einfach den Änderungsstatus mit in das Manifest aufzunehmen. Zum Bespiel so:
CACHE MANIFEST
#Version 2.1.1 on 26.09.2016
index.html
static/css/main.a900eeda.css
static/css/main.a900eeda.css.map
js/main.feb84631.js
js/main.feb84631.js.map
Sobald sich also etwas im Cache Manifest geändert hat, prüft der Browser dieses auf Aktualität und lädt die neuen Dateien in den Cache.
So einfach stellt ihr eure kleine Web App offline zur Verfügung.