HTML5-Offline-Anwendungslösung zum Erstellen einer Website ohne Anfragen und ohne Datenverkehr. HTML5-Tutorial-Fähigkeiten

Vorwort

Heutige Webanwendungen sind bereits sehr komplex und werden immer komplexer. Sie weisen jedoch einen schwerwiegenden Fehler auf, der darin besteht, dass sie nicht vom Internet getrennt werden können zu HTML,

Es nutzt einen lokalen Speichermechanismus, um dieses Problem gut zu lösen und den Weg für Offline-Webanwendungen zu ebnen.
Lokaler Cache im Browser-Cache

Kopieren Sie den Code

Der Code lautet wie folgt:

Der lokale Cache bedient die gesamte Webanwendung
Der Browser-Cache bedient nur eine einzelne Webseite

Jede Webseite verfügt über einen Webseiten-Cache
Der lokale Cache speichert nur die Seiten zwischen, die Sie zum Zwischenspeichern angeben

Webseiten-Caching ist unzuverlässig und unsicher, da wir nicht wissen, welche Seiten und Ressourcen auf der Website zwischengespeichert werden
Lokales Caching kann steuern, welche Inhalte zwischengespeichert werden

Manifest Datei

Der lokale Cache von Webanwendungen wird über die Manifestdatei jeder Seite verwaltet. Das Manifest ist ein einfacher Text, in dem die Namen und Pfade der Dateien aufgeführt sind, die zwischengespeichert werden müssen und nicht zwischengespeichert werden müssen einer Liste.

Das Manifest kann einzeln für jede Seite oder für die gesamte Anwendung angegeben werden. Zum Beispiel unsere Einstellungen für hello.htm:

Code kopieren

Der Code lautet wie folgt:

CACHE MANIFEST
CACHE:
other.html
hellow.js
images/myphoto.jpg
NETZWERK :
http://LuLinniu/NotOffline
NotOffline.asp
*
FALLBACK:
online.js locale.js
CACHE:
newhellow.html
newhellow .js

In der Manifestdatei muss die erste Zeile CACHE MANIFEST sein, um dem Browser die Rolle des Textes mitzuteilen, d. h. um spezifische Einstellungen für die Ressourcendateien im lokalen Bereich vorzunehmen Cache.
Wenn Sie tatsächlich gleichzeitig eine Offline-Webanwendung ausführen, müssen Sie den Server so konfigurieren, dass der Server den Text-/Cache-Manifest-Mime-Typ unterstützt.

Bei der Angabe von Dateiquelldateien können Ressourcendateien in drei Kategorien unterteilt werden: CACHE, NETZWERK und FALLBACK

Code kopieren

Der Code lautet wie folgt:

Geben Sie Ressourcendateien an, die lokal in der CACHE-Kategorie zwischengespeichert werden müssen. Wenn Sie Ressourcendateien angeben, die lokal für eine bestimmte Seite zwischengespeichert werden müssen, müssen Sie die Seite selbst nicht in der CACHE-Kategorie angeben,
Denn wenn eine Seite eine Manifestdatei enthält, speichert der Browser die Seite automatisch lokal

Die Kategorie NETZWERK umfasst Ressourcendateien, die explizit nicht zwischengespeichert werden sollen. Auf diese Dateien kann nur durch Herstellen einer serverseitigen Verknüpfung zugegriffen werden. In diesem Beispiel wird der Platzhalter * verwendet, um anzugeben, dass die Dateien nicht aufgezeichnet werden wird nicht zwischengespeichert

Jede Zeile in der Kategorie FALLBACK gibt zwei Ressourcendateien an. Die erste Ressourcendatei ist die Ressourcendatei, die verwendet wird, wenn online darauf zugegriffen werden kann, und die zweite ist die lokale Cachedatei, die verwendet wird, wenn online nicht darauf zugegriffen werden kann

Der Interaktionsprozess zwischen dem Browser und dem Server

Bei der Arbeit mit Offline-Webanwendungen ist es notwendig, den Interaktionsprozess zwischen Browser und Server zu verstehen:

Code kopieren

Der Code lautet wie folgt:

Beispiel: http://LuLingniu, mit index.htm als Homepage, die Homepage verwendet index.manifest,
speichert index.htm im Cache In der Datei hello.js, hello.jpg ist der Vorgang für den ersten Besuch wie folgt:
Der Browser fordert die URL an
Der Server gibt die index.htm-Homepage zurück
Der Browser analysiert den Index. htm-Webseite und fordert alle Ressourcendateien auf der Seite an
Der Server gibt die Ressourcendatei zurück
Der Browser verarbeitet die Manifestdatei und fordert die Datei an, die im Manifest zwischengespeichert werden muss. er fordert sie erneut an
Der Server gibt die Datei zurück, die zwischengespeichert werden muss.
Der Browser aktualisiert die Ressourcendateien und löst ein Ereignis aus, um lokale Cache-Updates zu benachrichtigen.

URL erneut öffnen
URL anfordern
Der Browser stellt fest, dass die Seite zwischengespeichert ist, und verwendet daher die lokale Cache-Datei
zum Parsen der Datei
Der Browser fordert die Manifestdatei von an Server
und der Server gibt 304 zurück. Benachrichtigen Sie, dass sich die Manifestdatei nicht geändert hat (es wird anders sein, wenn sie sich ändert)

applicationCache-Objekt

Dieses Objekt stellt den lokalen Cache dar, der verwendet werden kann, um den Benutzer darüber zu informieren, dass der lokale Cache aktualisiert wurde, und der auch eine manuelle Aktualisierung des lokalen Caches ermöglicht.

Wenn der Browser den lokalen Cache aktualisiert und eine neue Ressourcendatei lädt, wird das updateready-Ereignis des applicationCache-Objekts ausgelöst, das benachrichtigt, dass der lokale Cache geändert wurde, und den Benutzer dann auffordert, die Seite manuell zu aktualisieren.
swapCache

Die swapCache-Methode wird verwendet, um lokale Cache-Aktualisierungen manuell durchzuführen. Sie kann nur aufgerufen werden, wenn das updateReady-Ereignis des applicationCache-Objekts ausgelöst wird,

Das heißt, wenn sich die Ressourcendatei ändert, können Sie diese Methode verwenden, um das Update manuell zwischenzuspeichern.