App Cache: Aplicaciones offline

poner algo aqui...

1. Que es Application Cache ?

Hasta ahora con el modo de caché habitual, cuando ya no contabamos con acceso a internet solo eramos copaces de acceder a los recursos a los que hubiesemos accedido anteriormente, lo cual es una gran limitante.

Esta especificación está pensada para escenarios donde podemos experimentar situaciones en las que no disponemos de conectividad, como en un avión, zonas rurales con poca cobertura, desconexiones intermitentes o simplemente que nuestro disposivo no cuenta con un plan de datos. Pero no sólo los escenarios relacionados con la conectividad son los candidatos de disfrutar de esta API, sino que también nos permite mejorar rendimiento de servidor, reduciendo las peticiones de recursos en usuarios recurrentes, manteniendo los más estáticos cacheados en el navegador de forma explícita.

Esta característica está siendo muy usada en diferentes escenarios como juegos (como la aplicación de Angry Birds de Chrome Web Store), aplicaciones offline de acceso al correo electrónico, clientes web de música por streaming como Deezer y todas aquellas que puedan trabajar en local y sean capaces de sincronizar su contenido más tarde, o necesiten reducir el flujo de peticiones.

Moviles

Uno de los grandes motivos para preferir las aplicaciones nativas sobre las aplicaciones web era la posibilidad de las primeras de seguir trabajando a pesar de no disponer de acceso a Internet. Con esta nueva especificación de HTML5 el panorama debe cambiar.

2. Como funciona ?

Lo primero que hay que hacer es habilitar tu servidor Apache eso se puede hacer incluyendo una linea en el archivo .htaccess asi:

AddType text/cache-manifest .appcache

3. Archivo manifest

Es un archivo de texto plano (UTF-8 without signature) con la siguiente estructura:

CACHE MANIFEST
CACHE:
index.html
mi_css.css
jquery-1.9.1.min.js
imagen-1.jps

Ademas del obligatorio CACHE MANIFEST se puede usar comentarios que inicien en el simbolo # y las secciones seguidas de :

4. Relacionar pagina

Para indicar que un sitio tiene manifiesto relacionado se debe incluir la lineas:

<!DOCTYPE html>
<html manifest="pagina.appcache">
<head>

En realidad se puede usar cualquier nombre y extension, pero es mejor mantener la recomnedacion de usar como extension .appcache

5. Ciclo de vida de Application Cache

Una vez que la página asociada al manifiesto haya cargado, lo primero que el navegador comprobará es si tiene la versión más reciente del manifiesto para ese sitio. De no ser así descargará del servidor la última versión. Una vez obtenida comenzará a descargar todos los recursos nombrados en el apartado CACHE y aquellos que podrían ser utilizados como FALLBACK, en el caso de que no pudiéramos alcanzar el servidor de destino. A partir de este momento se trabajará con los recursos cacheados y no volverán a descargarse hasta que el manifiesto vuelva a sufrir una nueva actualización o limpiemos la datos temporales de nuestro navegador.

Si quisiéramos comprobar su efectividad, basta con desconectar el dispositivo de Internet e intentar acceder aquellas páginas y recursos que fueron nombrados en el manifiesto. Del mismo modo, si intentáramos acceder a aquellos recursos que poseen un FALLBACK, el navegador nos desviaría directamente a aquellas URL indicadas como segundo parámetro.

Tambien es posible solicitar la actualizacion del cache con el siguiente codijo JavaScript:

window.applicationCache.update()

6. Nota final

Hay una manera muy simple de conocer cuando una aplicacion no dispone de internet. Se trata de los eventos online y offline del objeto window de JavaScript.

funtion isOnline(){
   retur window.navigator.onLine;
}
function internetStatus() {
   var className = isOnline() ? "badge-success" : "badge-important";
   var statusName = isOnline() ? "online" : "offline";
   var internet = document.getElementById("internet");
   internet.className = "badge " + className;
   internet.innerText = statusName;
}
window.addEventListener("online", internetStatus, false);
window.addEventListener("offline", internetStatus, false);
internetStatus();