Eine kurze Einführung in HTML5-Offline-APIs

1. Browser-Unterstützungserkennung

if
(window.application
Cache
) { 
      // this browser supports offline applications 
   }

2. Online- und Offline-StatusErkennung und Ereignis

// When the page loads, 
set
 the status to online or offline 
   function loadDemo() { 
      if (navigator.onLine) { 
         log("Online"); 
      } 
else
 { 
         log("Offline"); 
      } 
   } 
   // Now add event 
list
eners to notify a change in online status 
   window.addEventListener("online", function(e) { 
     log("Online"); 
   }, true); 
   window.addEventListener("offline", function(e) { 
     log("Offline"); 
   }, true);

3.manifest
Um die Offline-Funktion zu verwenden, müssen Sie angeben, welche Ressourcen offline sind Cache, was über das Manifest-Attribut< des erfolgt Tag 🎜>Geben Sie eine Manifestdatei mit der Erweiterung .manifest an. Ressourcen, die offline zwischengespeichert werden müssen, Ressourcen, die nicht zwischengespeichert werden müssen, und fehlgeschlagene Anforderungsersetzungsseiten werden alle in der Manifestdatei aufgeführt. Darüber hinaus muss der MIME-Typ der Manifestdatei text/cache-manifest sein und dieser MIME-Typ muss serverseitig definiert werden. Die erste Zeile der Liste kann nicht kommentiert werden. Der fehlgeschlagene Anforderungsteil umfasst zwei Aspekte: Der erste ist der anzufordernde Inhalt, der zweite ist der Ersatzinhalt der fehlgeschlagenen Anforderung.
Wenn Sie
den Cache aktualisieren müssen, aktualisieren Sie einfach die Manifestdatei und der Browser aktualisiert automatisch alle Caches. Sofern die Manifestdatei jedoch nicht zwischengespeichert wird (dies ist standardmäßig der Fall), kann dies durch Ändern der Cache-Einstellungen des Servers behoben werden. Beispiele sind wie folgt:

CACHE MANIFEST
# Nummernzeichen
Verhalten Kommentar. Der folgende „CACHE:“ kann weggelassen werden CACHE:

  # 
file
s to cache 
   about.html 
   
html5
.css 
   index.html 
   happy-trails-rc.gif 
   lake-tahoe.JPG

#Anmeldeseite nicht zwischenspeichern

#Sie können ein Sternchen (*) verwenden, damit alles nicht angezeigt wird. Keine der zwischengespeicherten Ressourcen werden zwischengespeichert
NETWORK
signup.html

 FALLBACK 
   signup.html     offline.html 
   /app/ajax/      default.html
   media/          images/video-fallback.jpg
   /               /offline.html

4. applicationCache

Objekt window.applicationCache Objekt ist Web Das Kernobjekt der Offline-Anwendung
API, das das Cache-Statusattribut window.applicationCache.status und einige Ereignisattribute im Zusammenhang mit dem Cache-Status enthält.

5. Cache-Status und Ereignisse

window.applicationCache.status hat sechs Werte wie folgt:
•0( UNCACHED ): entspricht dem oncached-Ereignisattribut, kein Cache
•1 (IDLE): Entsprechend dem Ereignisattribut oncached befinden sich alle Ressourcen in der Cache-Liste im Cache-Status.
•2(CHECKING): Entspricht dem Ereignisattribut onchecking und überprüft den Cache.
•3(DOWNLOADING): Entspricht dem Ereignisattribut ondownloading, Download-Cache.
•4(UPDATEREADY): Entspricht dem Ereignisattribut onupdateready und ist bereit, den Cache zu aktualisieren.
•5(OBSOLETE): Entsprechend dem onobsolete-Ereignisattribut wurde eine Ressource zwischengespeichert, ist aber nicht in der Liste.
Es gibt außerdem drei Ereignisattribute:
•onerror: Ein Fehler tritt auf.
•onnoupdate: Keine Updates verfügbar.
•onprogress: Der Cache wird aktualisiert.

6.window.applicationCache.update()-Methode

Rufen Sie diese Methode auf, um den Browser aufzufordern, den Cache zu aktualisieren, einschließlich der Überprüfung der neuen Version der Manifestdatei und des Herunterladens erforderlicher neuer Ressourcen. Wenn kein Cache vorhanden ist oder der Cache veraltet ist, wird ein Fehler generiert.

Das obige ist der detaillierte Inhalt vonEine kurze Einführung in HTML5-Offline-APIs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!