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

La caché de aplicaciones (Application Cache o AppCache) en HTML5 permitía a los navegadores almacenar en caché recursos (HTML, CSS, JavaScript, imágenes) para acceso sin conexión y mejorar el rendimiento.

El principio de funcionamiento se basa en un archivo de manifiesto (manifest="appcache.manifest") con extensión .appcache, que describe qué archivos deben almacenarse en caché.

Ejemplo de archivo de manifiesto:

CACHE MANIFEST
# Versión 1.0

CACHE:
/index.html
/css/style.css
/js/script.js

FALLBACK:
/ /offline.html

NETWORK:
*

Secciones del archivo de manifiesto:

CACHE:: Recursos que deben almacenarse en caché explícitamente.
FALLBACK:: Define recursos sustitutos que se usarán si un recurso no está disponible (por ejemplo, para una página sin conexión).
- <recurso en línea> <recurso sin conexión>
NETWORK:: Recursos que siempre requieren acceso en línea (generalmente * para todos los demás recursos).

Uso:

Crear un archivo .appcache.

Añadir el atributo manifest a la etiqueta <html>:

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

Configurar el tipo MIME .appcache en el servidor como text/cache-manifest.

A pesar de su funcionalidad, AppCache tiene desventajas, como problemas con la actualización del caché, gestión compleja y errores. Está obsoleto y eliminado de la especificación HTML5, y su funcionalidad ha sido reemplazada por Service Workers, que ofrecen un mecanismo más flexible y potente para gestionar el almacenamiento en caché y la funcionalidad sin conexión.