Heim > Artikel > Web-Frontend > Beispielcode für das Offline-Caching von HTML5-Manifesten
Beispielcode für das Offline-Caching von HTML5-Manifesten
- 青灯夜游nach vorne
- 2018-10-09 16:14:492188Durchsuche
Der Offline-Zugriff wird für netzwerkbasierte Anwendungen immer wichtiger. Ich hoffe, dass dieser Artikel relevante Informationen zum HTML5-Manifest-Offline-Caching enthält Es wird nützlich sein. Ihr habt geholfen.
Einführung
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 App-Caching für eine App zu aktivieren, fügen Sie das Manifest-Attribut zum HTML-Tag des Dokuments hinzu:
Das Manifest-Attribut kann auf eine absolute URL oder einen relativen Pfad verweisen, die absolute URL muss jedoch denselben Ursprung haben 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>
oder
<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 Name des Dateisuffixes kann angepasst werden (.manifest wird empfohlen), daher müssen wir den Dateityp mit dem Suffix .manifest auf der Serverseite als text/cache-manifest deklarieren.
Am Beispiel von Apache müssen wir zu httpd.conf Folgendes hinzufügen: AddType text/cache-manifest .manifest
Manifestdateistruktur
Ein einfaches 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 Zeichenfolge CACHE MANIFEST 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 Anwendungscache 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
请注意：系统会自动缓存引用清单文件的 HTML 文件。因此您无需将其添加到清单中，但我们建议您这样做。
请注意：HTTP 缓存标头以及对通过 SSL 提供的网页设置的缓存限制将被替换为缓存清单。因此，通过 https 提供的网页可实现离线运行。
更新缓存
应用在离线后将保持缓存状态，除非发生以下某种情况：
用户清除了浏览器对您网站的数据存储。
清单文件经过修改。请注意：更新清单中列出的某个文件并不意味着浏览器会重新缓存该资源。清单文件本身必须进行更改。
应用缓存通过编程方式进行更新。
总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问Html5视频教程！
相关推荐：
Das obige ist der detaillierte Inhalt vonBeispielcode für das Offline-Caching von HTML5-Manifesten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!