Présentation de l'API HTML5 AppCache |

Le 08/11/2010 à eu lieu chez Zenika une présentation par Peter Lubbers de la spécification HTML5 AppCache.

AppCache permet de mettre en cache, au niveau du navigateur web, une partie du site web que l’utilisateur est en train de visiter. Ce cache permet de pouvoir continuer à consulter le site web même si l’utilisateur perd sa connexion.

Le cas d’utilisation le plus classique est lorsque l’utilisateur prend l’avion : avec une partie du site mis en cache, l’utilisateur peut continuer à consulter les pages web même si il n’y a pas accéder avant d’embarquer.

La spécification de ce système est disponible sur le WHATWG et sur le W3C.

Fonctionnement

Pour peupler le cache à partir d’une page (par exemple « index.html »), il suffit d’ajouter l’attribut manifest à la balise html de cette page.

<html manifest="site.manifest">
<!-- Code de la page -->
</html>

Le contenu de l’attribut est le nom du fichier qui va contenir la description du contenu du cache. Par convention, son extension est « .manifest » et son MIME-type doit être « text/cache-manifest ».

Ce fichier est un fichier textuel, case-sensitive, qui contient trois sections : CACHE, NETWORK et FALLBACK.

CACHE va contenir la liste des ressources à télécharger et à placer dans le cache ; NETWORK liste les ressources qu’il faut forcément aller rechercher sur le réseau (et donc ne pas contenir en cache) ; Enfin FALLBACK permet de définir les pages qui seront affichées lorsqu’une ressource ne sera pas disponible (pas dans le cache et pas de connexion pour aller la récupérer).

CACHE MANIFEST
#Pages dans le cache. Si cette section est au début,
#on peut omettre le header "CACHE:"
CACHE:
index.html
next.html
fallback.html

#Pages à automatiquement rechercher sur le réseau
NETWORK:
versatile.html

#Toute page tombant en erreur va être remplacer par fallback.html
FALLBACK:
/ fallback.html

Si on accède, lorsqu’on est connecté, à la page index.html, le navigateur va enregistrer en cache les pages index.html, next.html et fallback.html. Si le réseau est coupé, et que l’utilisateur veut accéder à la page next.html, il pourra y accéder. Si par contre, il tente d’accéder à la page versatile.html, comme cette page est cherchée sur le réseau et que celui-ci est coupé, le navigateur va fournir la page fallback.html à la place.

Utilisation dans Javascript

Coté Javascript, on peut également exploiter l’AppCache, d’une part pour savoir si il est disponible (avec le booléen window.applicationCache), mais également pour faire un rafraîchissement de celui-ci (integer window.applicationCache.status pour connaître l’état du cache, méthode window.applicationCache.update() pour mettre à jour le cache et Window.applicationCache.swapCache() pour utiliser la nouvelle version mise à jour).

Il est également possible de gérer les évènements liés au cache.

Demo

Un exemple de site utilisant le AppCache, créé par Peter Lubbers, peut être télécharger ici.

Laisser un commentaire Annuler la réponse