[HTML 5] Offline et stockage client

Une application web fonctionnant sans connexion réseau et capable de sauvegarder les données de l’utilisateur, quelle drôle d’idée ? Grâce à HTML 5 se sera pourtant bientôt possible !

Mercredi 8 février 2012, je me suis rendu aux MS TechDays 2012 dans le but d’assister à une présentation répondant au nom de « Création d’une application HTML5 gérant l’offline et le stockage client » afin d’en savoir un peu plus sur le sujet.

L’objectif de cette présentation était de découvrir quatre briques importantes d’HTML 5 : « le mode offline », « le DOM storage », « l’Indexed DB » et « le drag & drop ».

Les deux intervenants Microsoft que sont David Rousset, responsable de la relation avec les développeurs Web,  et David Catuhe, spécialiste interface utilisateur, ont commencé la session par une démonstration de SnapX, une application de gestion de diaporamas sur laquelle a été basée toute la présentation. SnapX est entièrement développée en HTML 5.

David Rousset a alors présenté le mode Offline permettant l’utilisation d’une application web sans connectivité réseau permanente. Le principe est le suivant : L’application est téléchargée par le navigateur comme une simple application web à la différence que celle-ci indique au navigateur la liste exhaustive des fichiers nécessaires à son fonctionnement en mode hors ligne. Tout ceci grâce à la définition d’un fichier « manifest » dans lequel on précise, les ressources hors ligne, les ressources en ligne et les ressources à utiliser en cas d’erreurs.

L’application SnapX, est utilisable en mode hors ligne grâce à cette technique mais elle permet aussi l’import de fichiers images ainsi que leurs manipulations et leurs sauvegardes, normal me direz-vous pour un diaporama… David Catuhe nous a alors décrit les méthodes utilisées pour permettre ces fonctionnalités en passant par la manipulation des fichiers grâce à la « File API » et la brique « DOM storage » qui permet de sauvegarder jusqu’à 10 Mo de données sur le poste client. Cette nouvelle brique qui permet d’outrepasser les limites des cookies, embarque deux objets que sont le localStorage (données partagées pour une application) et le sessionStorage (données de session uniquement).

Pour aller un peu plus loin dans la sauvegarde des données utilisateurs en local, la présentation s’est ensuite orientée sur la brique IndexedDB fournie par HTML5. Véritable base de données NoSQL, elle permet de stocker des objets Javascript (typiquement des objets JSON) et est totalement sécurisée (les bases de données d’une application sont liées au domaine). Il n’y a pour le moment pas de limitation sur la quantité de données et celle-ci varie selon les navigateurs. Nos intervenants lors de cette session nous ont laissé penser qu’une forme de limitation sera mise en place avec validation par l’utilisateur lorsque la spécification sera finalisée. Petit plus de la présentation, ils nous ont indiqué une ressource très intéressante permettant d’afficher le contenu de l’IndexedDB (aller sur http://blogs.msdn.com/b/ie/archive/2012/01/25/debugging-indexeddb-applications.aspx)… pratique pour débuguer !

Cette session s’est enfin terminée par une présentation de la brique « Drag & Drop », une fonctionnalité déjà possible avec les frameworks Javascript (jQuery…) existant mais devenue native avec HTML5. Rentrée dans les mœurs des utilisateurs, cette fonctionnalité offre la possibilité d’améliorer l’ergonomie des applications en simplifiant les interactions entre le bureau et le navigateur web.

Ces présentations sont aussi l’occasion de récupérer des bonnes pratiques ou des astuces que l’on ne trouve pas partout. J’en ai retenues deux :

– La spécification n’étant pas encore terminée, les implémentations des API instables sont systématiquement préfixées en fonction de l’organisme qui les a implémentées. Ainsi, l’implémentation de IndexedDB sur IE sera windows.MsIndexedDB, sur FireFox windows.MozIndexedDB, etc.

– Pour savoir si un navigateur implémente une fonctionnalité, il faut tester l’existence ce cette fonctionnalité et non la version du navigateur.

Pour aller plus loin :

http://www.caniuse.com (liste les fonctionnalités HTML5 disponibles en fonction des navigateurs)

http://www.catuhe.com

http://blogs.msdn.com/b/ie/ (IE team Blog)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *