Heim >Web-Frontend >HTML-Tutorial >Caching von HTML 5-Anwendungen
Caching von HTML 5-Anwendungen
- 黄舟Original
- 2016-12-27 14:48:431322Durchsuche
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>
Cache-Manifest Grundlagen
Um das Anwendungs-Caching zu aktivieren, fügen Sie das Manifest-Attribut in das 100db36a723c770d327fc0aef2ce13b1-Tag des Dokuments ein:
<!DOCTYPE HTML> <html manifest="demo.appcache"> ... </html>
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
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
Start kann verwendet werden um anzugeben, dass alle anderen Ressourcen/Dateien eine Internetverbindung benötigen:
NETWORK: *
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
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
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).