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 introduce la caché de la aplicación (Application Cache), lo que significa que se puede almacenar en caché 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 inicial del navegador que admite completamente la caché de aplicación.

API
Cache 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 aplicación, incluya la propiedad manifest en la etiqueta <html> del documento:

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

Cada página que especifique 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.

Manifest de archivo

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

El archivo manifest tiene tres partes:

  • CACHE MANIFEST - En la sección 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 de este título se enumeran los archivos que necesitan conectarse al servidor y no se almacenarán en caché
  • FALLBACK - En la sección de este título se especifican los archivos que se utilizarán como página de fallback cuando la página no sea accesible (por ejemplo, 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 el asterisco para indicar que todos los otros recursos/Archivos necesitan conexión a Internet:

NETWORK:
*
FALLBACK

La sección FALLBACK siguiente 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 sustituto.

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 vacía la caché del navegador
  • El archivo manifest se ha modificado (consulte los consejos a continuación)
  • Actualizar la caché de la aplicación mediante un 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 la versión en la línea de comentarios es una manera de hacer que el navegador vuelva a almacenar en caché los archivos.

Consideraciones sobre la caché de la aplicación

Tenga en cuenta el contenido en caché.

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

Notas:La capacidad de almacenamiento en caché de los datos en caché puede variar según el navegador (algunos navegadores limitan a 5MB por sitio).