Die Unterstützung der Offline-Entwicklung von Webanwendungen ist ein weiterer Schwerpunkt von HTML5. Bei den sogenannten Offline-Webanwendungen handelt es sich um Anwendungen, die auch dann noch ausgeführt werden können, wenn das Gerät keinen Zugriff auf das Internet hat.
Die Entwicklung von Offline-Webanwendungen erfordert mehrere Schritte. Zunächst muss sichergestellt werden, dass die App weiß, ob das Gerät über einen Internetzugang verfügt, damit sie als Nächstes die richtigen Maßnahmen ergreifen kann. Dann muss die Anwendung auch Zugriff auf bestimmte Ressourcen (Bilder, Javascript, CSS usw.) haben, um ordnungsgemäß zu funktionieren. Das Beste ist, dass es einen lokalen Speicherplatz für Benutzer zum Speichern von Daten gibt und das Lesen und Schreiben nicht behindert wird, unabhängig davon, ob sie Zugang zum Internet haben.
HTML5 und die zugehörigen APIs ermöglichen die Entwicklung von Offline-Anwendungen.
Offline-ErkennungUm zu wissen, ob das Gerät online oder offline ist, definiert HTML5 ein navigator.onLine-Attribut. Der Wert „true“ gibt an, dass das Gerät auf das Internet zugreifen kann, und der Wert „false“ gibt an, dass das Gerät offline ist.
if (navigator.onLine) { // Normal arbeiten} else { // Aufgaben im Offline-Zustand ausführen}Da es bei navigator.onLine bestimmte Kompatibilitätsprobleme gibt, definiert HTML5 neben dem Attribut navigator.onLine auch zwei Ereignisse, online und offline, um besser feststellen zu können, ob das Netzwerk verfügbar ist.
Diese beiden Ereignisse werden auf dem Fensterobjekt ausgelöst, wenn das Netzwerk zwischen Offline und Online wechselt:
window.addEventListener('online', function() { // Funktioniert normal}); window.addEventListener('offline', function() { // Führt Aufgaben aus, wenn offline});In praktischen Anwendungen ist es am besten, den Anfangszustand nach dem Laden der Seite über navigator.onLine abzurufen. Verwenden Sie dann die beiden oben genannten Ereignisse, um festzustellen, ob sich der Netzwerkverbindungsstatus ändert. Wenn das obige Ereignis ausgelöst wird, ändert sich auch der Wert der Eigenschaft navigator.onLine, diese Eigenschaft muss jedoch manuell abgefragt werden, um Änderungen im Netzwerkstatus zu erkennen.
AnwendungscacheDer Anwendungscache von HTML5, kurz Appcache, ist speziell für die Entwicklung von Offline-Webanwendungen konzipiert. Appcache ist ein Cache-Bereich, der vom Cache des Browsers getrennt ist. Um Daten in diesem Cache zu speichern, können Sie eine Manifestdatei verwenden, die die herunterzuladenden und zwischenzuspeichernden Ressourcen auflistet. Beispiel für eine Beschreibungsdatei:
CACHE MANIFEST# Commentfile.jsfile.css
Dann zitieren Sie in HTML:
<html manifest=./xxx.manifest>
Der MIME-Typ der Datei xxx.manifest muss text/cache-manifest sein.
Der Kern dieser API ist das applicationCache-Objekt. Dieses Objekt verfügt über ein Statusattribut. Der Wert des Attributs ist eine Konstante, die den folgenden aktuellen Status des Anwendungscaches angibt:
Verwandte Veranstaltungen:
Im Allgemeinen werden diese Ereignisse beim Laden der Seite in der oben genannten Reihenfolge ausgelöst. Die oben genannten Ereignisse können auch manuell durch Aufruf der update()-Methode ausgelöst werden.
Datenspeicherung KekseHTTP-Cookies, meist direkt Cookies genannt, werden auf dem Client zum Speichern von Sitzungsinformationen verwendet. Der Standard erfordert, dass der Server den Set-Cookie-HTTP-Header als Teil der Antwort auf jede HTTP-Anfrage sendet, die Sitzungsinformationen enthält. Beispiel für einen Server-Antwortheader:
HTTP/1.1 200 OK
Inhaltstyp: Text/HTML
Set-Cookie: Name=Wert
Anderer-Header: Anderer-Header-Wert
Der Browser setzt dann Cookies für die Sitzungsinformationen und fügt dann den Cookie-HTTP-Header zu jeder Anfrage hinzu, um die Informationen an den Server zurückzusenden, wie unten gezeigt:
GET /index.html HTTP/1.1
Cookie: Name=Wert
Anderer-Header: Anderer-Header-Wert
Mithilfe der an den Server zurückgesendeten Zusatzinformationen lässt sich eindeutig verifizieren, von welcher Anfrage der Client kam.
Zu den vollständigen Cookies gehören: