Caching von HTML 5-Anwendungen-HTML-Tutorial-php.cn

Caching von HTML 5-Anwendungen

黄舟

Freigeben： 2016-12-27 14:48:43

Original

1321 Leute haben es durchsucht

HTML 5-Anwendungscache

Einführung

Mit HTML5 können Sie ganz einfach eine Offline-Version Ihrer Webanwendung erstellen, indem Sie eine Cache-Manifestdatei erstellen.

Was ist Anwendungscache?

HTML5 führt Anwendungs-Caching ein, was bedeutet, dass Webanwendungen zwischengespeichert und ohne Internetverbindung aufgerufen werden können.

Anwendungs-Caching bringt drei Vorteile für Apps:

Offline-Browsing – Benutzer können Apps verwenden, während sie offline sind

Geschwindigkeit – zwischengespeicherte Ressourcen werden schneller geladen

Serverlast reduzieren – der Browser lädt nur aktualisierte oder geänderte Ressourcen vom Server herunter.

Browser-Unterstützung

Anwendungs-Caching wird in allen gängigen Browsern außer Internet Explorer unterstützt.

Beispiel für ein HTML5-Cache-Manifest

Das folgende Beispiel zeigt ein HTML-Dokument mit Cache-Manifest (zum Offline-Browsen):

Beispiel

<!DOCTYPE HTML> <html manifest="demo.appcache"> <body> The content of the document...... </body> </html>

Nach dem Login kopieren

Cache-Manifest Grundlagen

Um das Anwendungs-Caching zu aktivieren, fügen Sie das Manifest-Attribut in das -Tag des Dokuments ein:

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

Nach dem Login kopieren

Jede Seite, die ein Manifest angibt, wird angezeigt, wenn der Benutzer es anzeigt beim Zugriff zwischengespeichert werden. Wenn das Manifest-Attribut nicht angegeben ist, wird die Seite nicht zwischengespeichert (es sei denn, es wird direkt in der Manifestdatei angegeben).

Die empfohlene Dateierweiterung für Manifestdateien ist: „.appcache“.

Bitte beachten Sie, dass die Manifestdatei mit dem richtigen MIME-Typ konfiguriert werden muss, nämlich „text/cache-manifest“. Muss auf dem Webserver konfiguriert werden.

Manifestdateien

Manifestdateien sind einfache Textdateien, die dem Browser mitteilen, was zwischengespeichert wird (und was nicht).

Manifestdateien können in drei Teile unterteilt werden:

CACHE-MANIFEST – unter dieser Überschrift aufgeführte Dateien werden nach dem ersten Download zwischengespeichert

NETZWERK – unter dieser Überschrift Ausgehende Dateien erfordern eine Verbindung zum Server und wird nicht zwischengespeichert

FALLBACK – Die unter dieser Überschrift aufgeführten Dateien geben die Fallback-Seite an, wenn auf die Seite nicht zugegriffen werden kann (z. B. eine 404-Seite)

CACHE MANIFEST

Die erste Zeile, CACHE MANIFEST, ist erforderlich:

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

Nach dem Login kopieren

Die obige Manifestdatei listet drei Ressourcen auf: eine CSS-Datei, ein GIF-Bild und ein JavaScript-Dokument. Wenn die Manifestdatei geladen wird, lädt der Browser diese drei Dateien aus dem Stammverzeichnis der Website herunter. Wenn der Benutzer dann die Verbindung zum Internet trennt, sind diese Ressourcen weiterhin verfügbar.

NETZWERK

Der folgende NETZWERK-Abschnitt gibt an, dass die Datei „login.asp“ niemals zwischengespeichert wird und nicht offline verfügbar ist:

NETWORK: login.asp

Nach dem Login kopieren

Start kann verwendet werden um anzugeben, dass alle anderen Ressourcen/Dateien eine Internetverbindung benötigen:

NETWORK: *

Nach dem Login kopieren

FALLBACK

Der Unterabschnitt FALLBACK unten gibt an, dass „offline.html“ verwendet wird, wenn keine Internetverbindung hergestellt werden kann statt /html5 / Alle Dateien im Verzeichnis:

FALLBACK: /html5/ /404.html

Nach dem Login kopieren

Hinweis: Der erste URI ist die Ressource, der zweite ist der Fallback.

Cache aktualisieren

Sobald eine App zwischengespeichert wurde, bleibt sie zwischengespeichert, bis Folgendes passiert:

Benutzer löscht Browser-Cache

Manifestdatei wird geändert (siehe Tipps unten)

Anwendungscache nach Programm aktualisieren

Beispiel – Manifestdatei vervollständigen

CACHE MANIFEST # 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html5/ /404.html

Nach dem Login kopieren

Wichtiger Hinweis: Die Kommentarzeile beginnt mit „#“, kann aber auch anderen Zwecken dienen sowie. Der Cache der Anwendung wird aktualisiert, wenn sich ihre Manifestdatei ändert. Wenn Sie ein Bild bearbeiten oder eine JavaScript-Funktion ändern, werden diese Änderungen nicht erneut zwischengespeichert. Das Aktualisieren des Datums und der Versionsnummer in der Kommentarzeile ist eine Möglichkeit, den Browser zu veranlassen, die Datei erneut zwischenzuspeichern.

Ein Hinweis zum Anwendungs-Caching

Bitte seien Sie vorsichtig mit zwischengespeicherten Inhalten.

Sobald eine Datei zwischengespeichert ist, zeigt der Browser weiterhin die zwischengespeicherte Version an, auch wenn Sie die Datei auf dem Server ändern. Um sicherzustellen, dass Ihr Browser seinen Cache aktualisiert, müssen Sie Ihre Manifestdatei aktualisieren.

Hinweis: Browser haben möglicherweise unterschiedliche Grenzwerte für zwischengespeicherte Daten (einige Browser legen einen Grenzwert von 5 MB pro Website fest).

Das Obige ist der Inhalt des HTML 5-Anwendungscache. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).