iKnowNow : Utiliser les capacités hors ligne de HTML5

01.16.2012

L’une de mes tâches les plus passionnantes chez DOOR3 est la R&D, c’est-à-dire *“Will ! Mon patron me donne la description d’une nouvelle technologie et je crée une “preuve de concept” (POC) qui prouve qu’elle fonctionne ou un rapport qui explique qu’elle ne fonctionne pas.

Vendredi dernier, j’ai été informé des fonctions hors ligne de HTML5, parfois appelées “cache d’application”. Ces derniers temps, la tendance sur le web est d’appeler les choses “applications”, probablement en raison de la prolifération des applications OS “natives” de nos jours, mais aussi parce que maintenant le web fait des choses plutôt que de simplement les montrer, c’est-à-dire le web 2.0.

Par exemple, disons qu’un client souhaite créer une application pour son entreprise, mais qu’il ne veut pas développer d’applications “natives” pour son système d’exploitation. Il veut donc des applications web, car elles peuvent être exécutées sur n’importe quel appareil compatible avec le web. Cependant, le client souhaite également que les applications fonctionnent hors ligne. C’est là qu’intervient la nouvelle norme de développement web -HTML5- et ses fantastiques nouvelles capacités de mise en cache des applications.

La mise en cache HTML5 fonctionne comme suit : dans les deux premières lignes de votre fichier .html, vous définissez un fichier “cache manifest”. Ce fichier manifeste de cache est simplement une liste d’autres fichiers que vous souhaitez ou non mettre en cache pour une utilisation hors ligne.

Exemple (dans le fichier .html) :

`<!DOCTYPE html>

` La DEUXIÈME ligne de ce fichier définit le manifeste comme test.manifest. Vous avez donc intérêt à créer ce fichier. Exemple (dans le fichier .manifest) : `CACHE MANIFEST CACHE : index.html index2.html Vidéo du chiot.mp4 Chaussure Rockport.PNG Rockport-Shoe-2.PNG` **What's in this?** Le fichier commence par la ligne CACHE MANIFEST. C'est important. En série. La ligne qui dit juste "CACHE :" est un en-tête de section qui vous dit que tout ce qui se trouve dans cette section doit être mis en cache. Cependant, dans un manifeste aussi simple que celui-ci, vous pourriez éliminer cette ligne et cela serait implicite et fonctionnerait quand même. Listez les fichiers nécessaires à l'affichage hors ligne. Dans ce cas, il s'agit d'un autre fichier .html, d'une vidéo et de quelques images. Rappelez-vous qu'il ne s'agit que d'un POC ; il n'est pas nécessaire que ce soit joli tant que le client n'a pas accès au site. **Optionnel:** Vous pouvez placer les fichiers que vous voulez ÉVITER de mettre en cache dans une section intitulée "RÉSEAU :" Vous pouvez également placer la page que vous souhaitez mettre en cache A LA PLACE de la page principale dans une section intitulée "FALLBACK :" **IMPORTANT!!!!** 1. Il s'agit d'un nouveau type de contenu. Votre serveur Apache n'est probablement pas configuré pour l'accepter. Vous devrez probablement ajouter la ligne suivante n'importe où dans votre fichier .htaccess : `AddType text/cache-manifest .manifest 2. Le serveur n'est pas configuré pour rafraîchir le manifeste du cache pendant des heures ou s'il est modifié. Si vous modifiez un fichier qui est mis en cache, vous feriez mieux de modifier votre fichier manifest pour déclencher un rafraîchissement. Sinon, vous risquez de rester bloqué sur l'ancienne version et de vous arracher les cheveux du lobe de l'oreille pendant ce temps. Il s'agit là d'un aperçu très succinct des éléments de base dont j'ai eu besoin pour réaliser mon POC. Pour plus d'informations, consultez votre bibliothèque locale ou visitez le site : [http://diveintohtml5.info/offline.html](http://diveintohtml5.info/offline.html)