martes, 23 de julio de 2013

Ejemplo de Cache manifest en HTML5

El cache manifest es una de las novedades de html5 que nos ayuda a la hora de diseñar sitios web que funcionen sin conexion.
El manifest tiene mas o menos esta forma:


CACHE MANIFEST        #Es obligatorio e indica el tipo de documento
# 2012-02-21 v1.0.0   #Se utiliza para evitar que se cachee el propio manifest
CACHE:                #Aqui indicamos los elementos que vamos a cachear siempre
/theme.css
/logo.gif
/main.js 
 
 
NETWORK:             #Estos son los elementos que requieren conexiona  internet
login.asp 
 
 
FALLBACK:            #Aqui se indican los elementos que cambian segun haya o no conexion 
/html/ /offline.html
 
En mi caso voy a hacer una pequeña web formada por 3 html diferentes, un index y dos webs llamadas web.html  y offline.html

index.html
 
<html manifest="cache.manifest">
    <body>
        <h1>Pagina principal<h1>
    </body>
</html>
 
web.html
 
<html>
    <body>
        <h1>
            WEB ONLINE
        </h1>
    </body>
</html>
 
 
offline.html
 
<html>
    <body>
        <h1>
        WEB OFFLINE
        </h1>
    </body>
</html>
 
Si te fijas en el index.html utilizo la etiqueta: manifest=”cache.manifest” que indica al navegador el nombre del manifest a utilizar.
En mi caso estoy utilizando un servidor apache  y bajo mi directorio /www estan los 3 html que dije antes y un archivo llamado cache.manifest con esta forma:



CACHE MANIFEST
CACHE:
NETWORK:
FALLBACK:
/web.html /offline.html
Es decir, lo unico que hago al ir a la web principal es decirle al navegador que si estoy sin conexion y pido web.html me muestre /offline.html. Vamos a hacer una prueba:
1º Inicio el apache → sudo /etc/init.d/apache2 start
2º Abro la web y el navegador se baja el manifest.

Asi es a un nivel muy basico como funciona el cache manifest, hay unos cuantos puntos a tener en cuenta.
  1.  La web que declara el manifest siempre se cachea, y no se le puede hacer fallback.
  2. Si declaras un recurso en NETWORK y intentas acceder a el sin conexion dara un error aunque lo declares tamben en FALLBACK. (network se utiliza precisamente para evitar que una web muy cambiante entre en la cache)
  3. En el apartado CACHE se meten las imagenes,scripts o estilos para que no tengan que ser descargados en cada peticion (offline u online)
  4. En ocasiones el navegador cachea el propio manifest, por eso hay que forzar cambios para obligar al navegador a descargarlo, esto se consigue mediante el comentario de version.

 Url de ayuda.http://iagolast.wordpress.com/2012/11/21/html5-cache-manifest/
   
Publicado por en

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)