Modo offline

Existe una forma rápida de hacer que una aplicación copie los ficheros estáticos en el dispositivo del usuario y hacer que nuestra aplicación funcione rápido con conexiones lentas (además de ahorrar al usuario tráfico de datos de su conexión). Se trata de crear un archivo de manifiesto para caché.
Tiene 3 patas:

• Una indicación desde el HTML de que existe la caché.
• Un fichero con la información.
• El servidor web ha de mostrar el fichero con unas cabeceras específicas.

La parte del HTML es muy sencilla sólo hay que añadir manifest=”fichero.extension” a la etiqueta, por ejemplo:

Ahora crearemos un fichero cache.manifest en la misma carpeta que nuestro index.html y para ofrecer las cabeceras correctas habrá que añadir al archivo .htaccess del servidor el siguiente contenido:

	DirectoryIndex index.html
	Options -Indexes
	AddType application/x-web-app-manifest+json .webapp
	AddType text/cache-manifest .manifest

Aprovechamos la edición de este archivo para indicar que no se liste el contenido de las carpetas y que el archivo por defecto a listar en un directorio es index.html

Contenido del archivo de caché

La primera línea tendrá escrito: CACHE MANIFEST

Las líneas que empiecen por una almohadilla son comentarios, habitualmente se deja la segunda línea para la versión del archivo dentro de un comentario.

Cada línea será una ruta relativa (desde la ubicación del fichero de caché) o absoluta a un fichero que se quiere guardar en la caché.

Existen 2 secciones opcionales:

• NETWORK: Para ficheros dinámicos (por ejemplo una aplicación de conversión de divisas tiene que poder consultar esa información actualizada). Los ficheros de esta sección no son cacheados y son consultados cada vez que se intenta acceder a ellos.
• FALLBACK: En los casos que no exista conexión a internet se mostrará este fichero, en lugar del habitual (por ejemplo en una aplicación de mensajería instantánea en lugar de mostrar la lista de contactos, cuando no exista conexión se puede mostrar sólo el historial de conversaciones).

Ejemplo de archivo de caché

CACHE MANIFEST
# v1.0 (esta línea es un comentario)
	index.html
	cache.html
	/css/style.css
	http://localhost/imagenes/imagen1.png

#Cuando hay conexión de red
NETWORK:
	consultas.php

#Cuando no hay red:
FALLBACK:
	/ fallback.html

Enlaces de interés

La ayuda de Mozilla para desarrolladores tiene un extenso artículo sobre la caché de aplicaciones.