Après avoir voulu « exporter » mon porfolio chez l’utilisateur afin qu’il puisse avoir accès à tous articles via un tableau JSON et non plus des requêtes AJAX, je me suis intéressé à l’Appcache que j’ai pu coupler dynamiquement avec Wordpress.
L’Appcache consiste tout simplement à mettre les fichiers voulus dans un cache navigateur, à plus long terme que le cache de base. Cela a deux intérêts :
- permettre l’utilisation d’un site ou d’une application web offline (sans connection internet)
- accélérer le chargement des pages, car les fichiers seront chargés en local
La compatibilité est assez importante : Chrome+, Firefox+, Safar3.2+, IE10+, ainsi que la plupart des navigateurs mobiles.
Comment fonctionne l'Application Cache ?
L'Application Cache, aussi appelé Appcache ou encore Offline web applications, n’a besoin que d’un fichier dit « manifest », avec l’extension .manifest. Il n’y a pas besoin de PHP ou de Javascript, juste d'une déclaration HTML.
<html manifest="nom_du_fichier.manifest">
Ce fichier « manifest » est en fait une liste de fichiers à stocker, séparées en 3 catégories :
- CACHE : tous les fichiers à stocker (html, img, css, js…)
- NETWORK : tous les fichiers ayant besoin d’une connexion internet, et qui ne devront donc pas être mis en cache
- FALLBACK : tous les fichiers qui seront mis en cache, si certains fichiers sont inaccessibles (erreur 404 par exemple) afin de les remplacer
De plus, afin de pouvoir mettre à jour ce cache lors de changements, on va ajouter une ligne, en fonction du nombre d’articles, qui indiquera au cache que quelque chose à changer, sans quoi celui-ci conservera tout le temps les mêmes fichiers.
On a alors le fichier suivant :
CACHE MANIFEST
# v0.24
CACHE:
FALLBACK:
NETWORK:
*
L’étoile signifie « tous les autres fichiers ».
L’Appcache et les sites dynamiques
Le problème est que mon site est basé sur Wordpress. Or, le cache ne prend en compte que des fichiers statiques (donc pas de .php, .asp, .rb …). La solution était donc de créer dynamiquement des pages .html, ce qui constitue en fait un cache serveur. Utilisant le plugin WP_Super_Cache, ça a été très simple. Ce plugin classe simplement et efficacement ses fichiers, ce qui permet de les retrouver sans difficulté !
Modification du Manifest
Une fois que le Cache Manifest est enregistré par le navigateur, il le conserve tant que son contenu n’a pas été modifié. Ainsi, si vous modifiez le contenu d’un fichier js ou css par exemple, celui-ci ne sera pas pris en compte. L’astuce est de modifier la ligne indiquant le numéro de version. Pour cela, on va récupérer le nombre d’articles du blog, et modifier la version en fonction. Si vous modifiez d’autres fichiers, il faudra le faire manuellement !
Création du Manifest
On va donc avoir 4 étapes très simples :
- récupération du nombre d'articles pour donner le numéro de version du manifest
- récupération du fichier de cache statique
- insertion du manifest
- écriture du manifest
$blog = get_category('21');
$nbArt = $blog->category_count; // nombre d'articles
// On récupère le fichier .html généra par WP_Super_cache
$index = "wp-content/cache/supercache/www.adevby.me/index.html";
// On indique le nom du manifest et son emplacement
$manifest = "wp-content/manifest/adevby.manifest";
echo '';
ob_start();
$folder = "http://".$_SERVER["HTTP_HOST"]."/wp-content/themes/adevby2.0";
$manifestContent = "CACHE MANIFEST"
. "\r\n\r\n"
. "# v0.".$nbArt
. "\r\n\r\n"
. "CACHE:"."\r\n"
. $url.'/'.$index."\r\n" // URL du fichier de cache statique
. "TOUS_VOS_FICHIERS_A_METTRE_EN_CACHE"
. "\r\n\r\n"
. "FALLBACK:"
. "\r\n\r\n"
. "NETWORK:"."\r\n"
. "*";
// On crée le manifest, et on écrit dedans
$file = fopen($manifest,"w");
fwrite($file, $manifestContent);
fclose($file);
ob_end_clean();
Vous remarquerez que je ne teste pas si le fichier existe déjà ou pas. En effet, avec WP_Super_Cache, les calculs faits normalement, ne sont pas effectués. Cette partie là ne sera donc pas exécutée.
Une dernière chose : lors de vos tests, n'oubliez pas de vider votre cache à chaque fois ! Car vous lirez alors le contenu de votre Cache et non celui récupéré par le serveur !
