Cache Manifest: Un site web plus rapide
Anticiper le chargement des pages en utilisant le cache
La version 5 du HTML apporte son lot d'améliorations. Ainsi, pour il est possible d'utiliser un cache pour un mode hors connexion. Mais nous pouvons détourner l'usage de ce cache (manifest) pour accélérer la navigation sur un site web.
Qu'est-ce que le manifest
?
Le manifest est une option apparue avec le HTML 5 afin d'indiquer au navigateur toutes les ressources à charger dans le cas d'une déconnexion.
En effet, les applications destinées aux téléphones portables subissent régulièrement des déconnexions du fait du déplacement, Si vous prenez un ascenseur, ou que votre métro passe dans un tunnel, ce qui coupe votre connexion. Si la page n'est pas chargée, l'affichage et l'usage ne se font pas correctement car un navigateur, pour des raison de rapidité affiche ce qu'il a dès qu'il l'a téléchargé. C'est pourquoi, il n'est pas rare de voir le texte avant les images...
Lorsqu'il est employé, le cache force le navigateur à d'abord charger les fichiers dont il a besoin avant d'afficher la page. Ainsi, en cas de déconnexion intempestive, l'usager n'est pas perturbé et il peut utiliser l'application web (ou le site), le temps de la déconnexion. En effet, si vous étiez occupé à rédiger un courriel au moment de la déconnexion, il serait dommage de perdre le message et d'être obligé de tout recommencer.
Mise en oeuvre
Principe
Le cache est appelé au niveau html :
<html xmlns="http://www.w3.org/1999/xhtml" manifest="app.cache">
Sans avoir oublié de définir l'extension .cache sur le serveur web :
AddType text/cache-manifest .cache
Le fichier app.cache contient :
CACHE MANIFEST
# v0.1
CACHE:
ma page.html
mon_image.jpeg
FALLBACK:
mapage_nonconnecté.html
NETWORK:
*
La partie CACHE: contient la liste de tous les fichiers à charger en cache.
La partie FALLBACK: contient la liste de tous les fichiers à charger en cache en cas de déconnexion (par exemple, une page d'alerte pour indiquer le statut déconnecté).
La partie NETWORK: contient la liste des ressources qui ne doivent pas être chargées en cache, mais téléchargées directement depuis le réseau.
Le cache n'est rechargé qui si la demande de rafraîchissement est faite par le navigateur (action de l'utilisateur ou code javascript) ou si le fichier manifest est modifié.
En général, l'usage est de charger tout ce qui est nécessaire à la page en cours. Cependant, rien ne nous empêche de charger d'autres fichiers...
Génération automatique
Si la page en question est en XHTML, alors il est possible de générer automatiquement le manifeste.
Anticipation du chargement
Inventaire statique
Comme nous pouvons charger tous les fichier que nous lui indiquons, il n'est donc pas impossible de charger les fichiers nécessaires à la navigation à venir.
Pour chaque page, il faut donc définir les fichiers à charger de toutes les pages accessibles depuis la page en cours; excepté celles qui ont déjà été chargées (et qui sont donc déjà en cache du navigateur).
Bien entendu, tout n'est pqs à charger. Nous pouvons considérer que la page HTML en elle même (le texte) n'est peut bien attendre car en général elle n'est pas volumineuse. Il s'agit surtout de charger tous les suppléments, comme les images, par exemple.
Comme le cache du manifest est relativement limité (de l'ordre de 5 Mo), il est fortement déconseillé de charger de gros fichiers : il faut donc exclure les vidéos, dont nous désactiverons aussi le chargement automatique (preload="none").
De plus, si la page en cours est déjà longue à charger du fait d'un grand nombre d'éléments, il est encore absurde de lui demander de charger les éléments des autres pages à venir : Il faut donc alterner des pages légères qui chargeront les éléments en cache, et des pages plus lourdes (ayant moins de choses à charger). Par exemple, une page légère qui pourrait être une page d'index ou de présentation d'une section.
Ceci revient à concevoir un site optimalisé pour le pré-chargement en cache, ainsi qu'une configuration pointue de chaque page, avec un inventaire précis de ce qu'il y a à charger. Quand on vous dit que le métier d'informaticien est un métier d'artisan !
Navigation dynamique
Bien entendu, une version statique imposerait une gestion rigoureuse de chaque page. Mais la version statique ne sait pas gérer le fait qu'on ait déjà visité une page et qu'elle soit déjà en cache. Ce chargement forcé peut alors être contre-productif. Il faut donc éliminer tous les éléments qui sont déjà en cache, c'est-à-dire toutes les pages ayant déjà été visitées. Il faut donc une gestion dynamique de la navigation. Il va donc falloir coder.
La génération dynamique d'un cache-manifest commence de la façon suivante :
#!/bin/sh
echo "Content-type: text/cache-manifest; charset=utf-8"
echo
La métadonnée link
Il existe une autre façon de charger des ressources grâce à la métadonnée link
, le plus célèbre étant le CSS :
<head>
…
<link rel="stylesheet" type="text/css" href="site.css"/>
…
</head>
En général, on l'utilise pour charger une ressource dont on a besoin immédiatement, mais on peut très bien charger n'importe quelle autre ressource. Elle peut être la page suivante ou une ressource dont vous pourriez avoir besoin éventuellement.
link
est généralement placé dans head
, mais peut techniquement être placé à n'importe quel endroit du document.