Erste Schritte zur Verwendung des Anwendungscaches

Einführung

Es wird immer wichtiger, dass webbasierte Anwendungen 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: Ressourcen kommen direkt von der Festplatte, es findet keine Verbindung zum Netzwerk statt.
  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 Anwendung wird korrekt geladen und funktioniert auch dann ordnungsgemäß, wenn der Nutzer offline auf die Aktualisierungsschaltfläche klickt.

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 Sie nicht jede Seite in Ihrem Manifest auflisten. 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. Sie benötigen jedoch den MIME-Typ, um in älteren Browsern und in Internet Explorer 11 zu funktionieren.

Struktur einer Manifestdatei

Das Manifest ist eine separate Datei, auf die Sie über das Manifest-Attribut des HTML-Elements verknüpfen. 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 schränken das Speicherkontingent ein, das für Ihre Anwendung zur Verfügung steht. In Chrome verwendet AppCache beispielsweise einen gemeinsamen Pool mit TEMPORAREM Speicher, 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 Rautezeichen (#) beginnen, sind Kommentarzeilen, können aber auch einem anderen Zweck dienen. Der Cache einer Anwendung wird nur aktualisiert, wenn sich die zugehörige 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, ist es möglich, dass der Browser einige Dateien aus einer Version und andere Dateien aus einer anderen Version abgerufen hat. Daher wird der Cache nicht angewendet und der Vorgang wird später noch einmal versucht.

Obwohl der Cache aktualisiert wird, verwendet der Browser diese Dateien erst, wenn die Seite aktualisiert wird, da Aktualisierungen nach dem Laden der Seite aus der aktuellen Cache-Version erfolgen.

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

CACHE:
Das 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 URI ist das Fallback, das verwendet wird, wenn die Netzwerkanfrage fehlschlägt oder Fehler auftreten. Beide URIs müssen denselben Ursprung haben wie die Manifestdatei. Sie können sowohl bestimmte URLs als auch URL-Präfixe erfassen. „images/large/“ erfasst Fehler in URLs wie „images/large/whatever/img.jpg“.

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. Das Attribut 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 des Manifests 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 applicationCache.status schließlich den Status UPDATEREADY hat, wird durch den Aufruf von applicationCache.swapCache() der alte Cache gegen den neuen Cache ausgetauscht.

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.
}

Die gute Nachricht: Sie können diesen Vorgang automatisieren. Wenn Sie Nutzer auf die neueste Version Ihrer Website aktualisieren möchten, richten Sie einen Listener so ein, dass er beim Seitenaufbau das Ereignis updateready ü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 sich vielleicht vorstellen, werden zusätzliche Ereignisse zur Überwachung des Cache-Zustands bereitgestellt. Der Browser löst Ereignisse für Dinge wie den Downloadfortschritt, die Aktualisierung des App-Caches und Fehlerbedingungen aus. Mit dem folgenden Snippet werden Ereignis-Listener für jede Art von Cache-Ereignis 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 die Manifestdatei oder eine darin angegebene Ressource nicht heruntergeladen wird, schlägt die gesamte Aktualisierung fehl. Bei einem solchen Fehler verwendet der Browser weiterhin den alten Anwendungscache.

Verweise