Cache manifest avec Laravel

Html5 nous donne quelques outils pour faire des site offline
Le cache manifest, le localStorage, sessionStorage et Indexed Database,  Web SQL Database.
Le cache manifest est la solution pour tout ce qui est statique : feuilles de style, images, javascript; pour les pages, la tout dépend du site. Mais personnellement, avoir accès a une documentation hors-ligne ne me déplaît pas :), et même en mode connecté, a la  deuxième visite, je dis merci au cache.

Attention, mettre en cache en phase de développement n’est pas très simple, c’est clairement un très bon moyen de devenir complètement aveugle a ses propres modification.

Pour utiliser cette technologie, nous devons au préalable déclarer dans notre page html5  notre fichier de description de notre cache.

<html lang="fr" manifest="/public/site.manifest">

Ce qui peut s’écrire dans le layout du front :

<html lang="fr"
    @if(App::environment()=='production') 
         manifest="{{ url('site.manifest') }}"
    @endif
    >

Nous avons déclaré notre manifest, maintenant il faut l’écrire. Dans notre route ajoutons :

Route::get('site.manifest', function()
{
	return Response::make(View::make('site.manifest')->render(), 200,
		array(
			'Content-Type' => 'text/cache-manifest',
			'Cache-Control' => 'no-cache, must-revalidate, no-store',
			'Expires' => 'Sat, 26 Jul 1997 01:00:00 GMT'
		)
	);
});

Le fichier site.manifest est en fait un simple fichier texte. Dans app/views/site/manifest.php

CACHE MANIFEST

#Ver 07.01.<?php echo  (App::environment()=='local') ? rand(0,9) : '0'; ?>

CACHE:
<?php
echo asset('assets/css/bootstrap-2.3.2.min.css')."\n";
echo asset('assets/ico/favicon.png')."\n";

echo asset('assets/js/jquery-1.10.1.min.js')."\n";
echo asset('assets/js/bootstrap-2.3.2.min.js')."\n";

echo url('/')."\n";
echo url('/')."/\n";
echo url('/error/999')."\n";
echo url('/about-us')."\n";
?>

FALLBACK:
<?php
echo '/ '.URL::route('home',array(),false)."error/999\n";
?>

NETWORK:
*

A chaque fois que « version » change, ce fichier site.manifest va être rechargé par le navigateur, ici nous avons un rand() pour nos tests. C’est la seule façon pour mettre a jour nos fichiers dans le cache : modifier « Version ». Et oui, si vous ne modifiez plus ce fichier manifest et bien tout visiteur même connecté ne verra que sa version dans son cache :(
Donc dans la ligne Version écrire a la place du rand() une ligne du type :

echo ($maj==true) ? date('m.d.H') : '0';

ps: Si vous avez besoin de date(‘H’) en production, il faut peut-être oublier ce type de cache ?

CACHE:
comme son nom l’indique bien, cette section donne le liste de toutes les ressources a conserver en local. Le cache va d’une taille maximale de 5Mo a 60Mo en fonction du navigateur. Si vous comptez mettre plus que des ressources (des pages), il faudra sans doute générer la liste  (pages de documentation par exemple) dans un contrôleur.

FALLBACK:
les fichiers qui, au cas où ils ne soient pas accessibles en ligne, doivent renvoyer vers d’autres fichiers (fichiers pas dans cache)

NETWORK:
les fichiers qui nécessitent obligatoirement une connexion internet (ajax,login,admin…).

Et voila, notre site est presque autonome (offline) et beaucoup plus rapide au chargement.

site.manifest dans chrome

resultat vu dans chrome

Dans Chrome, vous avez chrome://appcache-internals/ pour voir, effacer le cache

wikipedia : http://en.wikipedia.org/wiki/Cache_manifest_in_HTML5

Share Button

Vous devriez aimer...