iKnowNow: Die Offline-Fähigkeiten von HTML5 nutzen

01.16.2012

Eine meiner aufregenderen Aufgaben bei DOOR3 ist die Forschung und Entwicklung, auch bekannt als *“Will! Mein Chef gibt mir dann die Beschreibung einer neuen Technologie und ich erstelle einen ‘Proof of Concept’ (POC), dass sie funktioniert, oder einen Bericht, der erklärt, dass sie nicht funktioniert.

Erst letzten Freitag wurde ich über die Offline-Funktionen von HTML5 informiert, die manchmal auch als “Application Caching” bezeichnet werden. Der Trend im Web geht in letzter Zeit dahin, Dinge als “Anwendungen” zu bezeichnen, wahrscheinlich wegen der Verbreitung von “nativen” OS-Apps, aber auch, weil das Web jetzt tatsächlich Dinge tut, anstatt sie nur zu zeigen, also Web 2.0.

Nehmen wir zum Beispiel an, ein Kunde möchte eine Anwendung für sein Unternehmen entwickeln, aber er möchte keine “nativen” Betriebssystemanwendungen entwickeln. Daher möchte er Webanwendungen, weil sie auf jedem webfähigen Gerät ausgeführt werden können. Der Kunde möchte aber auch, dass die Anwendungen offline funktionieren. Hier kommt der neue Webentwicklungsstandard -HTML5- und seine fantastischen neuen Anwendungs-Caching-Fähigkeiten ins Spiel.

Die HTML5-Zwischenspeicherung funktioniert folgendermaßen: In den ersten Zeilen Ihrer .html-Datei definieren Sie eine “Cache-Manifest”-Datei. Diese Cache-Manifest-Datei ist einfach eine Liste anderer Dateien, die Sie für die Offline-Nutzung zwischenspeichern möchten und die Sie nicht benötigen.

Beispiel (in der .html-Datei):

`<!DOCTYPE html>

` Die ZWEITE Zeile dieser Datei definiert das Manifest als test.manifest. Soooooo sollten Sie diese Datei besser erstellen. Beispiel (in der .manifest-Datei): `CACHE MANIFEST CACHE: index.html index2.html Welpen-Video.mp4 Steinsport-Schuh.PNG Steinsport-Schuh-2.PNG` **Was ist da drin?* Beginnen Sie die Datei mit der Zeile CACHE MANIFEST. Das ist sehr wichtig. Seriell. Die Zeile, in der nur "CACHE:" steht, ist ein Abschnittskopf, der besagt, dass alle Dinge in diesem Abschnitt zwischengespeichert werden sollen. In einem so einfachen Manifest wie diesem könnte man diese Zeile jedoch weglassen, und es würde trotzdem funktionieren. Listen Sie die Dateien auf, die für die Offline-Anzeige erforderlich sind. In diesem Fall handelt es sich um eine weitere .html-Datei, ein Video und ein paar Bilder. Denken Sie daran, dass es sich hier nur um einen POC handelt; er muss nicht schön sein, bis er für den Kunden sichtbar ist. **Optional:** Sie können die Dateien, die Sie nicht zwischenspeichern wollen, in einem Abschnitt mit dem Titel "NETWORK:" ablegen Sie können auch die Seite, die Sie anstelle der Hauptseite zwischenspeichern möchten, in einen Abschnitt mit der Überschrift "FALLBACK:" aufnehmen **WICHTIG!!!!** 1. Dies ist ein neuer Inhaltstyp. Ihr Apache-Server ist wahrscheinlich nicht für diesen Typ eingerichtet. Wahrscheinlich müssen Sie die folgende Zeile irgendwo in Ihrer .htaccess-Datei hinzufügen: `AddType text/cache-manifest .manifest 2. Der Server ist nicht so eingestellt, dass er das Cache-Manifest stundenlang aktualisiert oder wenn es geändert wird. Wenn Sie eine Datei ändern, die im Cache gespeichert ist, sollten Sie besser Ihre Manifestdatei ändern, um eine Aktualisierung auszulösen. Andernfalls kann es passieren, dass Sie sich in der Zwischenzeit die alte Version ansehen und sich die Haare aus dem Ohrläppchen reißen. Dies ist eine sehr oberflächliche Darstellung der Grundlagen, die ich für meinen POC benötigte. Weitere Informationen finden Sie in Ihrer örtlichen Bibliothek oder unter: [http://diveintohtml5.info/offline.html](http://diveintohtml5.info/offline.html)