Anwendungscache-API ("AppCache")

Internet Explorer 10 und Windows Store-Apps mit JavaScript unterstützen die Anwendungscache-API (oderAppCache), die in der HTML5-Spezifikationdefiniert ist und das Erstellen von Offline-Web-Apps ermöglicht. Mit AppCache können Webseiten Ressourcen wie beispielsweise Bilder, Skriptbibliotheken, Stylesheets usw. lokal zwischenspeichern (oder speichern).Mit AppCache können außerdem URLs von zwischengespeichertem Inhalt mit der standardmäßigen Uniform Resource Identifier (URI)-Notation geschaltet werden.

Durch das lokale Speichern von Ressourcen mit AppCache verbessern Sie die Leistung einer Webseite, indem Sie die Anzahl der Anfragen an den Hostingserver reduzieren. Außerdem ermöglichen Sie Offlinezugriff auf zwischengespeicherte Ressourcen.

So speichern Sie Ressourcen lokal:

1. Erstellen Sie eine Manifestdatei, die die Ressourcen definiert, die Sie speichern möchten.
2. Verweisen Sie auf jeder Webseite, die zwischengespeicherte Ressourcen verwenden soll, auf die Manifestdatei.

Erstellen einer Manifestdatei

Die Manifestdatei ist eine Textdatei, die das Verhalten beim Zwischenspeichern von Ressourcen definiert, die von der Webseite verwendet werden (siehe folgendes Beispiel).


CACHE MANIFEST

CACHE:
# Defines resources to be cached.
script/library.js
css/stylesheet.css
images/figure1.png

FALLBACK:
# Defines resources to be used if non-cached
# resources cannot be downloaded, for example
# when the browser is offline..
photos/ figure2.png

NETWORK:
# Defines resources that will not be cached.
figure3.png


Manifestdateien sind in die folgenden Abschnitte unterteilt:
  • Der CACHE:-Abschnitt definiert Ressourcen, die lokal gespeichert werden. In diesem Beispiel werden drei Dateien zwischengespeichert.
  • Der FALLBACK:-Abschnitt definiert Ressourcen, die verwendet werden, wenn andere Ressourcen nicht verfügbar sind. In diesem Beispiel wird "figure2.png" als Ausweichbild für den Fotoordner definiert. Wenn der Browser nicht auf Bilder im Fotoordner zugreifen kann (da der Browser offline ist oder der Server nicht erreichbar ist), werden die nicht verfügbaren Bilder im gerenderten Markup durch "figure2.png" ersetzt. Daher wird "figure2.png" lokal zwischengespeichert.
  • Der NETWORK:-Abschnitt gibt Ressourcen an, auf die zugegriffen wird, wenn eine Netzwerkverbindung besteht. Ressourcen in diesem Abschnitt werden nicht zwischengespeichert. In diesem Abschnitt kann mit dem Platzhalterzeichen ("*") angegeben werden, dass keine anderen Ressourcen zwischengespeichert werden sollen.
Manifestdateien können beliebig viele dieser Abschnitte enthalten, und die Abschnitte können wiederholt werden. Neue Abschnitte müssen jedoch wie im vorherigen Beispiel mit der Abschnittsüberschrift gefolgt von einem Doppelpunkt beginnen. Wenn keine Abschnittsüberschrift angegeben ist, wird die Überschrift CACHE: angenommen. Im nächsten Beispiel wird ein einfaches Manifest gezeigt.

CACHE MANIFEST
script/library.js
css/stylesheet.css
images/figure1.png


Darüber hinaus gilt für Manifestdateien Folgendes:
  • Sie müssen mit der Zeichencodierung UTF-8 (8-Bit Unicode Transformation Format) codiert sein.
  • Sie müssen mit dem MIME-Typ "text/cache-manifest" beginnen.
  • Sie müssen mit der Zeile "CACHE MANIFEST" beginnen.
  • Sie können Kommentare enthalten, denen das Nummernzeichen ("#") vorangestellt ist.

Weitere Informationen finden Sie in der Cachemanifestsyntax.

Deklarieren eines Manifests

Um ein Manifest einer Webseite zuzuordnen, weisen Sie wie im folgenden Beispiel gezeigt den Namen der Manifestdatei dem manifest-Attribut des html-Elements zu.


<!doctype html>
<html manifest="appcache.manifest">
 <head>
  <title>A Web Page</title>
  <script src="library.js"></script>
  <link rel="stylesheet" href="stylesheet.css">
 </head>
 <body onload="doSomething();">
  <p>Results go here: <span id="results">Unknown</span></p>
 </body>
</html>


In diesem Beispiel deklariert die Webseite "appcache.manifest" als Manifestdatei. Die Manifestdeklaration wird wie alle anderen Dateiverweise interpretiert. Da in diesem Beispiel ein relativer Dateiname verwendet wird, wird angenommen, dass sich das Manifest im gleichen Verzeichnis wie die Webseite selbst befindet.

Hinweis  Dateiverweise im Manifest werden im Hinblick auf den Speicherort der Manifestdatei interpretiert, nicht im Hinblick auf die deklarierende Webseite.

Das Manifest muss nicht den Namen der Webseite enthalten, die das Manifest deklariert. Webseiten, die Manifeste deklarieren, werden automatisch zwischengespeichert.

Das ApplicationCache-Objekt

Internet Explorer 10 unterstützt auch das ApplicationCache-Objekt, das Methoden und Eigenschaften bereitstellt, mit denen Sie den Anwendungscache verwalten können. Zudem können Sie Ereignishandler definieren, die den Fortschritt des Cachevorgangs anzeigen.

Verwenden Sie die applicationCache-Eigenschaft eines window-Objekts (oder Arbeitsobjekts), um wie im folgenden Beispiel gezeigt auf das ApplicationCache-Objekt zuzugreifen.


var sCacheStatus = "Not supported";
if (window.applicationCache) 
{
   var oAppCache = window.applicationCache;
   switch ( oAppCache.status ) 
   {
      case oAppCache.UNCACHED : 
         sCacheStatus = "Not cached"; 
         break;
      case oAppCache.IDLE : 
         sCacheStatus = "Idle"; 
         break;
      case oAppCache.CHECKING : 
         sCacheStatus = "Checking"; 
         break;
      case oAppCache.DOWNLOADING : 
         sCacheStatus = "Downloading"; 
         break;
      case oAppCache.UPDATEREADY : 
         sCacheStatus = "Update ready"; 
         break;
      case oAppCache.OBSOLETE : 
         sCacheStatus = "Obsolete"; 
         break;
      default : 
        sCacheStatus = "Unexpected Status ( " + 
                       oAppCache.status.toString() + ")";
        break;
   }
}
return sCacheStatus;


In diesem Beispiel wird mit der status-Eigenschaft der Status des Anwendungscaches für das zurzeit von der Webseite geladene Dokument bestimmt.

Das ApplicationCache-Objekt unterstützt zwei Methoden für die Steuerung des Caches. Die update-Methode initiiert eine asynchrone Überprüfung auf Updates, die mit der Überprüfung vergleichbar ist, die beim ersten Laden einer Webseite ausgeführt wird. Ein vorhandener Cache wird verwendet, bis die Webseite erneut geladen wurde oder die swapCache-Methode aufgerufen wird. Um mit der Verwendung eines aktualisierten Caches zu beginnen, laden Sie die Webseite (manuell oder programmgesteuert) neu, oder rufen Sie die swapCache-Methode auf. Da der Cache beim erneuten Laden einer Webseite aktualisiert wird, ist es nicht notwendig, vor dem erneuten Laden oder Aktualisieren einer Webseite die swapCache-Methode aufzurufen.

Hinweis  Der aktualisierte Cache wird erst verwendet, wenn die Website entweder manuell vom Benutzer oder programmgesteuert mit der reload-Methode des window.location-Objekts erneut geladen wurde.

Das ApplicationCache-Objekt unterstützt die folgenden Ereignisse:

  • Das cached-Ereignis wird ausgelöst, wenn das Manifest zwischengespeichert wurde.
  • Das checking-Ereignis wird ausgelöst, wenn überprüft wird, ob ein Update vorhanden ist.
  • Das downloading-Ereignis wird ausgelöst, wenn Manifestressourcen heruntergeladen werden.
  • Das progress-Ereignis wird ausgelöst, während Manifestressourcen heruntergeladen werden.
  • Das error-Ereignis wird ausgelöst, wenn ein Problem auftritt, beispielsweise der HTML-Antwortcode 404 oder 410. Das Ereignis wird auch ausgelöst, wenn die Manifestdatei nicht heruntergeladen werden kann.
  • Das updateready-Ereignis wird ausgelöst, wenn eine neuere Version des Caches verfügbar ist.
  • Das noupdate-Ereignis wird ausgelöst, wenn eine Aktualisierung angefordert, das Manifest jedoch nicht geändert wurde.
  • Das obsolete-Ereignis wird ausgelöst, wenn der aktuelle Cache als veraltet gekennzeichnet ist.

Im folgenden Beispiel wird gezeigt, wie Ereignishandler für diese Ereignisse registriert werden.


if (window.applicationCache) {
  var appCache = window.applicationCache;
   appCache.addEventListener('error', appCacheError, false);
   appCache.addEventListener('checking', checkingEvent, false);
   appCache.addEventListener('noupdate', noUpdateEvent, false);
   appCache.addEventListener('downloading', downloadingEvent, false);
   appCache.addEventListener('progress', progressEvent, false);
   appCache.addEventListener('updateready', updateReadyEvent, false);
   appCache.addEventListener('cached', cachedEvent, false);
}


API-Referenz

Application Cache API ("AppCache")

Demos für die Internet Explorer-Testversion

Cookbook Demo
A Day in the Park

IEBlog-Beiträge

Erstellen von Websites und Apps für die Offlineverwendung mit den HTML5-Features AppCache und IndexedDB

Spezifikation

HTML5: Abschnitt 5.7.2

 

 

Anzeigen:
© 2014 Microsoft