HTML5 Caché de aplicaciones

Usando HTML5, mediante la creación de un archivo cache manifest, se puede crear fácilmente una versión sin conexión de una aplicación web.

Nota:La tecnología manifest ha quedado obsoleta según los estándares web, por lo que ya no se recomienda usar esta función.

¿Qué es el caché de aplicaciones (Application Cache)?

HTML5 introduce el caché de aplicaciones, lo que significa que las aplicaciones web se pueden almacenar en caché y acceder a ellas sin conexión a Internet.

El caché de aplicaciones ofrece tres ventajas a las aplicaciones:

1. Navegación sin conexión: los usuarios pueden usar las aplicaciones cuando están sin conexión.
2. Velocidad: los recursos almacenados en caché se cargan más rápido.
3. Reducción de la carga del servidor: el navegador solo descargará del servidor los recursos actualizados o modificados.

Soporte del navegador

Internet Explorer 10, Firefox, Chrome, Safari y Opera son compatibles con el caché de aplicaciones.

Ejemplo de HTML5 Cache Manifest

El siguiente ejemplo muestra un documento HTML con cache manifest (para navegación sin conexión):

Fundamentos de Cache Manifest

Para habilitar el caché de aplicaciones, incluya el atributo manifest en la etiqueta <html> del documento:

Cada página que especifica un manifest se almacenará en caché cuando el usuario la visite. Si no se especifica el atributo manifest, la página no se almacenará en caché (a menos que la página se indique directamente en el archivo manifest).

La extensión de archivo recomendada para el archivo manifest es: ".appcache".

Tenga en cuenta que el archivo manifest debe configurarse con el tipo MIME correcto, es decir, "text/cache-manifest". Debe configurarse en el servidor web.

Archivo Manifest

El archivo manifest es un archivo de texto simple que le indica al navegador qué contenido debe almacenarse en caché (y qué no).

El archivo manifest se puede dividir en tres secciones:

• CACHE MANIFEST- Los archivos enumerados bajo este título se almacenarán en caché después de su primera descarga.
• NETWORK- Los archivos enumerados bajo este título requieren una conexión con el servidor y no se almacenarán en caché.
• FALLBACK- Los archivos enumerados bajo este título especifican las páginas de respaldo cuando la página no está disponible (por ejemplo, la página 404).

CACHE MANIFEST

La primera línea, CACHE MANIFEST, es obligatoria:

El archivo manifest anterior enumera tres recursos: un archivo CSS, una imagen GIF y un archivo JavaScript. Cuando se carga el archivo manifest, el navegador descargará estos tres archivos desde el directorio raíz del sitio web. Luego, cada vez que el usuario se desconecte de Internet, estos recursos seguirán disponibles.

NETWORK

La siguiente sección NETWORK especifica que el archivo "login.php" nunca se almacenará en caché y no estará disponible sin conexión:

Se puede usar un asterisco para indicar que todos los demás recursos/archivos requieren conexión a Internet:

FALLBACK

La siguiente sección FALLBACK especifica que si no se puede establecer una conexión a Internet, se usará "offline.html" en lugar de todos los archivos en el directorio /html5/:

Nota:El primer URI es el recurso, el segundo es el respaldo.

Actualizar caché

Una vez que la aplicación se almacena en caché, permanecerá en caché hasta que ocurra alguna de las siguientes situaciones:

• El usuario borra la caché del navegador.
• El archivo manifest se modifica (consulte la sugerencia a continuación).
• La caché de la aplicación se actualiza por medio de un programa.

Ejemplo - Archivo Manifest completo

Consejo:Las líneas que comienzan con "#" son líneas de comentario, pero también pueden servir para otros fines. La caché de la aplicación se actualiza cuando se modifica su archivo manifest. Si edita una imagen o modifica una función de JavaScript, estos cambios no se volverán a almacenar en caché. Actualizar la fecha y el número de versión en las líneas de comentario es una forma de hacer que el navegador vuelva a almacenar en caché los archivos.

Notas sobre el caché de aplicaciones

Preste atención al contenido que se almacena en caché.

Una vez que un archivo se almacena en caché, el navegador seguirá mostrando la versión almacenada en caché, incluso si modifica el archivo en el servidor. Para asegurarse de que el navegador actualice la caché, debe actualizar el archivo manifest.

Nota:Los límites de capacidad de los datos en caché pueden variar según el navegador (algunos navegadores tienen un límite de 5 MB por sitio).