Was ist der HTML5-Offline-Cache? Manifest_html5-Tutorial-Fähigkeiten
Web-Apps sind nicht besser als PCs. Obwohl Browser über Caching-Mechanismen verfügen, sind sie unter normalen Umständen nicht zwischenspeicherbar. Nach dem Internet ist alles vorbei.
Was ist manifest?
Einfach ausgedrückt ermöglicht Manifest den Zugriff auf Ihre Anwendung auch ohne Netzwerkverbindung.
Es hat drei große Vorteile :
1. Offline-Browsing, normaler Zugriff auch ohne Netzwerk
2. Schnellere Ladegeschwindigkeit, die Geschwindigkeit des zwischengespeicherten lokalen Zugriffs ist natürlich schneller
3. Reduzieren Sie den Serviceanfragedruck. Nachdem die Datei zwischengespeichert wurde, müssen Sie sie nicht erneut anfordern, sondern nur die Dateien, die aktualisiert werden müssen.
Wie benutzt man?
- >
- <html manifest="demo. appcache“>
- ...
- html>
Sie müssen das Manifest-Attribut auf jeder Seite der Web-App einfügen, die Sie zwischenspeichern möchten. Wenn eine Seite kein Manifest-Attribut hat, wird sie nicht zwischengespeichert (es sei denn, die Seite ist explizit in der Manifestdatei angegeben). Das heißt, solange die vom Benutzer besuchte Seite das Manifest-Attribut enthält, wird es dem Anwendungscache hinzugefügt. Auf diese Weise ist es nicht erforderlich, in der Manifestdatei anzugeben, welche Seiten zwischengespeichert werden müssen.
Das Manifest-Attribut kann eine absolute URL oder einen relativen Pfad angeben. Eine absolute URL muss jedoch vom selben Ursprung sein wie die Web-App. Eine Manifestdatei kann ein beliebiger Erweiterungsdateityp sein, sie muss jedoch den richtigen MIME-Typ haben, z. B. das Hinzufügen von
in Apache„AddType text/cache-manifest .appcache“.
Manifestdatei
Manifestdateien sind einfache Textdateien, die dem Browser mitteilen, was zwischengespeichert wird (und was nicht).
Manifestdateien können in drei Teile unterteilt werden:
CACHE MANIFEST – Die unter dieser Überschrift aufgeführten Dateien werden nach dem ersten Download zwischengespeichert.
NETZWERK – in Die Dateien Die unter dieser Überschrift aufgeführten Dateien erfordern eine Verbindung zum Server und werden nicht zwischengespeichert.
FALLBACK - Die unter dieser Überschrift aufgeführten Dateien geben einen Fallback an, wenn die Seite nicht erreichbar ist (z. B. 404). Seite)
Eine vollständige Manifestdatei:
- CACHE-MANIFEST
- # 2012-02-21 v1.0.0
- /theme.css
- /logo.gif
- /main.js
- NETZWERK:
- login.asp
- FALLBACK:
- /html5/ /404.html
CACHE MANIFEST ist erforderlich, gefolgt von einem Kommentar. Nachfolgend sind die Dateien aufgeführt, die zwischengespeichert werden müssen. NETWORK ist eine Datei, die bei jeder Anfrage geladen werden muss.
Ein Sternchen kann verwendet werden, um anzuzeigen, dass alle anderen Ressourcen/Dateien eine Internetverbindung benötigen:
NETZWERK:
*
FALLBACK ist, wenn eine Internetverbindung vorhanden ist Wenn keine Verbindung hergestellt werden kann, verwenden Sie „404.html“, um alle Dateien im Verzeichnis /html5/ zu ersetzen.
Aktualisierungsmechanismus
Es gibt drei Möglichkeiten, den Manifest-Cache zu aktualisieren:
Der Benutzer löscht den Browser-Cache.
2 ist ein Kommentar (sodass er durch Kommentar geändert werden kann, um die Datei zu aktualisieren)
3. Aktualisierung durch Programm
Cache-Status
Sie können den Cache-Status im Programm über die Eigenschaft window.applicationCache anzeigen.
- var appCache = window.applicationCache;
- Schalter (appCache.status) {
- case appCache.UNCACHED: // UNCACHED == 0
- return ‘UNCACHED’;
- Pause;
- case appCache.IDLE: // IDLE == 1
- zurück ‘IDLE’;
- Pause;
- case appCache.CHECKING: // CHECKING == 2
- zurück ‘PRÜFEN’;
- Pause;
- case appCache.DOWNLOADING: // DOWNLOADING == 3
- zurück ‘HERUNTERLADEN’;
- Pause;
- case appCache.UPDATEREADY: // UPDATEREADY == 4
- zurück ‘UPDATEREADY’;
- Pause;
- case appCache.OBSOLETE: // OBSOLETE == 5
- zurückgeben „VERALTET“;
- Pause;
- Standard:
- Zurück ‘UKNOWN CACHE STATUS‘;
- Pause;
- };
Um den Cache programmgesteuert zu aktualisieren, rufen Sie zunächst applicationCache.update() auf. Dadurch wird versucht, den Cache des Benutzers zu aktualisieren (wobei die Manifestdatei geändert werden muss). Wenn sich applicationCache.status schließlich im Status UPDATEREADY befindet, rufen Sie applicationCache.swapCache() auf und der alte Cache wird durch den neuen ersetzt.
- var appCache = window.applicationCache;
- appCache.update(); // Versuch, den Cache des Benutzers zu aktualisieren
- …
- if (appCache.status == window.applicationCache.UPDATEREADY) {
- appCache.swapCache(); // Der Abruf war erfolgreich, tauschen Sie den neuen Cache ein
- }
Hinweis: Wenn Sie update() und swapCache() auf diese Weise verwenden, wird dem Benutzer die aktualisierte Ressource nicht angezeigt. Dadurch kann der Browser einfach prüfen, ob die Manifestdatei aktualisiert wurde, dann den angegebenen Update-Inhalt herunterladen und den App-Cache neu füllen. Damit Benutzer den aktualisierten Inhalt sehen können, sind daher zwei Seitendownloads erforderlich, einer zum Aktualisieren des App-Cache und einer zum Aktualisieren des Seiteninhalts.
Damit Benutzer die neueste Version Ihrer Website sehen können, richten Sie einen Listener ein, der beim Laden der Seite auf das Updateready-Ereignis wartet.
- // Überprüfen Sie, ob beim Laden der Seite ein neuer Cache verfügbar ist.
- window.addEventListener(‘load’, function(e) {
- window.applicationCache.addEventListener(‘updateready’, function(e) {
- if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
- // Browser hat einen neuen App-Cache heruntergeladen
- // Tauschen Sie es ein und laden Sie die Seite neu, um die neue Schärfe zu erhalten.
- window.applicationCache.swapCache();
- window.location.reload();
- } else {
- // Manifest hat sich nicht geändert
- }
- }, false);
- },
- falsch);
Ereignisse abhören und unterschiedliche Zustände entsprechend behandeln:
- var appCache = window.applicationCache;
- // Wird nach dem ersten Cache des Manifests ausgelöst
- appCache.addEventListener(‘cached’, handleCacheEvent, false);
- // Es wird immer nach einem Update gesucht
- appCache.addEventListener(‘checking’, handleCacheEvent,
- false);
- // Ein Update wurde gefunden. Der Browser ruft Ressourcen ab.
- appCache.addEventListener(‘downloading’, handleCacheEvent,
- false);
- // Das Manifest gibt 404 oder 410 zurück, der Download ist fehlgeschlagen,
- // oder das Manifest hat sich während des Downloads geändert
- appCache.addEventListener(‘error’, handleCacheError,
- false);
- // Wird nach dem ersten Download des Manifests ausgelöst
- appCache.addEventListener(‘noupdate’, handleCacheEvent,
- false);
- // Wird ausgelöst, wenn die Manifestdatei 404 oder 410 zurückgibt.
- // Dies führt dazu, dass der Anwendungscache gelöscht wird
- appCache.addEventListener(‘obsolete’, handleCacheEvent,
- false);
- // Wird für jede im Manifest aufgeführte Ressource ausgelöst, während sie abgerufen wird
- appCache.addEventListener(‘progress’, handleCacheEvent,
- false);
- // Wird ausgelöst, wenn die Manifestressourcen neu heruntergeladen wurden
- appCache.addEventListener(‘updateready’, handleCacheEvent,
- false);
Wenn der Download der Manifestdatei oder einer in der Datei angegebenen Ressource fehlschlägt, schlägt das gesamte Update fehl. In diesem Fall versucht der Browser weiterhin den alten Anwendungscache.
Hinweis:
1. Die Kapazitätsgrenze des Offline-Speichers der Site beträgt 5 MB.
2 Wenn die Manifestdatei oder eine intern aufgeführte Datei nicht normal heruntergeladen werden kann, wird der gesamte Aktualisierungsvorgang als Fehler betrachtet und der Browser wird fortgesetzt Um den alten Cache zu verwenden
3. Der HTML-Code, der auf das Manifest verweist, muss denselben Ursprung wie die Manifestdatei haben und sich in derselben Domäne befinden
4 Der im Manifest verwendete relative Pfad ist das Manifest Datei
5. Die CACHE-MANIFEST-Zeichenfolge sollte in der ersten Zeile stehen und erforderlich sein
6. Das System speichert automatisch die HTML-Datei, die auf die Manifestdatei verweist.
Der CACHE in der Manifestdatei enthält nichts Wenn es sich um eine implizite Deklaration handelt, muss sie in Front
8 liegen. Die Ressourcen in FALLBACK müssen denselben Ursprung haben wie die Manifestdatei
9 zwischengespeichert wird, fordert der Browser direkt den absoluten Pfad an und greift auch auf die Ressource im Cache zu.
10. Auch wenn das Manifest-Attribut nicht für andere Seiten auf der Site festgelegt ist, wird auf die angeforderte Ressource aus dem Cache zugegriffen, wenn sie sich im Cache befindet.
11 Wenn sich die Manifestdatei ändert, wird die Ressourcenanforderung selbst geändert löst ein Update aus
Das Obige ist eine Einführung in den relevanten Inhalt des HTML5-Offline-Caching-Manifests. Ich hoffe, es wird für das Lernen aller hilfreich sein.
Originaltext: http://www.cnblogs.com/hutuzhu/p/4871666.html
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
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
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
1387
52
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.
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.
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-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.
HTML-Eingabeplatzhalter
Sep 04, 2024 pm 04:54 PM
Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.
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
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.
