API du cache d’application (« AppCache »)

Internet Explorer 10 et les applications du Windows Store en JavaScript prennent en charge l’API du cache d’application (ou AppCache), conformément à la spécification HTML5, qui vous permet de créer des applications Web hors connexion. AppCache permet aux pages Web de mettre en cache (ou d’enregistrer) des ressources localement, notamment des images, des bibliothèques de scripts, des feuilles de style et bien plus encore.En outre, AppCache permet de servir les URL à partir du contenu en cache à l’aide de la notation URI (Uniform Resource Identifier) standard.

En utilisant AppCache pour enregistrer les ressources localement, vous améliorez les performances d’une page Web en limitant le nombre de demandes envoyées au serveur d’hébergement ; vous activez aussi l’accès hors connexion aux ressources en cache.

Pour mettre en cache les ressources localement :

1. Créez un fichier manifeste qui définit les ressources à enregistrer.
2. Référencez le fichier manifeste dans toutes les pages Web conçues pour utiliser les ressources mises en cache.

Création d’un fichier manifeste

Le fichier manifeste est un fichier texte qui définit le comportement de mise en cache des ressources utilisées par la page Web, comme le montre l’exemple suivant.


CACHE MANIFEST

CACHE:
# Defines resources to be cached.
script/library.js
css/stylesheet.css
images/figure1.png

FALLBACK:
# Defines resources to be used if non-cached
# resources cannot be downloaded, for example
# when the browser is offline..
photos/ figure2.png

NETWORK:
# Defines resources that will not be cached.
figure3.png


Les fichiers manifeste sont composés des sections suivantes :
  • CACHE : cette section définit les ressources qui seront stockées localement. Dans cet exemple, trois fichiers sont mis en cache.
  • FALLBACK : cette section définit les ressources à utiliser lorsque d’autres ressources ne sont pas disponibles. Par exemple, cet exemple définit figure2.png comme image de secours pour le dossier des photos. Si le navigateur ne peut pas accéder aux images dans le dossier des photos (parce que le navigateur est hors ligne ou que le serveur est indisponible), figure2.png remplacera les images indisponibles dans le balisage rendu. Par conséquent, figure2.png sera mise en cache localement.
  • NETWORK : cette section spécifie les ressources à exploiter lorsqu’une connexion réseau existe. Les ressources dans cette section ne sont pas mises en cache. Cette section permet l’utilisation de caractères génériques (*) pour indiquer que toutes les autres ressources ne doivent pas être mises en cache.
Les fichiers manifeste peuvent contenir n’importe lesquelles de ces sections et ces sections peuvent être répétées ; cependant, les nouvelles sections doivent commencer avec un en-tête suivi d’un signe deux-points (:), comme l’indique l’exemple précédent. Si aucun en-tête de section n’est fourni, l’en-tête CACHE: est supposé. L’exemple suivant montre un manifeste simplifié.

CACHE MANIFEST
script/library.js
css/stylesheet.css
images/figure1.png


En outre, les fichiers manifest :
  • doivent être codés avec l’encodage de caractères UTF-8 (8-bit Unicode Transformation Format) ;
  • doivent être servis avec un « MIME-type text/cache-manifest » ;
  • doivent commencer avec la ligne « CACHE MANIFEST » ;
  • peuvent contenir des commentaires, précédés par le signe dièse (#).

Pour plus d’informations, voir la syntaxe de manifeste-cache.

Déclaration d’un manifeste

Pour associer un manifeste à une page Web, affectez le nom du fichier manifeste à l’attribut manifest de l’élément html, comme le montre l’exemple suivant.


<!doctype html>
<html manifest="appcache.manifest">
 <head>
  <title>A Web Page</title>
  <script src="library.js"></script>
  <link rel="stylesheet" href="stylesheet.css">
 </head>
 <body onload="doSomething();">
  <p>Results go here: <span id="results">Unknown</span></p>
 </body>
</html>


Dans cet exemple, la page Web déclare « appcache.manifest » comme fichier manifeste. La déclaration du manifeste est interprétée comme n’importe quelle autre référence de fichier. Étant donné que cet exemple utilise un nom de fichier relatif, le manifeste est supposé être situé dans le même répertoire que la page Web elle-même.

Remarque  Les références de fichier dans le manifeste sont interprétées selon l’emplacement du fichier manifeste et non selon l’emplacement de la page Web qui le déclare.

Il n’est pas nécessaire que le nom de la page Web qui déclare le manifeste figure dans ce dernier ; les pages Web qui déclarent des manifestes sont mises en cache automatiquement.

Objet ApplicationCache

Internet Explorer 10 prend également en charge l’objet ApplicationCache, qui fournit les méthodes et les propriétés permettant de gérer le cache d’application. En outre, vous pouvez définir des gestionnaires d’événements qui affichent la progression du processus de mise en cache.

Utilisez la propriété applicationCache d’un objet window (ou un objet thread de travail) pour accéder à l’objet ApplicationCache, comme le monte l’exemple suivant.


var sCacheStatus = "Not supported";
if (window.applicationCache) 
{
   var oAppCache = window.applicationCache;
   switch ( oAppCache.status ) 
   {
      case oAppCache.UNCACHED : 
         sCacheStatus = "Not cached"; 
         break;
      case oAppCache.IDLE : 
         sCacheStatus = "Idle"; 
         break;
      case oAppCache.CHECKING : 
         sCacheStatus = "Checking"; 
         break;
      case oAppCache.DOWNLOADING : 
         sCacheStatus = "Downloading"; 
         break;
      case oAppCache.UPDATEREADY : 
         sCacheStatus = "Update ready"; 
         break;
      case oAppCache.OBSOLETE : 
         sCacheStatus = "Obsolete"; 
         break;
      default : 
        sCacheStatus = "Unexpected Status ( " + 
                       oAppCache.status.toString() + ")";
        break;
   }
}
return sCacheStatus;


Cet exemple utilise la propriété status pour déterminer l’état du cache d’application pour le document actuellement chargé par la page Web.

L’objet ApplicationCache prend en charge deux méthodes pour contrôler le cache. La méthode update initie une vérification asynchrone des mises à jour, similaire à celle effectuée lorsqu’une page Web est chargée. Un cache existant sera utilisé jusqu’à ce que la page Web soit rechargée ou que la méthode swapCache soit appelée. Pour commencer à utiliser un cache mis à jour, rechargez la page Web (manuellement ou par programmation) ou appelez la méthode swapCache. Étant donné que le cache est mis à jour lorsqu’une page Web est rechargée, il n’est pas nécessaire d’appeler la méthode swapCache avant de recharger ou d’actualiser la page Web.

Remarque  Le cache mis à jour n’est pas utilisé par la page Web tant qu’elle n’est pas rechargée, soit manuellement par l’utilisateur, soit par programmation à l’aide de la méthode reload de l’objet window.location.

L’objet ApplicationCache prend en charge les événements suivants :

  • L’événement cached est déclenché lorsque le manifeste est mis en cache.
  • L’événement checking est déclenché lorsque la présence d’une mise à jour est vérifiée.
  • L’événement downloading est déclenché lorsque les ressources du manifeste sont téléchargées.
  • L’événement progress est déclenché pendant que les ressources du manifeste sont téléchargées.
  • L’événement error est déclenché lorsqu’un problème se produit, comme un code de réponse HTML 404 ou 410. L’événement est également déclenché lorsque le fichier manifeste ne peut pas être téléchargé.
  • L’événement updateready est déclenché lorsqu’une nouvelle version du cache est disponible.
  • L’événement noupdate est déclenché lorsqu’une mise à jour a été demandée, mais le manifeste n’a pas été modifié.
  • L’événement obsolete est déclenché lorsque le cache actuel est signalé comme obsolète.

L’exemple suivant montre comment enregistrer des gestionnaires d’événements pour ces événements.


if (window.applicationCache) {
  var appCache = window.applicationCache;
   appCache.addEventListener('error', appCacheError, false);
   appCache.addEventListener('checking', checkingEvent, false);
   appCache.addEventListener('noupdate', noUpdateEvent, false);
   appCache.addEventListener('downloading', downloadingEvent, false);
   appCache.addEventListener('progress', progressEvent, false);
   appCache.addEventListener('updateready', updateReadyEvent, false);
   appCache.addEventListener('cached', cachedEvent, false);
}


Informations de référence sur les API

Application Cache API ("AppCache")

Démonstrations du site Internet Explorer Test Drive

Cookbook Demo
A Day in the Park

Billets IEBlog

Développement d’initiatives hors connexion grâce aux technologies HTML5 AppCache et IndexedDB

Spécification

HTML5: Section 5.7.2

 

 

Afficher:
© 2014 Microsoft