Caché de la aplicación HTML5

Con la caché de la aplicación, creando un archivo de manifestación de caché, se puede crear fácilmente una versión sin conexión de la aplicación web.

¿Qué es la caché de la aplicación?

HTML5 introdujo la caché de la aplicación (Application Cache), lo que significa que se puede cachear una aplicación web y acceder a ella sin conexión a internet.

La caché de la aplicación ofrece tres ventajas para la aplicación:

  1. Navegación sin conexión - Los usuarios pueden usarlos cuando la aplicación está sin conexión
  2. Velocidad - Los recursos en caché se cargan más rápido
  3. Reducción de la carga del servidor - El navegador solo descargará recursos actualizados o modificados desde el servidor

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite completamente la caché de la aplicación.

API
Caché de aplicación 4.0 10.0 3.5 4.0 11.5

Ejemplo de Manifesto de Cache HTML

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

Ejemplo

!DOCTYPE HTML
<html manifest="demo.appcache">
<body>
Contenido del documento ......
</body>
</html>

Prueba personal

Fundamentos de Cache Manifest

Para habilitar la caché de la aplicación, incluya la propiedad manifest en la etiqueta <html> del documento:

!DOCTYPE HTML
<html manifest="demo.appcache">
...
</html>

Cada página que se especifica con el manifest se almacenará en caché cuando el usuario la acceda. Si no se especifica la propiedad manifest, la página no se almacenará en caché (a menos que se especifique directamente esa página en el archivo manifest).

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

Nota:El archivo manifest necesita configurar el tipo MIME correcto, es decir, "text/cache-manifest". Debe configurarse en el servidor web.

Manifesto de aplicación

El archivo manifest es un archivo de texto simple que informa al navegador sobre el contenido almacenado en caché (y el contenido que no se almacenará en caché).

El archivo manifest tiene tres partes:

  • CACHE MANIFEST - En la sección siguiente de este título se enumeran los archivos que se almacenarán en caché después de la descarga inicial.
  • NETWORK - En la sección siguiente de este título se enumeran los archivos que necesitan una conexión con el servidor y no se almacenarán en caché.
  • FALLBACK - En la sección siguiente de este título se especifican los archivos de fallback cuando la página no se puede acceder (por ejemplo, la página 404).

CACHE MANIFEST

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

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

El archivo manifest superior enumera tres recursos: un archivo CSS, una imagen GIF y un archivo JavaScript. Después de que se carga el archivo manifest, el navegador descarga estos tres archivos desde el directorio raíz del sitio web. Luego, estos recursos seguirán siendo accesibles independientemente de si el usuario se desconecta de Internet.

NETWORK

La sección NETWORK del archivo especifica que el archivo "login.php" nunca se almacenará en caché y no estará disponible cuando esté desconectado:

NETWORK:
login.asp

Se puede usar un asterisco para indicar que todos los otros recursos/archivos necesitan conexión a Internet:

NETWORK:
*
FALLBACK

La sección FALLBACK a continuación especifica que si no se puede establecer una conexión a Internet, se utilizará "offline.html" para reemplazar todos los archivos en el directorio /html/:

FALLBACK:
/html/ /offline.html

Notas:El primer URI es el recurso, el segundo es el suplente.

Actualizar la caché

Una vez que se haya almacenado la aplicación en caché, se mantendrá en caché hasta que ocurra una de las siguientes situaciones:

  • El usuario borra la caché del navegador
  • El archivo manifest se ha modificado (ver las instrucciones a continuación)
  • Actualización de la caché de la aplicación por parte del programa

Ejemplo - Archivo de Manifesto de Cache completo

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html/ /offline.html

Consejo:Las líneas que comienzan con "#" son líneas de comentarios, pero también pueden satisfacer otros propósitos. La caché de la aplicación solo se actualizará cuando cambie el archivo manifest. Si edita una imagen o modifica una función 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 comentarios es una manera de hacer que el navegador vuelva a almacenar en caché los archivos.

Consideraciones sobre el almacenamiento en caché de aplicaciones

Tenga presente el contenido almacenado en caché.

Una vez que el archivo se haya almacenado en caché, el navegador continuará mostrando la versión almacenada en caché, incluso si modificó el archivo en el servidor. Para asegurarse de que el navegador actualice la caché, debe actualizar el archivo manifest.

Notas:Las limitaciones de capacidad de almacenamiento en caché de los navegadores pueden variar (las limitaciones de algunos navegadores son de 5MB por sitio).