Une brève introduction aux API HTML5 hors ligne

1. Détection de prise en charge du navigateur

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

2. Détection du statut en ligne et hors ligne et événement
.

// 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
Pour utiliser la fonction hors ligne, vous devez spécifier quelles ressources sont hors ligne cache, ce qui se fait via l'attribut manifest< du 🎜>Spécifiez un fichier manifeste avec une extension .manifest. Les ressources qui doivent être mises en cache hors ligne, les ressources qui n'ont pas besoin d'être mises en cache et les pages de remplacement de demande ayant échoué sont toutes répertoriées dans le fichier manifeste. De plus, le type MIME du fichier manifeste doit être text/cache-manifest, et ce type MIME doit être défini côté serveur. La première ligne de la liste ne peut pas être commentée . La partie requête ayant échoué comprend deux aspects. Le premier est le contenu à demander, qui peut être un dossier ; le second est le contenu de remplacement de la requête ayant échoué.
Si vous devez
mettre à jour le cache, mettez simplement à jour le fichier manifeste et le navigateur mettra automatiquement à jour tous les caches. Cependant, à condition que le fichier manifeste ne soit pas mis en cache (c'est le cas par défaut), ce problème peut être résolu en modifiant les paramètres de cache du serveur. Les exemples sont les suivants :

MANIFESTE DE CACHE
# Signe dièse
comportement commentaire. Le "CACHE :" suivant peut être omis CACHE :

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

#ne pas mettre en cache la page d'inscription

#Vous pouvez utiliser un astérisque (*), afin que tout ne soit pas affiché. Aucun des ressources mises en cache seront mises en cache
NETWORK
signup.html

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

4. applicationCache

objet window.applicationCache est Web L'objet principal de l'application hors ligne
API, qui inclut l'attribut d'état du cache window.applicationCache.status et certains attributs d'événement liés à l'état du cache.

5. Statut et événements du cache

window.applicationCache.status a six valeurs, comme suit :
•0( UNCACHED ) : correspond à l'attribut d'événement oncached, pas de cache
•1 ( IDLE ) : correspondant à l'attribut d'événement oncached, toutes les ressources de la liste de cache sont dans l'état de cache.
•2(CHECKING) : Correspond à l'attribut d'événement onchecking et vérifie le cache.
•3(DOWNLOADING) : Correspond à l'attribut d'événement ondownloading, télécharger le cache.
•4(UPDATEREADY) : Correspond à l'attribut d'événement onupdateready et prépare la mise à jour du cache.
•5(OBSOLETE) : Correspondant à l'attribut d'événement onobsolete, une ressource a été mise en cache mais n'est pas dans la liste.
Il existe également trois attributs d'événement :
•onerror : Une erreur se produit.
•onnoupdate : Aucune mise à jour disponible.
•onprogress : Le cache est en cours de mise à jour.

Méthode 6.window.applicationCache.update()

Appelez cette méthode pour demander au navigateur de mettre à jour le cache, notamment en vérifiant la nouvelle version du fichier manifeste et en téléchargeant les nouvelles ressources nécessaires. S'il n'y a pas de cache ou si le cache est obsolète, une erreur sera générée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!