Erste Schritte zur Verwendung des Anwendungscaches

Einführung

Es wird immer wichtiger, dass webbasierte Anwendungen auch offline zugänglich sind. Ja, alle Browser können Seiten und Ressourcen für lange Zeit im Cache speichern, wenn sie dazu aufgefordert werden. Der Browser kann jedoch jederzeit einzelne Elemente aus dem Cache entfernen, um Platz für andere Dinge zu schaffen. Mit der ApplicationCache-Schnittstelle von HTML5 werden einige der Probleme behoben, die beim Offline-Zugriff auftreten. Die Verwendung der Cache-Schnittstelle bietet Ihrer Anwendung drei Vorteile:

  1. Offline-Browsing: Nutzer können Ihre Website auch offline vollständig nutzen.
  2. Geschwindigkeit: Die Ressourcen stammen direkt vom Laufwerk, es gibt keine Zugriffe auf das Netzwerk.
  3. Ausfallsicherheit: Wenn Ihre Website wegen „Wartungsarbeiten“ ausfällt (d. h., jemand hat versehentlich alles kaputt gemacht), können Ihre Nutzer die Offlineversion aufrufen.

Mit dem Anwendungscache (AppCache) können Entwickler angeben, welche Dateien der Browser im Cache speichern und für offline zugreifende Nutzer verfügbar machen soll. Ihre App wird geladen und funktioniert auch dann ordnungsgemäß, wenn der Nutzer die Schaltfläche zum Aktualisieren drückt, während er offline ist.

Die Cache-Manifestdatei

Die Cache-Manifestdatei ist eine einfache Textdatei, in der die Ressourcen aufgeführt sind, die der Browser für den Offlinezugriff im Cache speichern soll.

Auf eine Manifestdatei verweisen

Wenn Sie den App-Cache für eine App aktivieren möchten, fügen Sie das Manifestattribut in das html-Tag des Dokuments ein:

<html manifest="example.appcache">
  ...
</html>

Das manifest-Attribut sollte auf jeder Seite Ihrer Webanwendung enthalten sein, die im Cache gespeichert werden soll. Der Browser speichert eine Seite nicht im Cache, wenn sie das Attribut manifest nicht enthält, es sei denn, es ist in der Manifestdatei ausdrücklich aufgeführt. Das bedeutet, dass jede Seite, auf die der Nutzer zugreift und die ein manifest enthält, dem Anwendungscache implizit hinzugefügt wird. Daher müssen nicht alle Seiten in Ihrem Manifest aufgeführt werden. Wenn eine Seite auf ein Manifest verweist, kann nicht verhindert werden, dass diese Seite im Cache gespeichert wird.

Die URLs, die vom Anwendungscache gesteuert werden, finden Sie in Chrome unter about://appcache-internals/. Hier können Sie Caches leeren und sich die Einträge ansehen. In Firefox gibt es ähnliche Entwicklertools.

Das Attribut manifest kann auf eine absolute URL oder einen relativen Pfad verweisen. Eine absolute URL muss sich jedoch im selben Ursprung wie die Webanwendung befinden. Eine Manifestdatei kann eine beliebige Dateiendung haben, muss aber mit dem richtigen MIME-Typ bereitgestellt werden (siehe unten).

<html manifest="http://www.example.com/example.mf">
  ...
</html>

Eine Manifestdatei muss mit dem MIME-Typ text/cache-manifest bereitgestellt werden. Möglicherweise müssen Sie Ihrem Webserver oder Ihrer .htaccess-Konfiguration einen benutzerdefinierten Dateityp hinzufügen.

Wenn Sie diesen MIME-Typ beispielsweise in Apache bereitstellen möchten, fügen Sie Ihrer Konfigurationsdatei diese Zeile hinzu:

AddType text/cache-manifest .appcache

Oder in der Datei „app.yaml“ in der Google App Engine:

- url: /mystaticdir/(.*\.appcache)
  static_files: mystaticdir/\1
  mime_type: text/cache-manifest
  upload: mystaticdir/(.*\.appcache)

Diese Anforderung wurde vor einiger Zeit aus der Spezifikation entfernt und ist in den neuesten Versionen von Chrome, Safari und Firefox nicht mehr erforderlich. In älteren Browsern und IE11 ist der Mime-Typ jedoch erforderlich.

Struktur einer Manifestdatei

Das Manifest ist eine separate Datei, auf die Sie über das Manifest-Attribut im HTML-Element verweisen. Ein einfaches Manifest sieht in etwa so aus:

CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js
http://cdn.example.com/scripts/main.js

In diesem Beispiel werden vier Dateien auf der Seite im Cache gespeichert, die diese Manifestdatei angeben.

Beachten Sie dabei Folgendes:

  • Der String CACHE MANIFEST ist die erste Zeile und erforderlich.
  • Dateien können aus einer anderen Domain stammen
  • Einige Browser beschränken das Speicherkontingent, das für Ihre App verfügbar ist. In Chrome verwendet AppCache beispielsweise einen gemeinsamen Pool von VORÜBERGIGEN Speicherplatz, den andere Offline-APIs gemeinsam nutzen können. Wenn Sie eine App für den Chrome Web Store entwickeln, wird diese Einschränkung durch die Verwendung der unlimitedStorage aufgehoben.
  • Wenn das Manifest selbst einen Fehler 404 oder 410 zurückgibt, wird der Cache gelöscht.
  • Wenn das Manifest oder eine darin angegebene Ressource nicht heruntergeladen werden kann, schlägt das gesamte Cache-Update fehl. Der Browser verwendet bei einem Fehler weiterhin den alten Anwendungscache.

Sehen wir uns ein komplexeres Beispiel an:

CACHE MANIFEST
# 2010-06-18:v2

# Explicitly cached 'master entries'.
CACHE:
/favicon.ico
index.html
stylesheet.css
images/logo.png
scripts/main.js

# Resources that require the user to be online.
NETWORK:
*

# static.html will be served if main.py is inaccessible
# offline.jpg will be served in place of all images in images/large/
# offline.html will be served in place of all other .html files
FALLBACK:
/main.py /static.html
images/large/ images/offline.jpg

Zeilen, die mit einem # beginnen, sind Kommentarzeilen, können aber auch einen anderen Zweck erfüllen. Der Cache einer Anwendung wird nur aktualisiert, wenn sich die Manifestdatei ändert. Wenn Sie beispielsweise eine Bildressource bearbeiten oder eine JavaScript-Funktion ändern, werden diese Änderungen nicht neu im Cache gespeichert. Sie müssen die Manifestdatei selbst ändern, um den Browser zum Aktualisieren der im Cache gespeicherten Dateien aufzufordern.

Verwenden Sie keinen fortlaufend aktualisierten Zeitstempel oder Zufallsstring, um Aktualisierungen jedes Mal zu erzwingen. Das Manifest wird während eines Updates zweimal geprüft, einmal zu Beginn und einmal, nachdem alle im Cache gespeicherten Dateien aktualisiert wurden. Wenn sich das Manifest während der Aktualisierung geändert hat, hat der Browser möglicherweise einige Dateien aus einer Version und andere Dateien aus einer anderen Version abgerufen. Daher wird der Cache nicht angewendet und der Vorgang wird später noch einmal versucht.

Auch wenn der Cache aktualisiert wird, verwendet der Browser diese Dateien erst, wenn die Seite aktualisiert wird. Das liegt daran, dass Updates erst nach dem Laden der Seite aus der aktuellen Version des Caches erfolgen.

Ein Manifest kann drei verschiedene Abschnitte haben: CACHE, NETWORK und FALLBACK.

CACHE:
Dies ist der Standardabschnitt für Einträge. Dateien, die unter dieser Überschrift oder direkt nach der CACHE MANIFEST aufgeführt sind, werden nach dem ersten Download explizit im Cache gespeichert. NETWORK:
Dateien, die in diesem Abschnitt aufgeführt sind, können aus dem Netzwerk stammen, wenn sie nicht im Cache vorhanden sind. Andernfalls wird das Netzwerk nicht verwendet, auch wenn der Nutzer online ist. Hier können Sie bestimmte URLs auf die Zulassungsliste setzen oder einfach „“ eingeben, um alle URLs zuzulassen. Für die meisten Websites ist „“ erforderlich. FALLBACK:
Optionaler Abschnitt, in dem Fallback-Seiten für den Fall angegeben werden, dass eine Ressource nicht zugänglich ist. Der erste URI ist die Ressource, der zweite ist der Fallback, der verwendet wird, wenn die Netzwerkanfrage fehlschlägt oder Fehler auftritt. Beide URIs müssen aus derselben Quelle wie die Manifestdatei stammen. Sie können sowohl bestimmte URLs als auch URL-Präfixe erfassen. Mit „images/large/“ werden Fehler von URLs wie „images/large/whatever/img.jpg“ erfasst.

Im folgenden Manifest wird eine „Allgemeine Seite“ (offline.html) definiert, die angezeigt wird, wenn der Nutzer versucht, im Offlinemodus auf den Stamm der Website zuzugreifen. Außerdem wird angegeben, dass für alle anderen Ressourcen (z.B. auf Remote-Websites) eine Internetverbindung erforderlich ist.

CACHE MANIFEST
# 2010-06-18:v3

# Explicitly cached entries
index.html
css/style.css

# offline.html will be displayed if the user is offline
FALLBACK:
/ /offline.html

# All other resources (e.g. sites) require the user to be online.
NETWORK:
*

# Additional resources to cache
CACHE:
images/logo1.png
images/logo2.png
images/logo3.png

Cache aktualisieren

Sobald eine Anwendung offline ist, bleibt sie im Cache, bis eines der folgenden Ereignisse eintritt:

  1. Der Nutzer löscht den Datenspeicher seines Browsers für Ihre Website.
  2. Die Manifestdatei wird geändert. Hinweis: Wenn Sie eine im Manifest aufgeführte Datei aktualisieren, bedeutet das nicht, dass der Browser diese Ressource noch einmal im Cache speichert. Die Manifestdatei selbst muss geändert werden.

Cache-Status

Das window.applicationCache-Objekt ist Ihr programmatischer Zugriff auf den App-Cache des Browsers. Die Property status ist nützlich, um den aktuellen Status des Caches zu prüfen:

var appCache = window.applicationCache;

switch (appCache.status) {
case appCache.UNCACHED: // UNCACHED == 0
return 'UNCACHED';
break;
case appCache.IDLE: // IDLE == 1
return 'IDLE';
break;
case appCache.CHECKING: // CHECKING == 2
return 'CHECKING';
break;
case appCache.DOWNLOADING: // DOWNLOADING == 3
return 'DOWNLOADING';
break;
case appCache.UPDATEREADY:  // UPDATEREADY == 4
return 'UPDATEREADY';
break;
case appCache.OBSOLETE: // OBSOLETE == 5
return 'OBSOLETE';
break;
default:
return 'UKNOWN CACHE STATUS';
break;
};

Wenn du programmatisch nach Updates für das Manifest suchen möchtest, musst du zuerst applicationCache.update() aufrufen. Dadurch wird versucht, den Cache des Nutzers zu aktualisieren. Dazu muss sich die Manifestdatei geändert haben. Wenn sich applicationCache.status im Status UPDATEREADY befindet, wird durch Aufrufen von applicationCache.swapCache() der alte Cache durch den neuen ersetzt.

var appCache = window.applicationCache;

appCache.update(); // Attempt to update the user's cache.

...

if (appCache.status == window.applicationCache.UPDATEREADY) {
appCache.swapCache();  // The fetch was successful, swap in the new cache.
}
erforderlich.

Die gute Nachricht: Sie können diesen Vorgang automatisieren. Wenn Sie Nutzer auf die neueste Version Ihrer Website aktualisieren möchten, legen Sie einen Listener fest, der das Ereignis updateready beim Laden der Seite überwacht:

// Check if a new cache is available on page load.
window.addEventListener('load', function(e) {

window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
    // Browser downloaded a new app cache.
    if (confirm('A new version of this site is available. Load it?')) {
    window.location.reload();
    }
} else {
    // Manifest didn't changed. Nothing new to server.
}
}, false);

}, false);

AppCache-Ereignisse

Wie Sie vielleicht erwarten, werden zusätzliche Ereignisse zum Überwachen des Cache-Status freigegeben. Der Browser löst Ereignisse für Dinge wie den Downloadfortschritt, die Aktualisierung des App-Caches und Fehlerbedingungen aus. Im folgenden Snippet werden Ereignis-Listener für jeden Cacheereignistyp eingerichtet:

function handleCacheEvent(e) {
//...
}

function handleCacheError(e) {
alert('Error: Cache failed to update!');
};

// Fired after the first cache of the manifest.
appCache.addEventListener('cached', handleCacheEvent, false);

// Checking for an update. Always the first event fired in the sequence.
appCache.addEventListener('checking', handleCacheEvent, false);

// An update was found. The browser is fetching resources.
appCache.addEventListener('downloading', handleCacheEvent, false);

// The manifest returns 404 or 410, the download failed,
// or the manifest changed while the download was in progress.
appCache.addEventListener('error', handleCacheError, false);

// Fired after the first download of the manifest.
appCache.addEventListener('noupdate', handleCacheEvent, false);

// Fired if the manifest file returns a 404 or 410.
// This results in the application cache being deleted.
appCache.addEventListener('obsolete', handleCacheEvent, false);

// Fired for each resource listed in the manifest as it is being fetched.
appCache.addEventListener('progress', handleCacheEvent, false);

// Fired when the manifest resources have been newly redownloaded.
appCache.addEventListener('updateready', handleCacheEvent, false);

Wenn der Download der Manifestdatei oder einer darin angegebenen Ressource fehlschlägt, schlägt das gesamte Update fehl. Der Browser verwendet bei einem solchen Fehler weiterhin den alten Anwendungscache.

Verweise