Archives par mot-clé : offline

HTML 5 : Debogage du mode offline

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.

Mise à jour du cache applicatif dans Chrome

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.

Erreur lors de la mise à jour du cache applicatif

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

Visualisation du cache applicatif dans l'onglet Ressources

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).

Gestion du cache applicatif de tous les sites dans Chrome

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

HTML5 : Gestion du Offline

Une des nouveautés apportées par HTML5 est le support du mode Offline. Ainsi, vous allez pouvoir utiliser un site sans être connecté à Internet, en ayant préalablement visité ce site bien entendu.

Manifest

La gestion du offline se fait via l’utilisation d’un fichier Manifest. Ce fichier va décrire les fichiers à garder en mémoire pour une utilisation ultérieure en mode offline.

Ce fichier est composé de 3 parties :

  • CACHE : la liste des fichiers à mettre en cache
  • OFFLINE : la liste des fichiers à mettre en cache pour une utilisation en mode déconnecté
  • NETWORK : les fichiers à ne charger qu’en mode connecté.

Déclaration du manifest

La déclaration du fichier se fait dans la balise html de votre page. Dans le cas de mon article sur l’utilisation de Knockout, j’avais développé une page permettant le support du mode offline. Voici la déclaration du fichier manifest de la page (volley.manifest)

<html manifest="volley.manifest">

Voici le fichier manifest (j’ai mis des fichiers pour les parties OFFLINE et NETWORK pour exemple). (l’utilisation du # permet de mettre une ligne en commentaire)

CACHE MANIFEST

# v0.1.0.3

CACHE:
volley.html
include/style.css
include/ics.css
include/volley.svg
include/knockout-2.0.0.js
include/jquery-1.7.1.min.js

FALLBACK:
#liste des fichiers à ne charger qu'en mode offline
include/offline.js

NETWORK:
#liste des fichiers à ne charger qu'en mode connecté
include/network.js

On peut noter la présence d’un numéro de version du fichier manifest. En effet, lors de la modification d’un des fichiers du cache, seulement une modification du fichier manifest permettra la mise à jour du fichier modifié. Une des pratiques consiste à mettre un numéro de version que l’on incrémentera à chaque mise à jour afin que les fichiers soit remis à jour dans le cache navigateur.

Détection via JavaScript

Il est également possible de détecter l’état de la connexion en JavaScript. Ainsi on pourra détecter une déconnexion/perte de réseau et adapter le comportement. Cela peut se révéler pratique notamment en contexte mobile.

La détection se fait via une propriété onLine sur l’objet navigator. Des événements online et offline (la documentation sur le MDN) sont également émis à chaque connexion/déconnexion. Attention toutefois, sur un ordinateur, cet événement n’est émis que si on passe on mode « Travailler hors connexion ». Il existe des techniques permettant la détection dans ce cas précis. Pour en savoir plus, je vous invite à lire l’article Application hors-ligne HTML5 – le JavaScript

Ressources