Sígueme

R L E F G I

Buscar

Cargando

Lo último del blog

Hosting

Xitrus está alojado en:

Crea aplicaciones web Offline con Cache de HTML5

El propósito de HTML5 es el de poder crear auténticas aplicaciones multiplataforma en nuestros navegadores, por eso se incorporó la API de ApplicationCache.
Este método es fácil de implementar y nos permite guardar los archivos que queramos en un navegador para poder usar una página web o aplicación sin necesidad de Internet.

Comprobar la caché almacenada en el navegador.

Este sistema nos proporciona grandes ventajas, la primera es la que he comentado, que es disponer de webs sin conexión, la siguiente es la de aumentar la velocidad de la carga (que es instantánea) y por último reduciremos a carga del servidor.

Introducción

Tenemos que tener en cuenta dos cosas de este sistema, la primera es de la que trata el artículo, que es del archivo de manifiesto que contiene la información de los recursos que entrarán en la caché y las distintas configuraciones que nos permite y la otra parte de este sistema es el tratado de la información cacheada desde JavaScript, que ya veremos más adelante.

El manifiesto es un archivo de texto que debe estar en la raíz de la web o aplicación que cacheemos y debemos de hacer saber al navegador que vamos a usarlo de la siguiente forma.


							<html manifest="[nombre].appcache">
						
								<!-- ... -->
						
							</html>

El atributo manifest puede apuntar al archivo para el caché de forma absoluta o relativa, pero tenemos que tener en cuenta un pequeño detalle, y es que el archivo con extensión .appcache tiene que tener el MIME type "text/cache-manifest", que para servidores Apache se puede configurar añadiendo la siguiente línea en el archivo .htaccess.


							AddType text/cache-manifest .appcache

Estructura del manifiesto

Tenemos que tener en cuenta que por seguridad nos permiten solo cachear 5MB, pero puede ser mucho más que suficiente para una aplicación web, ya que el resto podría descargarlo en el caso de ser necesario, pero ya por lo menos tendremos parte cacheado.
Podemos crear manifiestos simples o complejos, el siguiente es algo básico.


							CACHE MANIFEST
						
	# [versión/fecha]
						
	
							index.html
							js/script.js
							css/style.css

En este archivo la primera línea (CACHE MANIFEST) tiene que estar presente, y es recomendable añadir un comentario (precedido por #) con la fecha o la versión del archivo, ya que si actualizamos algún archivo y queremos que se descargue de nuevo debemos de hacersele saber al navegador el cambio modificando el manifiesto (con cambiar algo en un comentario el archivo cambia).

Manifiesto avanzado

En el caso anterior, añadiendo el atributo en la etiqueta <html> y el anterior archivo se guardarán en el navegador los tres archivos de la lista.
Pero si queremos hacer algo más avanzado necesitamos establecer un manifiesto con distintos parámetros, como son los archivos que se cachean, los archivos que preferentemente tienen que conseguirse con Internet y los archivos que sustituyen a los inexistentes (ahora lo diferenciaremos)


							CACHE MANIFEST
						
	# [versión/fecha]
						
	
							CACHE:
							index.html
							js/script.js
							css/style.css
							error.html
							imgs/error.jpg
							
							NETWORK:
							noticias.php
							
							FALLBACK:
							imgs/ imgs/error.jpg
							*.html error.html

Como vemos son tres partes las que forman un manifiesto completo, que se pueden ordenar de cualquier forma, es decir, no tienen que tener el orden de arriba y pueden repetirse en varios lugares las partes. El funcionamiento de cada una es el siguiente:

CACHE: tras este elemento establecemos que archivos se guardarán en la caché (como en un manifiesto básico).
NETWORK: aquí especificamos que archivos tienen que cargarse de Internet necesariamente.
FALLBACK: por último podemos establecer páginas o archivos alternativos si queremos cargar un recurso y no está disponible (en el ejemplo si no pudiésemos cargar una imagen nos aparecería la que hemos establecido en caché)

En la sección NETWORK y FALLBACK podemos usar comodines (con "*").

Como probarlo

Para saber si funciona os recomiendo, antes de conectar y desconectar el Internet, comprobar con las herramientas de desarrollo de Chrome (pulsando F12), en resources encontraréis la lista con los elementos en caché. Comprobar la caché almacenada en el navegador. La imagen es de la caché que almacena una aplicación de prueba que he desarrollado para Firefox OS, hace uso de la API del caché, pero no hace un uso muy amplio, por lo que no es necesario que le prestéis mucha atención (si aún así queréis probar la app debéis de hacerlo desde Firefox para Android y podréis probar la vibración del móvil y crear ritmos con la vibración).

Resumen

Poniendo en práctica este sistema podemos crear aplicaciones que funcionan sin Internet o que su base esté almacenada y el resto lo recoja de Internet, como podría ser un lector de noticias.
En el próximo artículo hablaré sobre como controlar la actualización de la caché y como usar la API.

Comentarios