Un des effets secondaires de Paris-web parmi les plus inattendus a été de pouvoir tester le fonctionnement du cache manifest que j'essayais de faire fonctionner depuis quelque temps, la faute en revenant à mon iPod touch qui n'a jamais voulu faire fonctionner le Wifi donné pour les conférences.
Si l'idée de conférences sans Wifi était au final une très bonne chose, ce n'est pas le sujet du jour comme vous vous en doutez.
J'ai été plutôt surpris de la relative simplicité pour implémenter un cache manifest. Ah pardon, j'oubliais : un cache manifest permet de stocker localement des fichiers sur la machine de l'internaute, afin de pouvoir faire fonctionner une application ou un site hors-ligne, c'est une des nouveautés apportées par HTML5.
Voici un guide rapide pour l'implémenter. Tout d'abord, il vous faut ajouter dans un .htaccess le bon type MIME, à savoir :
AddType text/cache-manifest .manifest
Ensuite, il faut créer un fichier cache.manifest, dans mon cas, je l'ai mis à la racine de mon site. En voici le contenu en trois parties :
CACHE MANIFEST
# 2011-07-17:v12
# Explicitly cached 'master entries'.
CACHE:
/favicon.ico
/style/ND_new_green/rss.png
/images/wikio_btn_abo-univ_plain_fr.gif
/images/twitter-b.png
/style/ND_new_green/valid-xhtml10.png
/style/ND_new_green/wcag1AA.png
/style/ND_new_green/wcag1AA.png
/style/ND_new_green/soutien.png
/style/ND_new_green/vcss.png
/style/ND_new_green/top.jpg
/style/ND_new_green/bas.jpg
/style/ND_new_green/ND_new_green.css
/source/preload_ND_new_green.js
/offline.html
FALLBACK:
/ /offline.html
NETWORK:
*
Très simplement, cela permet d'indiquer :
- sous CACHE les fichiers à stocker localement,
- sous FALLBACK, la page qui va être affichée au cas où on se connecte au site en étant hors ligne,
- et sous NETWORK les fichiers nécessitant une connexion internet.
Dans mon cas, vous noterez que je stocke localement tous les fichiers nécessaires à la page offline.html, qui sera donc affichée si on cherche à consulter une page du site en étant hors-ligne (autrement dit, toutes les autres pages que les fichiers spécifiés sous CACHE). Le cache se met à jour dès que le fichier cache.manifest est mis à jour. Le "v12" en commentaire ne sert d'ailleurs qu'à cela.
Il ne reste plus qu'à ajouter manifest="/cache.manifest" à votre balise html :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" manifest="/cache.manifest">
pour déclarer le cache manifest. Dans mon cas, je me suis débrouillé pour qu'il ne soit appelé que dans une situation de mobilité (sur un navigateur de type mobile).
Seule condition pour qu'il s'active : que l'internaute soit déjà passé sur le site en mode connecté bien sûr ! Si c'est le cas, l'internaute verra la page offline.html. Évidemment, c'est un exemple relativement basique et pas indispensable pour ce site, toutefois, cela ouvre des perspectives très intéressantes pour les futures applications qui fonctionneront avec ou sans connexion.
