Offline cache | eamexicano

Esta especificación permite utilizar aplicaciones web aún cuando no haya conexión a internet – IE10+ referencia caniuse.com -. Para lograr esto se debe crear un manifiesto donde se listen los archivos necesarios para que la aplicación funcione fuera de línea.

El manifiesto se tiene que incluir en la etiqueta HTML

<html manifest='ruta-al-manifiesto/offline.app-cache'>

El manifiesto tiene que se enviado con el mime type text/cache-manifest. Para lograr esto es necesario que el servidor web envíe los archivos de esta manera.
En Apache se puede registrar en el módulo mime_module de httpd.conf
En nginx se puede registrar en el archivo mime.types

# Apache: httpd.conf
<IfModule mime_module>
# Tipos registrados
AddType text/cache .cache
</IfModule>


# nginx: mime.types
types {
# Tipos registrados  
  text/cache           cache;
}

Referencia de manifiesto

CACHE: 
css/estilo.css
js/codigo.js

# Archivos que se van a descargar como parte del cache 
# Se tiene que incluir cada archivo, no se pueden utilizar 
# comodines (*.js )

NETWORK:
*
# Archivos (URLs) que no son parte del cache. 
# El comodín - asterisco -  indica que los archivos no especificados 
# en CACHE van a ser descargados del servidor.

# Esto es un comentario

Si algún archivo listado en la sección CACHE no se encuentra, no se va a crear el cache.

Una vez que se crea cache y se quiere realizar alguna modificación en los archivos originales, NO se va a ver reflejada al cargar la página nuevamente (porque se están utilizando los archivos del cache).

Para que se vuelvan a llamar tiene que existir alguna modificación en el manifiesto.

En chrome podemos revisar las aplicaciones que utilizan offline cache con el siguiente URL:
chrome://appcache-internals/

Es posible rastrear el estado del cache utilizando distintos eventos.

Eventos

checking	Revisa si hay alguna actualización del manifiesto.
noupdate	El manifiesto no tiene actualizaciones.
downloading	Los archivos están siendo descargados.
progress	Un archivo ha sido descargado completamente.
cached	El proceso fue satisfactorio.
updateready	La versión temporal de los archivos está en el cache de la aplicación.

Demo

Guardar mensajes de un formulario en una base de datos. En caso de no tener conexión a internet los mensajes se guardan en localStorage. Una vez que se reanuda la conexión, los mensajes se sincronizan con la base de datos.

Para el demo utilicé Apache, PHP y MySQL para guardar los mensajes en el lado del servidor.

Si tu navegador no es compatible con la etiqueta de video o tuviste algún problema para visualizar el video existe una versión en YouTube

Descargar el proyecto de offline cache.