Offline Webapp Teil 3: Das HTML5 Cache Manifest

Im dritten und letzten Teil der Serie Offline-Webanwendungen gehen wir auf das HTML5 Cache Manifest mit Visual Studio 2013 ein. In Teil 1 wird das Grundgerüst für die responsive Webseite erstellt und in Teil 2 der Tutorialreihe, wird das localStorage Objekt aus HTML5 in die Anwendung eingebaut.

Der gesamte Sourcecode für die Webanwendung ist auch auf Githup zu finden.

Offline Webseite HTML5

Wie in diesem Blogbeitrag genauer beschrieben, bietet HTML5 die Möglichkeit Daten im Browser zu speichern. Außerdem haben Webbrowser standardmäßig eine Caching-Funktionalität, die Dateien am Client zur rascheren Wiederverwendung abspeichern können. Da diese Caching-Funktionalität leider oft von unterschiedlichen Faktoren abhängig ist und nicht immer ganz zuverlässig funktioniert, wurde in HTML5 das Cache-Manifest eingeführt, um Dateien offline verfügbar zu machen. Daraus resultieren drei wesentliche Vorteile:

1) Funktionalität der Webapp offline bereitstellen

2) Höhere Geschwindigkeit der Webanwendung

3) Auslastung des Servers verringern

Um das HTML5 Cache-Manifest verwenden zu können, müssen in unserem Projekt ein paar Vorkehrungen getroffen werden, die im folgenden kurz beschrieben werden.

Alle Webseiten, die offline zur Verfügung gestellt werden, müssen im <html> Tag, das App-Manifest deklarieren:

<!DOCTYPE HTML>
<html manifest="fuhrpark.appcache">
...
</html>


Weiters muss eine App-Manifest Datei mit der Endung .appcache angelegt werden. Diese Datei kann im Root Verzeichnis der Anwendung abgelegt werden und ist grundlegend folgendermaßen aufgebaut:

CACHE MANIFEST
# Cachbare Dateien angeführt werden
/Default.html
/js/script.js
/css/style.css
# Nicht cachbare Dateien
NETWORK
# Fallback Seite
FALLBACK
/offline.html


In einem dritten Schritt muss noch der IIS Server in Visual Studio konfiguriert werden, denn es ist wichtig, dass die App-Manifest Datei mit dem korrekten Medien-Typ “text/cache-manifest” beschrieben wird. In unserem Beispiel muss der folgende Code in die Web.config Datei eingefügt werden.

  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".appcache"      mimeType="text/cache-manifest" />
    </staticContent>
  </system.webServer>


Voilà, alle Schritte, um eine Webseite Offline verfügbar zu machen, wurden erfüllt. Abschließend kann die Webseite z.B. in Google Chrome mit RIPPLE Plugin auf die Anwendung mit mobilen Endgeräten getestet werden.

Offline Webapp Visual Studio

Den gesamten Source Code können Sie von Githup beziehen. Ein lauffähiges Beispiel dieser Anwendung finden Sie auf diesem Link. Viel Spaß beim Entwickeln!

Kommentare sind geschlossen