Introducción
HTML5 proporciona un mecanismo de caché de aplicación que permite que las aplicaciones basadas en la web se ejecuten sin conexión. Los desarrolladores pueden usar la interface de Caché de apliaciones (AppCache) para especificar los recursos que el navegador debería guardar en caché y tener disponibles para los usuarios cuando no estén conectados. Las aplicaciones que están en caché se cargan y funcionan correctamente aunque los usuarios hagan clic en el botón recargar cuando no están conectados.
Usar el caché de aplicaciones le da a la aplicación los siguientes beneficios:
- Navegación sin conexión: los usuarios pueden navegar un sitio aún cuando no estén conectados.
- Velocidad: los recursos en caché son locales, y por lo tanto, se cargan más rápido.
- Carga al servidor reducida: el navegador solamente descarga desde el servidor recursos que han cambiado..
¿Cómo funciona el caché de aplicaciones?
Habilitando caché de apliaciones
Para habilitar el caché de apliaciones, debe incluir el atributo manifest en el elemento <html> en las páginas de sus aplicaciones, como se muestra en el siguiente ejemplo:
<html manifest="ejemplo.appcache">
...
</html>
El atributo manifest referencia un archivo manifest de caché, que es un archivo de texto que lista los recursos (archivos) que el navegador deberá guardar en caché para la aplicación.
Debería incluir el atributo manifest en cada página de la aplicación que quiera guardar en caché. El navegador no guardará páginas que no contengan el atributo manifest, a menos que esas páginas estén específicamente listadas en el archivo manifest en sí mismo. No es necesario listar todas las páginas que se quieran guardar en caché en el archivo de manfifesto, el navegador implícitamente agrega cada página que el usuario visite y tenga el atributo manifest establecido para caché de aplicación.
Algunos navegadores (ej. Firefox) muestran una notificación la primera vez que un usuario carga una aplicación que usa caché de aplicaciones La barra de notificaciones muestra un mensaje parecido a :
Este sitio web (www.ejemplo.com) está pidiendo guardar datos en su equipo para usar sin conexión. [Permitir] [Nunca para este sitio] [No por ahora]
El término "offline(-enabled) applications" a veces se refiere específicamente a aplicaciones a las que el usuario ha permitido que usen capacidades sin conexión.
Cargando documentos
Es uso de caché de aplicaciones modifica el proceso normal de la carga de un documento:
- Si existe caché de aplicaciones, el navegador carga el documento y sus recursos asociados directamente desde ahí, sin acceder a la red. Esto acelera el tiempo de carga del documento.
- El navegador entonces verifíca si hubo actualizaciones al manifest de caché en el servidor.
- Si el manifest de caché fue actualizado, el navegador descarga la nueva versión del archivo y de los recursos listados en él. Esto se realiza en segundo plano y no afecta el rendimiento de forma significativa.
El proceso para cargar documentos y actualizar el caché de aplicaciones está especificado con gran detalle aquí debajo:
- Cuando el navegador visita un documento que incluye el atributo
manifest, si no existe caché de apliaciones, el navegador carga el documento y baja todas las entradas listadas en el archivo del manifest, creando la primera versón de caché de aplicaciones. - Posteriores visitas a ese documento causan que el navegador cargue el documento y otros archivos especificados en el manifest desde el caché de aplicaciones (no desde el servidor). Además, el navegador envía un evento
checkingal objetowindow.applicationCachey descarga el archivo de manifest, siguiendo las reglas de caché HTTP apropiadas. - Si la copia del manifest actualmente en caché está actualizada, el navegador envía un evento
noupdateal objetoapplicationCachey el proceso de actualización está completo. Hay que tener en cuenta que si se cambia en el servidor cualquier recurso en caché, se deberá cambiar también el archivo de manifest, para que el navegador sepa que deberá descargar los recursos nuevamente. - Si el archivo de manifest ha cambiado, todos los archivos listados en el manifest—así como los que se agregaron al caché llamando
applicationCache.add()—se descargarán en un caché temporario, siguiendo las reglas de caché HTTP apropiadas. Para cada archivo descargado en este caché temporario, el navegador envía un eventoprogressal objetoapplicationCache. Si ocurre cualquier error, el navegador envía un eventoerrory la actualización se detiene. - Una vez que todos los archivos han sido recuperados exitosamente, son movidos al caché sin conexión real automáticamente y un evento
cachedes enviado al objetoapplicationCache. Como el documento ya ha sido cargado en el navegador desde caché, la actualización no se mostrará hasta que el documento sea re-cargado (ya sea manualmente o por programa).
Ubicación del almacenamiento y limpiando el caché sin conexión
En Chrome se puede limpiar el caché sin conexión seleccionando "Clear browsing data..." en las preferencias o visitando chrome://appcache-internals/. Safari tiene una configuración similar"Vaciar cache" en sus preferencias, pero se requiere el reinicio del navegador.
En Firefox, el caché sin conexión se guarda en un lugar separado del perfil de Firefox profile—cerca del caché de disco regular:
- Windows Vista/7:
C:\Users\<usuario>\AppData\Local\Mozilla\Firefox\Profiles\<salt>.<nombre de perfil>\OfflineCache - Mac/Linux:
/Users/<usuario>/Library/Caches/Firefox/Profiles/<salt>.<nombre de perfil>/OfflineCache
En Firefox el estado actual del caché de aplicaciones puede ser inspeccionado en la página the about:cache (debajo del encabezado "Offline cache device"). El caché sin conexión pude limpiarse para cada sitio por separado usando el botón "Eliminar..." Herramientas -> Opciones -> Avanzadas -> Red -> Datos sin conexión.
Antes de Firefox 11, ni Herramientas -> Limpiar historial reciente ni Herramientas -> Opciones -> Avanzadas -> Red -> Datos sin conexión -> Limpiar ahora borraban el caché sin conexión. Esto ha sido solucionado.
Véase también limpiar los datos de almacenamiento de DOM.
Los cachés de aplicaciones también pueden quedar obsoletos. Si el archivo de manifest de una aplicación es eliminado del servidor, el navegador elimina todo caché de la aplicación que use aquel manifest y envía un evento "obsoleted" al objeto applicationCache. Esto cambia el estado de caché de la aplicación a OBSOLETE.
El archivo de manifest de caché
Referenciando un archivo de manifest de caché
El atributo manifest en una aplicación web puede especificar ya sea la ruta relativa de un archivo de manifest de caché o una URL absoluta (URLs absolutas deben estar en el mismo origen que la aplicación). Un archivo de manifest de caché puede tener cualquier extensión de archivo, pero debe ser enviada con el tipo MIME text/cache-manifest.
AddType text/cache-manifest .appcache a un archivo .htaccess dentro del directorio raíz o del mismo directorio que la aplicación.Entradas en el archivo de manifest de caché
El archivo de manifest de caché es un archivo de texto simple que lista los recursos que el navegador debería guardar en caché para acceder sin conexión. Los recursos son identificados por URI. Las entradas listadas en el manifest de caché deben tener el mismo esquema, servidor y puerto que el manifest.
Ejemplo 1: un archivo de manifest de caché simple
El siguiente es un archivo de manifest de caché simple, ejemplo.appcache, para un sitio web imaginario en www.ejemplo.com.
CACHE MANIFEST # v1 - 2011-08-13 # Esto es un comentario. https://www.ejemplo.com/index.html https://www.ejemplo.com/encabezado.png https://www.ejemplo.com/blah/blah
Un archivo de manifest de caché puede incluir tres secciones (CACHE, NETWORK y FALLBACK, discutidas debajo). En el ejemplo mencionado, no hay encabezado de sección, así que todoas las líneas de datos se asumen como si estuvieran en la sección explícita (CACHE), lo que significa que el navegador deberá guardar en caché todos los recursos listados en el caché de aplicación. Los recursos pueden ser especificados como URLs absolutas o relativas (ej. index.html).
El comentario "v1" en el ejemplo está ahí por una buena razón. Los navegadores solamente actualizan el caché de aplicación cuando el archivo de manifest cambia byte por byte. Si se cambia un recurso en caché (por ejemplo, si se actualiza la imagen header.png con nuevo contenido), se debe cambiar el contenido del archivo de manifest para que los navegadores sepan que se necesita actualizar el caché. Se puede hacer cualquier cambio al archivo de manifest, pero cambiar el número de versión es una práctica recomendada.
Secciones en un archivo de manifest de caché: CACHE, NETWORK y FALLBACK
Un manifest puede tener tres secciones distintas: CACHE, NETWORK y FALLBACK.
CACHE:- Esta es la sección predeterminada para las entradas en el archivo de manifest de caché. Los archivos listados bajo el encabezado de sección
CACHE:(o inmediatamente después de la líneaCACHE MANIFEST) son guardados en caché explícitamente después de ser descargados la primera vez. NETWORK:- Los archivos listados bajo el encabezado de sección
NETWORK:en el archivo de manifest de caché son recursos en lista blanca que requieren una conexión al servidor. Todos los pedidos a esos recursos evitan el caché aunque el usuario esté desconectado. Se pueden usar comodines. FALLBACK:- La sección
FALLBACK:especifica las páginas que el navegador debería usar si un recurso no es accesible. Cada entrada en esta sección lista dos URIs—lla primera es el recurso, la seguda es el fallback. Ambas URIs deben ser relativas y del mismo origen que el archivo de manifest. Se pueden usar comodines.
Las secciones CACHE, NETWORK y FALLBACK pueden lsitarse en cualquier orden en el archivo de manifest y cada sección puede aparecer más de una vez en un manifest.
Ejemplo 2: un archivo de manifest de caché más completo
El siguiente es un archivo de manifest de caché para el sitio web imaginario en www.ejemplo.com:
CACHE MANIFEST # v1 2011-08-14 # Este es otro comentario index.html cache.html style.css image1.png # Usar desde la red si está disponible NETWORK: network.html # Contenido de fallback FALLBACK: / fallback.html
Este ejemplo usa las secciones NETWORK y FALLBACK para especificar la página network.html que deber ser recuperada desde la red y que la página fallback.html servirá como fallback (ej. en caso que una conexión al servidor no pueda establecerse).
Estructura de un archivo de manifest de caché
Los archivos de manifest de caché deben enviarse con el tipo MIME text/cache-manifest. Todos los recursos servidos usando este tipo MIME deben seguir la sintaxis para un manifest de caché de aplicación, como se define en esta sección.
Los manifests de caché son archivos de texto en formato UTF-8 y pueden incluír opcionalmente un caracter BOM. Las nuevas líneas pueden ser representadas por salto de línea (U+000A), retorno de carro (U+000D) o ambos retorno de carro y salto de línea.
La primera línea del manifest de caché debe consistir en la cadena CACHE MANIFEST (con un solo espacio U+0020 entre ambas palabras), seguido de cero o más espacios con caracteres de tabulación. Cualquier otro texto en la línea es ignorado.
El resto del manifest de caché debe estar compuesto por cero o más de las siguientes líneas:
- Línea en blanco
- Se pueden usar líneas en blanco compuestas por cero o más espacios y caracteres de tabulación.
- Comentario
- Los comentarios consisten en cero o más tabulaciones o espacios seguidos por un caracter
#seguido de cero o más caracteres del texto del comentario. Los comentarios pueden usarse solamente en sus propias líneas y no pueden agregarse a otras líneas. Esto signifíca que no puede espcificar identificadores de fragmento. - Encabezado de sección
- Los encabezados de sección especifican qué sección del manifest de caché está siendo manipulada. Hay tres encabezados de sección posibles:
Encabezado de sección Descripción CACHE:Cambia a la sección explícita del manifest de caché (esta es la sección predeterminada). NETWORK:Cambia a la sección de lista blanca del manifest de caché. FALLBACK:Cambia a la sección fallback del manifest de caché.
- La línea de encabezado de sección puede incluir espacios en blanco, pero debe incluir los dos puntos (
:) en el nombre de sección. - Datos de sección
- El formato de las líneas de datos varía de sección a sección. En la sección explícita (
CACHE:), cada línea es una URI o referencia IRI a un recurso a guardar en caché (no se permiten caracteres comodines en esta sección). El espacio en blanco se permite antes y después de la URI o IRI en cada línea. En la sección Fallback cada línea es una URI o referencia IRI válida a un recurso, seguida por un recurso de fallback que será enviado cuando la comunicación con el servidor no pueda establecerse. En la sección Network, cada línea es una URI o referencia IRI válida a un recurso a obtener desde la red (se permite el caracter comodín * en esta sección).Nota: URIs relativas son relativas a la URI del manifest de caché, no a la URI del documento que hace referencia al manifest.
Los archivos de manifest de caché pueden cambiar de sección a sección a voluntad (cada encabezado de sección puede usarse más de una vez) y se permite que las secciones estén vacías.
Recursos en un caché de aplicación
Un caché de aplicación siempre incluye al menos un recurso, identificado por URI. Todos los recursos entran en una de las siguientes categorías:
- Entradas maestras
- Estos son recursos adicionados al caché porque un contexto de navegación visitado por el usuario incluyó un documento que indicó que estaba en caché usando el atributo
manifest. - Entradas explícitas
- Estos recursos están listados explícitamente en el archivo de manifest de caché de la aplicación.
- Entradas de red
- Estos son recursos listados en el archivo de manifest de caché de la aplicación como entradas de red.
- Entradas de fallback
- Estos son recursos listados en el archivo de manifest de caché de la aplicación como entradas de fallback.
Las categorías de recursos se describen con más detalle debajo.
Entradas principales
Una entrada maestra es cualquier archivo HTML que incluya un atributo manifest en su elemento <html>. Por ejemplo, digamos que tenemos el archivo https://www.ejemplo.com/entrada.html, que incluye el siguiente texto:
<html manifest="ejemplo.appcache"> <h1>Ejemplo de cache de aplicacion</h1> </html>
Si entrada.html no está listado en el archivo de manifest de caché ejemplo.appcache, visitar la pagina entrada.html causa que se agregue al caché de aplicación el archivo entrada.html como entrada maestra.
Entradas explícitas
Las entradas explícitas son recursos que están listados explicitamente en la seccion CACHE de un archivo de manifest de caché.
Entradas de red
La sección NETWORK de un archivo de manifest de caché especifíca recurso para los cuales una aplicacion web requiere acceso a internet. Las entradas de red en el caché de aplicación son escencialmente una "lista blanca online"—URIs especificadas en la sección NETWORK se cargarán desde el servidor en lugar del caché. Esto permite que el modelo de seguridad del navegador proteja al usuario de problemas de seguridad potenciales al limitar el acceso a recursos aprobados.
Como ejemplo, puedes usar entradas en la seccion red para cargar y ejecutar scripts y otro código desde el servidor en lugar del caché:
CACHE MANIFEST NETWORK: /api
La sección de caché de manifest listada debajo asegura que las peticiones para cargar los recursos contenidos en https://www.example.com/api/ siempre van a la red sin intentar acceder a la caché.
manifest en el elemento html) del archivo manifest no tendrá el mismo resultado, porque las entradas principales serán agregadas—y posteriormente servida por—la aplicación de caché. Entradas fallback
Las entradas fallback son usadas cuando un intento de cargar los recursos falla. Por ejemplo, digamos que el archivo de anifest de caché https://www.example.com/example.appcache incluye el siguiente contenido:
CACHE MANIFEST FALLBACK: example/bar/ example.html
Cualquier petición a https://www.example.com/example/bar/ o cualquiera de sus directorios y su contenido hace que el explorador emita una solicitud de red al intentar cargar el recurso solicitado. Si la petición falla, debido a una falla de la red o un error de servidor de cualquier tipo, el navegador carga el archivo example.html en su lugar.
Estados de caché
Cada aplicación de caché tiene un estado, que indica el estado actual del caché. Cachés que comparten el mismo manifest URI comparten el mismo estado de caché, el cual puede ser uno de los siguientes:
UNCACHED- Un valor especial que indica que un objeto caché de la aplicación no está inicializado en su totalidad.
IDLE- La caché de aplicación no está actualmente en el proceso de actualización.
CHECKING- El manifest se ha obtenido y revisado para actualizaciones.
DOWNLOADING- Recursos han sido descargados para ser añadidos al caché, debido a un cambio de recursos de manifest.
UPDATEREADY- Hay una nueva versión de la aplicación de caché disponible. Hay un correspondiente evento
updateready, que es lanzado en lugar del eventocachedcuando una nueva actualización acaba de ser descargada pero aún no ah sido activado el métodoswapCache(). OBSOLETE- La aplicación de caché de grupo es ahora obsoleta.
Probando para actualizaciones para el manifest de caché
Puedes programar para ver si una aplicación tiene un archivo de actualización del manifest de caché, usando JavaScript. Desde que un archio de manifest de caché tiene que ser actualizado antes de que un script adjunte eventos escuchas para probar para actualizaciones, los scripts siempre deben probar window.applicationCache.status.
function onUpdateReady() {
alert('found new version!');
}
window.applicationCache.addEventListener('updateready', onUpdateReady);
if(window.applicationCache.status === window.applicationCache.UPDATEREADY) {
onUpdateReady();
}
Para comenzar a probar manualmente para un nuevo archivo manifest, puedes usar window.applicationCache.update().
Contra indicaciones
- Nunca accesar aplicacines de caché usando los parámetros tradicionales de GET (como
other-cached-page.html?parameterName=value). Esto hará que el navegador omita el caché y trate de obtenerlo mediante la red. Para enlazar a los recursos almacenados en caché que tienen parámetros cambiados a JavaScript usa parámetros en la parte del hash del enlace, comoother-cached-page.html#whatever?parameterName=value. - Cuando las aplicaciones son almacenadas en caché, simplemente actualizando los recursos (archivos) que son usados en una página web no son suficientes para actualizar los archivos que han sido almacenados en caché. Debes actualizar el archivo de manifest de caché a sí mismo antes de que el navegador recupere y use los archivos actualizados. Puedes hacer esto programadamente usando
window.applicationCache.swapCache(), aunque los recursos que ya han sido cargados no se verán afectados. Para asegurarse de que los recursos se cargan desde una nueva versión de la caché de la aplicación, la actualización de la página es ideal. - Es una buena idea colocar cabeceras expiradas en tu sitio para los archivos
*.appcachepara que caduquen inmediatamente. Esto previene el riesgo de almacenar en caché archivos de manifest. Por ejemplo, en Apache puedes especificar una configuración de este tipo de la siguiente manera:
ExpiresByType text/cache-manifest "access plus 0 seconds"
Compatibilidad del navegador
| Característica | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Soporte básico | 4.0 | 3.5 | 10.0 | 10.6 | 4.0 |
| Característica | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Soporte básico | 2.1 | (Yes) | Not supported | 11.0 | 3.2 |
Nota: Versiones de Firefox anteriores a la 3.5 ignoran las secciones NETWORK y FALLBACK del archivo manifest de caché.
Ver también
- HTML5Rocks - A Beginner's Guide to Using the Application Cache
- appcachefacts.info - información detallada en AppCache idiosyncrasies
- offline web applications en hacks.mozilla.org - muestras de una aplicacón offline en demo y explica como funciona.
- HTML 5 working draft: Offline web applications
- HTML5 Cache Manifest: An Off-label Usage
nsIApplicationCachensIApplicationCacheNamespacensIApplicationCacheContainernsIApplicationCacheChannelnsIApplicationCacheServicensIDOMOfflineResourceList- Prepárate para Firefox 3.0 - Una guía para desarrolladores web para las muchas nuevas características en este navegador tan popular, específicamente las características offline (IBM developerWorks)