Cache manifest d'HTML5

Cache manifest d'HTML5 (le 29/11/2011)

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.

Permalien :

Flux RSS des commentaires de ce billet : https://www.nicolas-hoffmann.net/rss/commentaires.php?id_news=1432

3 commentaires

Posté par Jihaisse le 30/11/2011 à 10:59:28
Y'a aussi le localStorage en javascript
Posté par Nico le 01/12/2011 à 10:07:17
Certes ! (sourire)
Posté par Damien le 26/02/2015 à 8:23:57
Le localStorage n'as pas la même fonction !

Ajouter un commentaire









L'option « Se souvenir de mes informations » utilise un cookie, elle ne sera pas effective si vous les avez désactivés.

Les balises HTML ne seront pas interprétées, il est donc inutile d'en mettre. Par contre, les sauts de lignes de votre commentaire seront pris en compte, ne mettez donc pas de <br />, le site s'en chargera. Bien sûr, un commentaire vide ne sera pas ajouté !

L'auteur (autrement dit moi) n'est pas responsable des éventuelles fautes d'orthographe dans les commentaires.
Tout propos raciste et/ou insultant sera supprimé sans préavis. Les commentaires hors de propos destinés à faire de la pub pour des sites seront également supprimés sans ménagement.

Je vous prie de me pardonner, j'ai énormément de mal à lire le "langage" SMS, il n'est donc pas du tout interdit de s'abstenir de l'utiliser. Qui plus est, vous avez sûrement un clavier digne de ce nom et pas celui d'un téléphone portable. Ne vous gênez pas pour utiliser l'option "Prévisualiser" si vous voulez vous relire avant de poster, je vous en remercie d'avance !

Cet article a été écrit par Nicolas Hoffmann.

Ce site est la propriété de Nicolas Hoffmann.
Tous droits réservés, les textes du blog sont publiés sous licence CC BY-NC-SA.