Thursday, June 28, 2012

HTML5 Cache Manifest

Cache.Manifest

 Présentation

Le cache.Manifest est un fichier permettant de mettre nos pages dans le cache du navigateur souhaitées, de spécifier les pages qui ont nécessairement besoin d’un accès réseau mais aussi de spécifier une page d’erreur en cas d’erreur réseau.Sur les mobiles, le cache.Manifest est disponible 
depuis les vesions IOs 2.1 et Android 2.0

 Structure du fichier

La structure du fichier Manifest doit commencer par :
  1. CACHE MANIFEST
Puis on ajoute les fichiers que l’on souhaite mettre en cache :
  1. CACHE:
  2. Index.htmll
  3. http://monsite.com/Index2.html
On peut saisir le chemin des pages en absolue ou en relative. Après le chargement des pages  dans le cache local du navigateur, lors de la prochaine visite sur le site, le navigateur chargera la page directement depuis le cache local, il n’y aura donc pas d’accès au serveur.
Pour les pages qui ont besoin d’avoir un accès réseau :
  1. NETWORK :
  2. Upload.html
Enfin pour personnaliser un message d’erreur dans le cas où la fonctionnalité n’est pas disponible en mode déconnecté :
  1. FALLBACK :
  2. / /offline.html
Il est aussi possible de mettre un message d’erreur différente par fonctionnalité, de cette façon :
  1. /fonctionnalite1.html /offline1.html
  2. /fonctionnalite2.html /offline2.html
Enfin il est possible de versionner son fichier manifest :
  1. CACHE MANIFEST
  2. #V13.72
  3. CACHE:
Ce versionning permet au navigateur de savoir quand il doit mettre à jour ou non son cache.

Quelques règles

Il est possible d’ajouter des commentaires grâce au caractère « # ».
Les lignes vides sont ignorées.
Le manifeste doit utiliser le type MIME : text/cache-manifest. Toutes les ressources utilisant le type MIME  text/cache-manifest doivent utiliser la syntaxe décrite ci-dessus.

 Intégration à la page HTML

 Après avoir créé son fichier cache.Manifest , il suffit d’ajouter à la balise html la propriété manifest comme ci-dessous :
  1. <html manifest="./cache.Manifest">

Mise à jour du cache

     Maintenant que l’on a créé et ajouté notre fichier Manifest  à notre site.
     Lorsqu’un utilisateur visite une page ayant déclaré un manifeste, le navigateur va essayer de mettre à jour le cache.
     Il le fait en allant chercher une copie de manifeste et , si le manifeste à changer depuis la dernière visite alors il re-télécharge toutes les ressources du manifeste et les mets de nouveau en cache.

Application Cache API

Il existe via javascript une interface permettant de manipuler le cache : ApplicationCache 
Pour obtenir l’objet ApplicationCache dans une windows : 
  1. var cache = window.applicationCache
Pour obtenir le statut courant du cache applicatif, il suffit d’appeler la propriété : cache.status
     Le statut peut être :
  • UNCACHED = 0
  • IDLE = 1
  • CHECKING = 2
  • DOWNLOADING = 3
  • UPDATEREADY = 4
  • OBSOLETE = 5

Méthodes

3 méthodes sont disponibles sur cette interface :
  • void update()
Permet d’invoker le processus de mise à jour du cache de l’application.Appeler cette méthode n’est pas forcément nécessaire car le user agents aura généralement pris le soin de mettre à jour le cache de l’application automatiquement.
Il peut être intéressant d’appeler cette méthode lorsqu’une application à une durée de vie longue.  
Par exemple : Un WebMail ouvert  dans un navigateur depuis 1 semaine. L’application peut alors tester chaque jour s’il y a une mise à jour du manifest.
  • void abort()
Permet d’annuler me processus de mise à jour du cache de l’application.
  • void swapCache()

Evénements

  • checking
Levé lorsque le user agent est en cours de contrôle ou attend le téléchargement du manifeste pour la première fois.
Toujours le premier événement de la séquence.
  • error
Le manifeste était une page 404 ou 410, donc la tentative de mettre en cache a été abandonnée. 
Le manifeste n’avait pas changé, mais la page référençant le manifeste n’a pas pu être téléchargée correctement.
Une erreur fatale s’est produite lors de l’extraction des ressources énumérées dans le manifeste.Le manifeste a changé alors que la mise à jour a été exécutée.
  • noupdate
Le manifeste n’avait pas changé.
  • dowloading
Le user agent a trouvé une mise à jour et est allé la chercher ou en cours de téléchargement des ressources listées dans le manifeste.
  • progress
Le user agent en cours de téléchargement des ressources listées dans le manifeste.
  • updateready
Les ressources listées dans le manifeste ont été nouvellement re-téléchargées, et le script peut utiliser swapCache() pour utiliser le nouveau cache.
  • cached
Les ressources listées dans le manifeste ont été téléchargées et l’application est maintenant en cache.
  • obsolete
Le manifeste constate qu’il est devenu une page 404 ou 410, donc le cache de l’application est en cours de suppression.

Conclusion

     Grâce au manifeste, il est donc possible de naviguer sur un site internet en mode Offline.

     Cette approche est intéressante notamment pour un site à destination des Devices car en mobilité on peut avoir des pertes de réseaux.


     Plus tard nous verrons comment construire le fichier cache.Manifest dynamiquement dans une architecture HTML5 + MVC  ASP. NET.