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 aplicaciones (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:
Para habilitar el caché de aplicaciones, debe incluir el atributo {{htmlattrxref("manifest", "html")}} en el elemento {{HTMLElement("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.
Es uso de caché de aplicaciones modifica el proceso normal de la carga de un documento:
El proceso para cargar documentos y actualizar el caché de aplicaciones está especificado con gran detalle aquí debajo:
manifest, si no existe caché de aplicaciones, 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. checking al objeto window.applicationCache y descarga el archivo de manifest, siguiendo las reglas de caché HTTP apropiadas.noupdate al objeto applicationCache y 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.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 evento progress al objeto applicationCache. Si ocurre cualquier error, el navegador envía un evento error y la actualización se detiene.cached es enviado al objeto applicationCache. 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).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:
C:\Users\<usuario>\AppData\Local\Mozilla\Firefox\Profiles\<salt>.<nombre de perfil>\OfflineCache/Users/<usuario>/Library/Caches/Firefox/Profiles/<salt>.<nombre de perfil>/OfflineCacheEn 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 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.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.
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. http://www.ejemplo.com/index.html http://www.ejemplo.com/encabezado.png http://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.
CACHE, NETWORK y FALLBACKUn manifest puede tener tres secciones distintas: CACHE, NETWORK y FALLBACK.
CACHE:CACHE: (o inmediatamente después de la línea CACHE MANIFEST) son guardados en caché explícitamente después de ser descargados la primera vez.NETWORK: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: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.
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).
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:
# 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 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é.
:) en el nombre de sección.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).
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.
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:
manifest.Las categorías de recursos se describen con más detalle debajo.
Una entrada maestra es cualquier archivo HTML que incluya un atributo {{ htmlattrxref("manifest","html") }} en su elemento {{ HTMLElement("html") }}. Por ejemplo, digamos que tenemos el archivo http://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.
Las entradas explícitas son recursos que están listados explicitamente en la seccion CACHE de un archivo de manifest de caché.
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 http://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é. Las entradas fallback son usadas cuando un intento de cargar los recursos falla. Por ejemplo, digamos que el archivo de anifest de caché http://www.example.com/example.appcache incluye el siguiente contenido:
CACHE MANIFEST FALLBACK: example/bar/ example.html
Cualquier petición a http://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.
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:
UNCACHEDIDLECHECKINGDOWNLOADINGUPDATEREADYupdateready, que es lanzado en lugar del evento cached cuando una nueva actualización acaba de ser descargada pero aún no ah sido activado el método swapCache().OBSOLETEPuedes 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().
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, como other-cached-page.html#whatever?parameterName=value.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.*.appcache para 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"{{ CompatibilityTable() }}
| 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 | {{ CompatVersionUnknown() }} | {{ CompatNo() }} | 11.0 | 3.2 |
Nota: Versiones de Firefox anteriores a la 3.5 ignoran las secciones NETWORK y FALLBACK del archivo manifest de caché.
{{ HTML5ArticleTOC() }}