Die meisten Web-basierten Anwendungen funktionieren nur, wenn Sie online, sind, welche eine bestimmte Art von Sinn macht. Aber hat HTML5 einen Mechanismus Teil einer Web-Seite und ihre Ressourcen zu zwingen, auf dem lokalen Rechner gespeichert werden, so dass Sie es im Offline-Modus ansehen können. Sie können eine Seite haben sich für dieses Verhalten zu identifizieren und versuchen, eine Kopie auf dem lokalen Rechner automatically- zum Beispiel zu speichern:

 
Offline Storage Demo
 

Während extrem einfach, diese Seite verwaltet Ressourcen aus verschiedenen Dateien zu ziehen. Natürlich erfordert es die Bild pot.jpg, aber es nutzt auch eine externe javascript-Datei (offline.js) Und einem externen Stylesheet (offline.css). HTML5 bietet einen Mechanismus, der Browser automatisch zu speichern nicht nur die HTML-Datei ermöglicht, sondern auch alle anderen Ressourcen muss es korrekt angezeigt werden.

Sie würden nicht so eine einfache Seite mit so vielen externen Abhängigkeiten bauen, aber das ist der Sinn dieser besonderen Übung.

Das Geheimnis ist in einer speziellen Datei namens cache.manifest. Diese spezielle Datei ist einfach eine Textdatei, die angibt, welche anderen Dateien, die von der Seite benötigt. Hier ist der Inhalt von cache.manifest für dieses Beispiel:

CACHE MANIFESToffline.cssoffline.jspot.jpg

Die Datei muss mit dem Satz beginnen CACHE MANIFEST (Alle in Großbuchstaben). Jede nachfolgende Zeile sollte den Namen einer Datei enthalten, die die Seite zu vervollständigen. Am einfachsten ist es, wenn alle Dateien im selben Verzeichnis befinden, aber relative Bezüge sind akzeptabel.

Gehen Sie wie folgt vor, um eine Seite für den Offline-Cache einzurichten:

1. Richten Sie Ihren Server-Caches zu verwalten.

   Der Cache-Mechanismus verwendet die text / manifest Mime Typ. Ihr Server möglicherweise noch nicht für diese Art von Daten eingerichtet werden. Wenn Sie Apache verwenden, ist dies einfach zu beheben. Suchen Sie nach (oder erstellen) eine Textdatei namens ..htaccess im Stammverzeichnis des Webservers. Fügen Sie die folgende Zeile in diese Datei:

   AddType text / cache-manifest manifest

   Falls Sie haben keine Berechtigung zum Hinzufügen oder Ändern ..htaccess oder Sie einen anderen Server verwenden, müssen Sie möglicherweise Ihren Server-Administrator bitten, diesen MIME-Typ hinzuzufügen.

2. Erstellen Sie Ihre Manifest-Datei, indem Sie eine Textdatei namens Bau cache.manifest im selben Verzeichnis wie das Projekt.

   Machen Sie die erste Zeile gelesen CACHE MANIFEST. Bei jedem späteren Zeile können Sie sich eine der Vermögenswerte Ihrer Seite benötigen. Unter Umständen müssen Sie durch Ihren Quellcode zu suchen, um die verschiedenen Elemente zu finden (in der Regel Bilder, CSS und javascript-Dateien), dass Ihre Seite benötigen.

3. Erstellen Sie die Seite in der normalen Art und Weise.

   Behalten Sie den Überblick von externen Ressourcen, die Sie benötigen.

4. Geben Sie, dass Ihre Seite lokalen Speicher anfordern, die durch Zugabe von Manifest Attribut mit dem Tag und einem Link zu Ihrer cache.manifest Datei.

5. Laden Sie Ihre Seite.

   Natürlich können Sie nicht-Cache auf einem lokalen Rechner zu testen (es sei denn, Sie Ihre eigenen Web-Server und Test durch die Lauf http: // localhost Adresse). Sie müssen Ihre Dateien auf einen Server zu laden. Das erste Mal, wenn Sie versuchen, auf die Seite zuzugreifen, wird Ihr Browser wahrscheinlich um Erlaubnis bitten, Daten lokal zu speichern. Erteilen Sie die Erlaubnis, dies zu tun.

6. Test offline.

   Um zu sehen, ob die Seite funktioniert, schalten Sie vom Internet (vom Netz Ausschalten oder Ausstecken Ihr Netzwerkkabel). Versuchen Sie, die Seite erneut zu laden. Wenn Sie erfolgreich sind, wird die gesamte Seite geladen werden.

Browser haben bereits eine Form von Cache, die automatisch speichert Seiten der Benutzer besucht hat, aber diese Art von Cache ist eine andere, vorsätzliche Form von Cache.

Beachten Sie, dass Sie keine Links zu serverseitigen Assets im Cache setzen können. Ein lokaler Cache kann nicht ein PHP-Programm oder einer Datenbank speichern. Sie können jedoch beliebige Daten speichern Sie auf dem Client benötigen, damit Ihr Projekt noch ohne Serververbindung zu arbeiten.

Wenn Sie Ihre ändern cache.manifest Datei und erneut testen, wird der Browser sofort zu aktualisieren. Das ist, weil Browser den aktuellen Cache für ein paar Stunden zu halten eingestellt. Wenn Sie noch einmal testen, nach ein paar Stunden, sehen Sie die Änderungen wider. Während des Tests können Sie die automatische Browser-Caching aktivieren, indem das Hinzufügen dieser Zeilen von Ihrer ..htaccess Datei:

ExpiresActive OnExpiresDefault "access"

Es macht nur Sinn Browser-Caching auf einem Testserver zu deaktivieren. Lassen Sie das Caching-Verhalten auf seinem Standardebene für einen Produktionsserver.

Wenn eine der Dateien geändert wird, aber cache.manifest Datei nicht, weiß der Browser nicht die geänderte Datei neu zu laden. Wenn Sie eine vollständige Datei reload auslösen wollen, müssen Sie mindestens ein Zeichen in der zu ändern cache.manifest Datei. Dies kann ein Kommentar sein, so können Sie nur eine Versionsnummer wie folgt hinzu:

#version 3

die Versionsnummer ändern, wird der Reload-Mechanismus das nächste Mal auslösen Sie online sind, so dass die Offline-Version auf dem neuesten Stand sein.