Gestión de la caché desde HTML5



Hosting barato
VN:F [1.9.20_1166]
Rating: 5.5/10 (2 votes cast)

Para gestionar la caché de nuestro site si este lo tenemos construido bajo HTML5, no nos sirven los meta tags que hemos utilizado siempre para HTML4, como por ejemplo:

<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="pragma" content="no-cache">

Ya que si las incluímos y pasamos nuestra web bajo el validador de HTML5 de w3c obtendremos el siguiente resultado de error de validación:

 Bad value Cache-Control for attribute http-equiv on element meta.
<meta http-equiv="Cache-Control" content="no-cache" >

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">
  ...
</html>

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 “*”

¡¡¡Y esto es todo por el momento!!!

¡¡¡Cualquier comentario, mejora, o ayuda sobre este tema siempre será bienvenido!!!

Gestión de la caché desde HTML5, 5.5 out of 10 based on 2 ratings
Comparte y disfruta:

Si te ha gustado este artículo, te puede interesar ...



Hosting barato

2 comments

  1. Ping : Gestión de cache en HTML5 | Demo31 | Tec...

Escribe un comentario


− tres = 1

Puede usar HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>