J’ai abordé dans un article précédent la gestion du mode offline en HTML 5.

Voyons comment débugger un site avec une gestion du mode offline.

Chrome

Comment souvent, c’est la barre d’outils de Chrome qui s’avère la plus efficace pour déboguer. Sous Chrome, les événements liés à la mise à jour du cache sont affichés dans la console. On peut ainsi voir la liste des fichiers qui sont téléchargés pour être mis en cache.

2 petite précisions qui ont leur importance :

• Ne mettez pas le manifest lui-même en cache où il sera impossible au navigateur de savoir qu’une nouvelle version est disponible.
• Comme le document a déjà été chargé dans le navigateur à partir du cache, la nouvelle version ne sera affichée qu’après rechargement (manuel ou via programmation). (cf abonnement à l’événement updateready ci-dessous)

//Méthode appelée apres mise à jour du cache
function onUpdateReady() {
  alert('Nouvelle version chargée!');
}
//on s'abonne à l'événement de mise à jour du cache
window.applicationCache.addEventListener('updateready', onUpdateReady);
if(window.applicationCache.status === window.applicationCache.UPDATEREADY) {
  onUpdateReady();
}

La console affiche les fichiers en erreurs. Il faut savoir que si il y a une erreur, le cache n’est pas mis à jour.

La liste des ressources en cache peut être visualiser dans la barre d’outils > Ressources > Application Cache.

Il est également possible de vider le cache en se rendant à l’URL chrome://appcache-internals/. Cette page permet de visualiser la liste des sites ayant des données dans l’application cache. Pour chaque site, il est possible de visualiser la liste des fichiers (View Entries) et de supprimer le cache (Remove).

Autres Navigateurs

Afin de débugger plus facilement, voici un script à placer sur votre site qui va logger dans la console les événements liés au cache et simule une mise à jour toutes les 10s.

Dans Firebug, il est possible de consulter, dans l’onglet DOM, l’objet ApplicationCache mais il est toujours vide !!!

Ressources

• Article sur l’utilisation de Application Cache sur le MDN
• Guide d’utilisation d’Application Cache pour les débutants sur HTML5Rocks (en)