Heim > Artikel > Web-Frontend > Was ist der h5-Offline-Cache? h5-Manifest-Offline-Caching-Anwendung (mit Code)
Was ist der h5-Offline-Cache? h5-Manifest-Offline-Caching-Anwendung (mit Code)
- 不言Original
- 2018-08-08 15:10:372917Durchsuche
Was ist manifest? Manifest ist eine Datei mit dem Suffix Minifest. Die Dateien, die zwischengespeichert werden müssen, werden in der Datei definiert. Browser, die Manifest unterstützen, speichern die Dateien lokal gemäß den Regeln der Manifestdatei, sodass auch dann keine Netzwerkverbindung besteht , Kann auf die Seite zugreifen.
Offline-Zugriff wird für webbasierte Anwendungen immer wichtiger. Obwohl alle Browser über Caching-Mechanismen verfügen, sind diese unzuverlässig und funktionieren möglicherweise nicht immer wie erwartet. HTML5 verwendet die ApplicationCache-Schnittstelle, um einige der durch Offline verursachten Probleme zu lösen.
Die Verwendung einer Cache-Schnittstelle bietet Ihrer Anwendung die folgenden drei Vorteile:
Offline-Browsing – Benutzer können Ihre gesamte Website offline durchsuchen
Geschwindigkeit – Die zwischengespeicherten Ressourcen sind lokale Ressourcen und werden daher schneller geladen.
Weniger Serverlast – der Browser lädt nur Ressourcen von Servern herunter, die sich geändert haben.
Application Cache (auch bekannt als AppCache) ermöglicht Entwicklern festzulegen, welche Dateien vom Browser zwischengespeichert werden sollen, damit Offline-Benutzer darauf zugreifen können. Selbst wenn der Benutzer offline auf die Schaltfläche „Aktualisieren“ drückt, wird Ihre App normal geladen und ausgeführt.
Beziehen Sie sich auf die Manifestdatei
Um das Anwendungs-Caching für eine Anwendung zu aktivieren, fügen Sie das Manifest-Attribut zum HTML-Tag des Dokuments hinzu:
Das Manifest-Attribut kann verweisen auf eine absolute URL oder einen relativen Pfad, die absolute URL muss jedoch vom gleichen Ursprung sein wie die entsprechende Webanwendung. Die Manifestdatei kann eine beliebige Dateierweiterung verwenden, muss jedoch mit dem richtigen MIME-Typ bereitgestellt werden (siehe unten).
<html manifest="/cache.manifest"> ... </html> 或 <html manifest="http://www.example.com/example.mf"> ... </html>
Sie sollten das Manifest-Attribut auf jeder Seite Ihrer Web-App hinzufügen, die Sie zwischenspeichern möchten. Wenn eine Webseite das Manifest-Attribut nicht enthält, speichert der Browser die Seite nicht im Cache (es sei denn, das Attribut ist explizit in der Manifestdatei aufgeführt).
Das bedeutet, dass jede Webseite, die der Benutzer durchsucht und die ein Manifest enthält, implizit zum Anwendungscache hinzugefügt wird. Daher müssen Sie nicht jede Seite in Ihrem Inventar auflisten.
Manifestdateien müssen als Text/Cache-Manifest-MIME-Typ bereitgestellt werden. Der Dateisuffixname kann angepasst werden (.manifest wird empfohlen), daher müssen wir den Dateityp mit dem Suffix .manifest als text/cache-manifest auf dem Server deklarieren.
Am Beispiel von Apache müssen wir zu httpd.conf Folgendes hinzufügen: AddType text/cache-manifest .manifest
Manifestdateistruktur
Das einfache Manifestformat lautet wie folgt:
CACHE MANIFEST index.html stylesheet.css images/logo.png scripts/main.js
In diesem Beispiel werden vier Dateien auf der Webseite zwischengespeichert, die diese Manifestdatei angibt.
Sie müssen auf die folgenden Punkte achten:
Die CACHE MANIFEST-Zeichenfolge sollte in der ersten Zeile stehen und ist unerlässlich.
Die zwischengespeicherte Datengröße einer Website darf 5 MB nicht überschreiten. Wenn Sie jedoch eine App für den Chrome Web Store schreiben, können Sie unlimitedStorage verwenden, um diese Einschränkung aufzuheben.
Wenn die Manifestdatei oder die darin angegebenen Ressourcen nicht heruntergeladen werden können, kann der gesamte Cache-Aktualisierungsprozess nicht fortgesetzt werden. In diesem Fall verwendet der Browser weiterhin den ursprünglichen Anwendungscache.
Sehen wir uns ein komplexeres Beispiel an:
CACHE MANIFEST # 2010-06-18:v2 # Explicitly cached 'master entries'. CACHE: /favicon.ico index.html stylesheet.css images/logo.png scripts/main.js # Resources that require the user to be online. NETWORK: login.php /myapi http://api.twitter.com # static.html will be served if main.py is inaccessible # offline.jpg will be served in place of all images in images/large/ # offline.html will be served in place of all other .html files FALLBACK: /main.py /static.html images/large/ images/offline.jpg *.html /offline.html
Zeilen, die mit „#“ beginnen, sind Kommentarzeilen, können aber auch für andere Zwecke verwendet werden. Beispiel: Cache aktualisieren
Der App-Cache wird nur aktualisiert, wenn sich seine Manifestdatei ändert. Wenn Sie beispielsweise eine Bildressource oder eine JavaScript-Funktion ändern, werden diese Änderungen nicht erneut zwischengespeichert. Sie müssen die Manifestdatei selbst ändern, damit der Browser die Cache-Datei aktualisieren kann. Durch das Erstellen von Kommentarzeilen mit generierten Versionsnummern, Datei-Hashes oder Zeitstempeln wird sichergestellt, dass Benutzer über die neueste Version Ihrer Software verfügen.
Sie können den Cache auch programmgesteuert aktualisieren, wenn eine neue Version verfügbar ist, wie im Abschnitt „Aktualisieren des Caches“ beschrieben.
Wenn die Seite eine Cache-Manifestdatei einführt, muss die Manifestdatei alle für die aktuelle Seite erforderlichen Dateien (CSS, JS, Bild ...) enthalten, andernfalls wird sie nicht geladen, sodass die Dateien nicht geladen werden Dateien, die zwischengespeichert werden müssen, werden entfernt. Es wird empfohlen, dem Eintrag NETWORK in der Datei ein Sternchen * hinzuzufügen, um anzugeben, dass die Liste aller anderen Dateien
die folgenden drei verschiedenen Teile enthalten kann: CACHE, NETWORK und FALLBACK .
CACHE:
Dies ist der Standardteil des Eintrags. Die unter diesem Header aufgeführten Dateien (oder die Dateien unmittelbar nach CACHE MANIFEST) werden beim ersten Herunterladen explizit zwischengespeichert.
NETZWERK:
Die in diesem Abschnitt aufgeführten Dateien sind Ressourcen auf der Whitelist, die mit dem Server verbunden werden müssen. Alle Anfragen für diese Ressourcen umgehen den Cache, unabhängig davon, ob der Benutzer offline ist. Platzhalter können verwendet werden.
FALLBACK:
Dieser Abschnitt ist optional und wird verwendet, um eine Fallback-Seite anzugeben, wenn auf die Ressource nicht zugegriffen werden kann. Der erste URI repräsentiert die Ressource und der zweite die Fallback-Webseite. Beide URIs müssen verwandt sein und denselben Ursprung wie die Manifestdatei haben. Platzhalter können verwendet werden.
Bitte beachten Sie: Die Abschnitte können in beliebiger Reihenfolge angeordnet werden und jeder Abschnitt kann wiederholt in derselben Liste erscheinen.
Die folgende Liste definiert die „umfassende“ Seite (offline.html), die angezeigt wird, wenn ein Benutzer versucht, offline auf das Stammverzeichnis der Site zuzugreifen, und gibt außerdem an, dass alle anderen Ressourcen (z. B. die auf Remote-Sites). ) erfordern eine Internetverbindung.
CACHE MANIFEST # 2010-06-18:v3 # Explicitly cached entries index.html css/style.css # offline.html will be displayed if the user is offline FALLBACK: / /offline.html # All other resources (e.g. sites) require the user to be online. NETWORK: * # Additional resources to cache CACHE: images/logo1.png images/logo2.png images/logo3.png
Bitte beachten Sie: HTML-Dateien, die auf Manifestdateien verweisen, werden automatisch zwischengespeichert. Sie müssen es also nicht zu Ihrer Liste hinzufügen, wir empfehlen Ihnen jedoch, dies zu tun.
Bitte beachten Sie: HTTP-Cache-Header und Cache-Limits, die auf über SSL bereitgestellten Seiten festgelegt sind, werden durch Cache-Manifeste ersetzt. Daher können über https bereitgestellte Webseiten offline ausgeführt werden.
Cache aktualisieren
Apps bleiben im Offline-Zustand zwischengespeichert, es sei denn, eines der folgenden Ereignisse tritt ein:
Vom Benutzer gelöscht. Entfernen Sie die Datenspeicherung des Browsers Ihrer Website.
Die Manifestdatei wurde geändert. Hinweis: Das Aktualisieren einer im Manifest aufgeführten Datei bedeutet nicht, dass der Browser die Ressource erneut zwischenspeichert. Die Manifestdatei selbst muss geändert werden.
Der Anwendungscache wird programmgesteuert aktualisiert.
Empfohlene verwandte Artikel:
Was ist HTML5-Offline-Cache? Manifest_HTML5-Tutorial-Fähigkeiten
H5-Anwendung Cache-Manifest-spezifische Einführung
Das obige ist der detaillierte Inhalt vonWas ist der h5-Offline-Cache? h5-Manifest-Offline-Caching-Anwendung (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!