Gestionar el cache desde HTML5
Para ello añadiremos en cada página de nuestra web la etiqueta “html” el atributo “manifest”, en el que indicaremos la ruta, absoulta o relativa, donde se encuentre nuestro archivo de configuración de la caché.
<html manifest="ejemplo.appcache">
De manera que el navegador no cacheará aquello que no se encuentre en nuestro archivo de caché, en el caso del ejemplo “ejemplo.cache”. Este archivo deberá ser servido bajo el mime-type text/cache-manifest. Para ello, debemos personalizar nuestro archivo de configuración de apache o si no tenemos acceso a el nuestro fichero .htaccess con la siguiente línea:
AddType text/cache-manifest .appcache
Una vez hecho esto, sólo nos queda crear nuestro archivo manifest de la caché el cual tendrá la siguiente estructura:
CACHE MANIFEST
# V1 07-10-2012
CACHE:
/fonts/verdana.ttf
index.html
/css/stylesheet.css
/images/logo.png
NETWORK:
http://api.twitter.com
FALLBACK:
/index.php /index.html
/imagenes/blog/ /imagenes/offline.jpg
*.html /offline.html
La línea CACHE MANIFEST debe ser la primera y es obligatoria. Cada línea que comienza por “#” hace referencia a un comentario. La caché de la aplicación solamente cambiará si es modificado este documento. El documento, puede tener tres secciones:
- Cache: Sección por defecto de las entradas de caché. Los ficheros que se encuentren bajo esta cabecerá serán cacheadas después de su primera descarga, claro está.
- Network: Los ficheros que se encuentren bajo esta sección requiren de una conexión a servidor. Todas las peticiones que se hagan a estos ficheros se omitirán, incluso si el usuario está desconectado.
- Fallback: Es una sección especial donde se indica las páginas de reserva si un recurso es inaccesible. La primera URI es la del recurso, y la segunda la de la reserva. Según el ejemplo anterior tendríamos que:
- index.html sería servido si no está accesible index.php
- offline.jpg será servida en caso no estar accesible cualquier imagen que se encuentre en el directorio “/imagenes/blog/”
- offline.html será ofrecida siempre que no sea accesible cualquier página html
Para cualquiera de las tres secciones se puede utilizar el carácter “*”