poner algo aqui...
Hasta ahora con el modo de caché habitual, cuando ya no contábamos con acceso a internet solo eramos capaces de acceder a los recursos a los que hubiésemos 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 dispositivo 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.
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.
Lo primero que hay que hacer es habilitar tu servidor Apache eso se puede hacer incluyendo una linea en el archivo .htaccess así:
AddType text/cache-manifest .appcache
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 :
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 extensión, pero es mejor mantener la recomendación de usar como extensión .appcache
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.
También es posible solicitar la actualización del cache con el siguiente código JavaScript:
window.applicationCache.update()
Hay una manera muy simple de conocer cuando una aplicación 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();