HTML5- Anwendungscache

In diesem Tutorial erfahren Sie, wie Sie Offline-Anwendungen mit der HTML5-Caching-Funktion erstellen.

Was ist Anwendungscache?

Normalerweise funktionieren die meisten webbasierten Anwendungen nur, wenn Sie online sind. HTML5 führt jedoch einen Anwendungs-Cache-Mechanismus ein, mit dem der Browser die HTML-Datei und alle anderen Ressourcen, die für die ordnungsgemäße Anzeige auf dem lokalen Computer erforderlich sind, automatisch speichern kann, sodass der Browser weiterhin ohne Internetverbindung auf die Webseite und ihre Ressourcen zugreifen kann .

Hier sind einige Vorteile der Verwendung der HTML5-Anwendungscache-Funktion:

Offline-Browsing - Benutzer können die Anwendung auch dann verwenden, wenn sie offline sind oder unerwartete Störungen in der Netzwerkverbindung auftreten.
Verbessern Sie die Leistung - Zwischengespeicherte Ressourcen werden direkt vom Computer des Benutzers und nicht vom Remote-Server geladen, sodass Webseiten schneller geladen werden und eine bessere Leistung erzielen .
Reduzieren der HTTP-Anforderung und der Serverlast - Der Browser muss nur die aktualisierten / geänderten Ressourcen vom Remoteserver herunterladen, um die HTTP-Anforderungen zu minimieren, wertvolle Bandbreite zu sparen und die Belastung des Webservers zu verringern.

Tipp: Die Anwendungs-Cache-Funktion von HTML5 wird in allen wichtigen modernen Webbrowsern wie Firefox, Chrome, Opera, Safari und Internet Explorer 10 und höher unterstützt.

Zwischenspeichern von Dateien mit einem Manifest

Um die Dateien für Offline-Zwecke zwischenzuspeichern, müssen Sie die folgenden Schritte ausführen:

Schritt 1: Erstellen Sie eine Cache-Manifest-Datei

Ein Manifest ist eine spezielle Textdatei, die den Browsern mitteilt, welche Dateien gespeichert werden sollen, welche Dateien nicht gespeichert werden sollen und welche Dateien durch etwas anderes ersetzt werden sollen. Die Manifestdatei beginnt immer mit den Wörtern CACHE MANIFEST(in Großbuchstaben). Hier ist ein Beispiel für eine einfache Manifestdatei:

   CACHE MANIFEST
# v1.0 : 10-08-2014
 
CACHE:
# pages
index.html
 
# styles & scripts
css/theme.css
js/jquery.min.js
js/default.js
 
# images
/favicon.ico
images/logo.png
 
NETWORK:
login.php
 
FALLBACK:
/ /offline.html

Erklärung des Codes

Sie könnten denken, worum es in diesem Code ging. OK, lass uns gleich loslegen. Eine Manifestdatei kann drei verschiedene Abschnitte haben: CACHE, NETWORK und FALLBACK.

Dateien, die unter der CACHE:Abschnittsüberschrift (oder unmittelbar nach der CACHE MANIFESTZeile) aufgeführt sind, werden nach dem ersten Herunterladen explizit zwischengespeichert.
Dateien, die unter der NETWORK:Abschnittsüberschrift aufgeführt sind, sind Ressourcen auf der weißen Liste, die niemals zwischengespeichert werden und nicht offline verfügbar sind. login.phpDies bedeutet, dass Benutzer nur dann auf die Seite zugreifen können, wenn sie online sind.
Der FALLBACK:Abschnitt gibt Fallback-Seiten an, die der Browser verwenden soll, falls die Verbindung zum Server nicht hergestellt werden kann. Jeder Eintrag in diesem Abschnitt listet zwei URIs auf - der erste ist die primäre Ressource, der zweite ist der Fallback. In unserem Fall offline.htmlwird beispielsweise die Seite angezeigt, wenn der Benutzer offline ist. Außerdem müssen beide URIs denselben Ursprung haben wie die Manifestdatei.
Zeilen, die mit einem Hash-Symbol ( #) beginnen, sind Kommentarzeilen.

Hinweis: Wenn ein Anwendungscache vorhanden ist, lädt der Browser das Dokument und die zugehörigen Ressourcen direkt aus dem Cache, ohne auf das Netzwerk zuzugreifen. Nachdem dieser Browser überprüft hat, ob die Manifestdatei auf dem Server aktualisiert wurde, und wenn sie aktualisiert wurde, lädt der Browser die neue Version des Manifests und die darin aufgeführten Ressourcen herunter.

Warnung: Geben Sie die Manifestdatei selbst nicht in der Cache-Manifestdatei an, da es sonst nahezu unmöglich ist, den Browser darüber zu informieren, dass ein neues Manifest verfügbar ist.

Schritt 2: Verwenden Ihrer Cache-Manifestdatei

Laden Sie nach dem Erstellen Ihre Cache-Manifestdatei auf den Webserver hoch. Stellen Sie sicher, dass der Webserver so konfiguriert ist, dass die Manifestdateien vom Typ MIME bereitgestellt werden text/cache-manifest.

Um Ihr Cache-Manifest in Kraft zu setzen, müssen Sie es auf Ihren Webseiten aktivieren, indem Sie das Manifest-Attribut <html>wie unten gezeigt zum Stammelement hinzufügen :

Beispiel

<!DOCTYPE html>
<html lang="en" manifest="example.appcache">
<head>
    <title>Using the Application Cache</title>
</head>
<body>
    <!--The document content will be inserted here-->
</body>
</html>

Hinweis: Auf den Apache-Webservern kann der MIME-Typ für die manifest ( .appcache) -Dateien festgelegt werden, indem AddType text/cache-manifest .appcacheeiner .htaccessDatei im Stammverzeichnis der Anwendung oder im selben Verzeichnis wie die Anwendung hinzugefügt wird .