Neueste Web-Entwicklung Tutorials

HTML5 Application Cache


Mit Anwendungs-Cache ist es einfach, eine Offline-Version einer Web-Anwendung zu machen, indem eine Cache-Manifest-Datei zu erstellen.


Was ist Application Cache?

HTML5 bietet Anwendungs-Cache, was bedeutet, dass eine Web-Anwendung zwischengespeichert wird und zugänglich ohne Internetverbindung.

Anwendungscache gibt einen Antrag drei Vorteile:

  1. Offline-Browsing - Benutzer können die Anwendung nutzen, wenn sie offline
  2. Speed ​​- im Cache-Ressourcen schneller geladen
  3. Reduzierte Serverbelastung - der Browser nur herunterladen aktualisiert / geändert Ressourcen vom Server

Hintergrund

Web-Anwendungen bestehen aus Web-Seiten, die von einem Netzwerk heruntergeladen werden müssen. Dafür gibt geschehen muss eine Netzwerkverbindung sein. Allerdings gibt es viele Fälle, in denen Benutzer keine Verbindung zu einem Netzwerk aufgrund von Umständen, die außerhalb ihrer Kontrolle. HTML5 bietet die Möglichkeit, die Web-Anwendung zuzugreifen, auch ohne Netzwerkverbindung des Cache-Manifest verwenden.

Web-Anwendungen bestehen aus durch URLs identifiziert Ressourcen. Diese können HTML, CSS sein, JavaScript, Bilder oder jede andere Quelle, die erforderlich ist für eine Web-Anwendung gerendert werden. Ihre Adressen können in eine Manifest-Datei kopiert werden, die vom Autor der Web-Anwendung regelmäßig aktualisiert werden kann, was auf alle neue Web-Adressen, die hinzugefügt oder gelöscht werden. Wenn zum ersten Mal an ein Netzwerk anschließen, wird ein Web-Browser, die HTML5-Manifest-Datei lesen, laden Sie die vorhandenen Ressourcen und speichert sie lokal. Dann wird in der Abwesenheit einer Netzwerkverbindung, wird der Web-Browser statt auf die lokalen Kopien verschieben und die Web-Anwendung offline machen.


Browser-Unterstützung

Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die Application Cache voll unterstützt.

API
Application Cache 4.0 10.0 3.5 4.0 11.5

HTML Cache Manifest Beispiel

Das folgende Beispiel zeigt ein HTML - Dokument mit einem Cache - Manifest (for offline browsing) - (for offline browsing) :

Beispiel

<!DOCTYPE HTML>
<html manifest="demo.appcache">

<body>
The content of the document......
</body>

</html>
Versuch es selber "

Cache-Manifest Basics

Damit die Offline-Anwendungen zu arbeiten, eine Cache-Manifest-Datei muss von dem Web-Entwickler erstellt werden. Wenn die Web-Anwendung mehr als eine Seite überschreitet, dann muss jede Seite ein Manifest Attribut haben, die in den Cache-Manifest zeigt. Jede Seite des Manifest-Referenzierung wird lokal gespeichert werden. Die Cache-Manifest-Datei ist eine Textdatei in einem anderen Teil des Servers. Es muss mit dem folgenden Inhaltstyp bedient werden:

text/cache-manifest

Um Anwendungscache, schließt die Freigabe manifest - Attribut im Dokument des <html> tag:

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

Jede Seite mit dem manifest - Attribute angegeben wird zwischengespeichert werden , wenn der Benutzer es besucht. Wenn das manifest Attribut nicht angegeben ist, wird die Seite nicht im Cache gespeichert werden (unless the page is specified directly in the manifest file) , (unless the page is specified directly in the manifest file) - (unless the page is specified directly in the manifest file) .

Die empfohlene Dateierweiterung für Manifest - Dateien ist: ".appcache"

Ein Manifest - Datei muss mit dem bedient werden correct media type , das ist "text/cache-manifest" . Muss auf dem Webserver konfiguriert werden.


Die Manifestdatei

Die Manifest - Datei ist eine einfache Textdatei, die den Browser anweist , was in dem Cache (and what to never cache) .

Die Manifest-Datei besteht aus drei Abschnitten:

  • CACHE MANIFEST - Dateien unter dieser Überschrift aufgeführt wird zwischengespeichert werden , nachdem sie zum ersten Mal heruntergeladen
  • NETWORK - Dateien unter dieser Überschrift aufgeführten erfordern eine Verbindung mit dem Server, und wird niemals zwischengespeichert werden
  • FALLBACK - Dateien unter dieser Überschrift aufgeführt gibt Ausweich Seiten , wenn eine Seite nicht zugänglich ist

CACHE MANIFEST

Die erste Zeile, CACHE MANIFEST ist erforderlich:

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

Die Manifest-Datei listet über drei Ressourcen: eine CSS-Datei, ein GIF-Bild und eine JavaScript-Datei. Wenn die Manifest-Datei geladen wird, wird der Browser die drei Dateien aus dem Stammverzeichnis der Website herunterladen. Dann, wenn der Benutzer nicht mit dem Internet verbunden ist, werden die Ressourcen immer noch zur Verfügung stehen.

NETZWERK

Der NETWORK Abschnitt gibt unten , dass die Datei "login.asp" sollte nie, zwischengespeichert werden und nicht offline verfügbar sein:

NETWORK:
login.asp

Ein Sternchen kann verwendet werden, um anzuzeigen, dass alle anderen Ressourcen / Dateien erfordern eine Internetverbindung:

NETWORK:
*

ZURÜCKFALLEN

Der NOTFALL Abschnitt gibt unter dem "offline.html" wird anstelle von allen Dateien im / html / catalog serviert werden, falls eine Internetverbindung nicht hergestellt werden kann:

FALLBACK:
/html/ /offline.html

Hinweis: Der erste URI ist die Ressource, die zweite ist die Rückfall ist.


Aktualisieren des Cache

Sobald eine Anwendung im Cache gespeichert wird, bleibt es im Cache gespeicherten, bis eines der folgenden Ereignisse eintritt:

  • Der Benutzer löscht den Cache des Browsers
  • Die Manifest - Datei geändert wird (see tip below)
  • Der Anwendungs-Cache wird programmatisch aktualisiert

Beispiel - Complete Cache Manifestdatei

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html/ /offline.html

Tip: Linien mit einem Start "#" sind Kommentarzeilen, kann aber auch einen anderen Zweck dienen. AN Cache der Anwendung wird nur dann, wenn seine Manifest-Datei Änderungen aktualisiert. Wenn Sie ein Bild bearbeiten oder eine JavaScript-Funktion ändern, werden diese Änderungen nicht erneut zwischengespeichert werden. Aktualisierung des Datums und der Version in einer Kommentarzeile ist eine Möglichkeit, den Browser-Cache wieder Ihre Dateien zu machen.


Hinweise zur Anwendung Cache

Seien Sie vorsichtig mit dem, was Sie zwischenzuspeichern.

Sobald eine Datei zwischengespeichert wird, wird auch weiterhin der Browser die im Cache gespeicherte Version zeigen, auch wenn Sie die Datei auf dem Server zu ändern. Um sicherzustellen, dass der Browser den Cache aktualisiert, müssen Sie die Manifest-Datei ändern.

Hinweis: Browser kann unterschiedliche Größenbeschränkungen für die zwischengespeicherten Daten (some browsers have a 5MB limit per site) .