API de la caché de la aplicación ("AppCache")

Internet Explorer 10 y las aplicaciones de la Tienda Windows con JavaScript admiten la API de caché de aplicación (o AppCache), tal y como se define en la especificación de HTML5. Esto permite crear aplicaciones web sin conexión. AppCache permite que las páginas web almacenen en caché (o guarden) recursos localmente, incluidos imágenes, bibliotecas de scripts, hojas de estilos, etc.Además, AppCache permite servir direcciones URL desde el contenido almacenado en caché usando la notación estándar del Identificador uniforme de recursos.

Usando AppCache para guardar recursos localmente, se mejora el rendimiento de una página web ya que reduce el número de solicitudes realizadas al servidor host; además, se permite el acceso sin conexión a recursos copiados en caché.

Para almacenar recursos en caché localmente:

1. Crea un archivo de manifiesto que defina los recursos que quieres guardar.
2. Haz referencia al archivo de manifiesto en cada página web diseñada para usar recursos almacenados en caché.

Creación de un archivo de manifiesto

El archivo de manifiesto es un archivo de texto que define el comportamiento del almacenamiento en caché para los recursos que usa la página web, como se muestra en el siguiente ejemplo.


CACHE MANIFEST

CACHE:
# Defines resources to be cached.
script/library.js
css/stylesheet.css
images/figure1.png

FALLBACK:
# Defines resources to be used if non-cached
# resources cannot be downloaded, for example
# when the browser is offline..
photos/ figure2.png

NETWORK:
# Defines resources that will not be cached.
figure3.png


Los archivos de manifiesto se dividen en las siguientes secciones:
  • La sección CACHE: define los recursos que se almacenarán localmente. En este ejemplo, tres archivos se almacenan en caché.
  • La sección FALLBACK: define los recursos que se usarán cuando otros recursos no estén disponibles. En este ejemplo se define figure2.png como una imagen de reserva de la carpeta de fotos. Si el explorador no puede acceder a imágenes de la carpeta de fotos (porque el explorador está desconectado o porque no puede acceder al servidor), figure2.png reemplazará las imágenes que no estén disponibles en el marcado representado. Como resultado, figure2.png se almacenará en caché localmente.
  • La sección NETWORK: especifica los recursos a los que se puede acceder cuando hay una conexión de red. Los recursos de esta sección no están almacenados en caché. Esta sección permite el uso del carácter comodín (*) para indicar que los demás recursos no deben almacenarse en caché.
Los archivos de manifiesto pueden contener cualquier cantidad de secciones y las secciones pueden repetirse; sin embargo, las nuevas secciones deben comenzar con el encabezado de sección seguido por dos puntos, como se muestra en el ejemplo anterior. Si no se proporciona ningún encabezado de sección, se utiliza el encabezado CACHE: de manera predeterminada. En el siguiente ejemplo, se muestra un manifiesto simplificado.

CACHE MANIFEST
script/library.js
css/stylesheet.css
images/figure1.png


Además, los archivos de manifiesto:
  • Deben codificarse con la codificación de caracteres del formato de transmisión Unicode de 8 bits (UTF-8).
  • Deben servirse con un tipo MIME de manifiesto de caché/texto.
  • Deben comenzar con la línea "CACHE MANIFEST".
  • Pueden contener comentarios, precedidos por el signo de número (#).

Para obtener más información, consulta la sintaxis del manifiesto de caché.

Declaración de un manifiesto

Para asociar un manifiesto con una página web, asigna el nombre del archivo de manifiesto al atributo manifest del elemento html, como se muestra en el siguiente ejemplo.


<!doctype html>
<html manifest="appcache.manifest">
 <head>
  <title>A Web Page</title>
  <script src="library.js"></script>
  <link rel="stylesheet" href="stylesheet.css">
 </head>
 <body onload="doSomething();">
  <p>Results go here: <span id="results">Unknown</span></p>
 </body>
</html>


En este ejemplo, la pagina web declara "appcache.manifest" como el archivo de manifiesto. La declaración de manifiesto se interpreta como cualquier otra referencia de archivo. Como este ejemplo usa un nombre de archivo relativo, se da por sentado que el manifiesto está ubicado en el mismo directorio que la página web.

Nota  Las referencias de archivo en el manifiesto se interpretan con respecto a la ubicación del archivo de manifiesto, no la página web que lo declara.

No es necesario que el manifiesto incluya el nombre de la página web que lo declara; las páginas web que declaran manifiestos se almacenan en caché de manera automática.

El objeto ApplicationCache

Internet Explorer 10 también admite el objeto ApplicationCache, que ofrece métodos y propiedades que te permiten administrar la memoria caché de la aplicación. Además, puedes definir controladores de eventos que muestren el progreso del proceso de la memoria caché.

Usa la propiedad applicationCache de un objeto window (o un objeto worker) para acceder al objeto ApplicationCache, como se muestra en siguiente ejemplo.


var sCacheStatus = "Not supported";
if (window.applicationCache) 
{
   var oAppCache = window.applicationCache;
   switch ( oAppCache.status ) 
   {
      case oAppCache.UNCACHED : 
         sCacheStatus = "Not cached"; 
         break;
      case oAppCache.IDLE : 
         sCacheStatus = "Idle"; 
         break;
      case oAppCache.CHECKING : 
         sCacheStatus = "Checking"; 
         break;
      case oAppCache.DOWNLOADING : 
         sCacheStatus = "Downloading"; 
         break;
      case oAppCache.UPDATEREADY : 
         sCacheStatus = "Update ready"; 
         break;
      case oAppCache.OBSOLETE : 
         sCacheStatus = "Obsolete"; 
         break;
      default : 
        sCacheStatus = "Unexpected Status ( " + 
                       oAppCache.status.toString() + ")";
        break;
   }
}
return sCacheStatus;


Este ejemplo usa la propiedad status para determinar el estado de la caché de la aplicación para el documento que está cargando la página web.

El objeto ApplicationCache admite dos métodos para controlar la caché. El método update inicia una comprobación asincrónica de actualizaciones, similar a la que se ejecuta cuando se carga la página web por primera vez. Cualquier caché existente se utilizará hasta que la página web vuelva a cargarse o hasta que se llame el método swapCache. Para comenzar a usar una caché actualizada, vuelve a cargar la página web (manualmente o mediante programación) o llama al método swapCache. Como la caché se actualiza cuando una página web vuelve a cargarse, no es necesario llamar al método swapCache antes de volver a cargar o actualizar una página web.

Nota  La página web no usa la caché actualizada hasta que vuelve a cargarse, ya sea manualmente o mediante programación con el método reload del objeto window.location.

El objeto ApplicationCache admite los siguientes eventos:

  • El evento cached se activa cuando el manifiesto se ha almacenado en caché.
  • El evento checking se activa cuando se está comprobando la presencia de una actualización.
  • El evento downloading se activa cuando se están descargando los recursos del manifiesto.
  • El evento progress se activa cuando se están descargando los recursos del manifiesto.
  • El evento error se activa cuando se produce un problema, como un código de respuesta HTML 404 o 410. El evento también se activa cuando no se puede descargar el archivo de manifiesto.
  • El evento updateready se activa cuando se encuentra disponible una versión más reciente de la caché.
  • El evento noupdate se activa cuando se ha solicitado una actualización pero el manifiesto no ha cambiado.
  • El evento obsolete se activa cuando la caché actual se marca como obsoleta.

El siguiente ejemplo muestra cómo registrar controladores de eventos para estos eventos.


if (window.applicationCache) {
  var appCache = window.applicationCache;
   appCache.addEventListener('error', appCacheError, false);
   appCache.addEventListener('checking', checkingEvent, false);
   appCache.addEventListener('noupdate', noUpdateEvent, false);
   appCache.addEventListener('downloading', downloadingEvent, false);
   appCache.addEventListener('progress', progressEvent, false);
   appCache.addEventListener('updateready', updateReadyEvent, false);
   appCache.addEventListener('cached', cachedEvent, false);
}


Referencia de API

Application Cache API ("AppCache")

Demostraciones de la versión de prueba de Internet Explorer

Cookbook Demo
A Day in the Park

Publicaciones de IEBlog

Generar experiencias sin conexión con AppCache e IndexedDB de HTML5

Especificación

HTML5: sección 5.7.2

 

 

Mostrar:
© 2014 Microsoft