HTML5 ha abierto las puertas a un nuevo mundo a la hora de que nuestras aplicaciones puedan funcionar de forma desconectada.
En la actualidad, tenemos la posibilidad de almacenar información de forma local a la aplicación mediante los interfaces disponibles con localStorage, Web SQL Database o IndexedDB. Estas características tan interesantes, pueden no ser suficientes si la página en las que se van a implementar no puede ser cargada por el navegador debido a la falta de conectividad.
Es por ello que en la especificación de HTML5, se recogen mecanismos para detallar qué páginas debe cachear nuestro navegador para que estén siempre disponibles y cómo vamos a poder saber en qué modo de trabajo estamos en un momento dado.
Offline Application Caching API
La configuración de los recursos de una aplicación que deben poder ser accedidos cuando no se tiene conexión a Internet, están definidos íntegramente en un fichero llamado Cache Manifest File.
Este fichero de definición permite listar los recursos a registrar por el navegador para ser mostrados cuando pase a modo offline.
Para ello, debemos definir la propiedad manifest a nivel del mismo tag HTML principal, indicando la URL de acceso al fichero de definición de la cache:
<!DOCTYPE html>
<html manifest="/cache.manifest">
<head>
<meta charset="utf-8" />
</head>
<body>
<h1>Esta página es offline</h1>
</body>
</html>
Aunque el fichero puede ser alojando en cualquier URL de nuestro servidor, es muy importante que se sirva con un Content Type adecuado, ya que el tipo esperado será siempre text/cache-manifest.
Si estamos utilizando Apache, es muy probable que tengamos que definir este nuevo tipo de contenido añadiendo la siguiente directiva a la configuración principal del servidor o a un fichero .htaccess:
AddType text/cache-manifest .manifestEl fichero Cache Manifest
El fichero servido deberá comenzar siempre con el texto CACHE MANIFEST en la primera línea, listando a continuación todos los recursos a considerar.
Si alguno de los elementos que hay en la cache puede variar en el tiempo por alguna modificación que debamos realizar, lo más recomendable es añadir al fichero un marca de la versión del mismo para que el navegador pueda detectar que ha cambiado:
CACHE MANIFEST
# rev 2
/genbetadev/html5-cache/index.html
Como aspecto más avanzado, comentar que en este tipo de ficheros podemos definir exclusiones para caracterizar los recursos que siempre tendrán que ser online y no deberían de cachearse:
CACHE MANIFEST
# rev 3
images/imagen1.png
images/imagen2.png
NETWORK:
comm.cgi
CACHE:
style/default.cssEn cualquier caso, si lo que queremos es simplemente que se muestre una página de aviso al pasar al modo offline, entonces podemos utilizar la sección FALLBACK de nuestro fichero de definición. Con FALLBACK, podemos definir la página a mostrar cuando se accede a un recurso concreto y estamos en modo offline:
CACHE MANIFEST
FALLBACK:
/ /offline.htmlPor último, en la siguiente página podemos encontrar un ejemplo que podemos cargar cuando estamos offline y, si desconectamos el acceso a Internet, podremos seguir viendo sin problemas gracias a la cache:
NOTA: En Firefox podemos activar el modo offline accediendo al menú “Archivo -> Trabajar sin conexión”.
Detección de la activación del modo offline
Es bastante habitual que, en algunos navegadores como Firefox, el almacenamiento de páginas para su uso offline conlleve que se muestre al usuario una alerta especial:
De igual forma, es necesario en muchos casos saber si el navegador está en modo online a la hora de lanzar o no una operación de sincronización. Aunque podemos conseguir esto de forma directa intentando abrir una conexión y comprobando si ha sido posible establecerla o no, el navegador nos proporciona una forma bastante más elegante de hacerlo.
El método definido en la especificación a tal efecto consiste en la incorporación del atributo onLine, el cual se define a nivel del objeto JavaScript Navigator:
<!DOCTYPE html> <html> <head> <title>Estado online/offline</title> <script> function updateIndicator() { var indicator = document.getElementById('indicator'); indicator.textContent = navigator.onLine ? 'online' : 'offline'; } </script> </head> <body onload="updateIndicator()"> <p>La red está <span id="indicator">(estado)</span> </body> </html>
Adicionalmente, si queremos detectar cuando el navegador pasa a modo online u offline, existen dos eventos a tal efecto a nivel del objeto Window:
<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener('offline', function(e) { alert('Offline'); });
document.addEventListener('online', function(e) { alert('Online') });
</script>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html>
<body ononline="alert('Online');" onoffline="alert('Offline');">
</body>
</html>Para finalizar esta entrega, a continuación podemos ver un ejemplo de cómo Firefox detecta el cambio de estado en la conexión:
Demo online | Uso cache API
Demo online | Eventos cambio de estado
En Genbeta Dev | Introducción al almacenamiento de variables en el cliente con HTML5