Caching von HTML 5-Anwendungen
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 -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).
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Tabellenrahmen in HTML
Sep 04, 2024 pm 04:49 PM
Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.
Verschachtelte Tabelle in HTML
Sep 04, 2024 pm 04:49 PM
Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.
HTML-Rand links
Sep 04, 2024 pm 04:48 PM
Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.
HTML-Tabellenlayout
Sep 04, 2024 pm 04:54 PM
Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.
Text in HTML verschieben
Sep 04, 2024 pm 04:45 PM
Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.
HTML-geordnete Liste
Sep 04, 2024 pm 04:43 PM
Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele
Wie analysiert und verarbeitet man HTML/XML in PHP?
Feb 07, 2025 am 11:57 AM
Dieses Tutorial zeigt, wie XML -Dokumente mit PHP effizient verarbeitet werden. XML (Extensible Markup-Sprache) ist eine vielseitige textbasierte Markup-Sprache, die sowohl für die Lesbarkeit des Menschen als auch für die Analyse von Maschinen entwickelt wurde. Es wird üblicherweise für die Datenspeicherung ein verwendet und wird häufig verwendet
HTML-Onclick-Button
Sep 04, 2024 pm 04:49 PM
Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.
