¿Qué es la caché de la aplicación en HTML5?
sobes.tech AI
Respuesta de la IA
La caché de aplicaciones (Application Cache) en HTML5 es un mecanismo que permite a las aplicaciones web funcionar sin conexión, proporcionando un conjunto de recursos (páginas HTML, CSS, JavaScript, imágenes) que el navegador almacena en caché localmente.
Para usar la caché de aplicaciones, se requiere un archivo de manifiesto con extensión .appcache, vinculado a la página HTML mediante el atributo manifest en la etiqueta <html>:
<html manifest="manifest.appcache">
...
</html>
El archivo de manifiesto tiene la siguiente estructura:
CACHE MANIFEST
# Versión del manifiesto (opcional, para actualizar la caché)
# v1.0
CACHE:
# Recursos explícitamente en caché
/css/style.css
/js/script.js
/images/logo.png
FALLBACK:
# Recursos de reserva en caso de falta de conexión
/offline.html /
NETWORK:
# Recursos que siempre deben solicitarse desde la red
*
Las secciones principales del archivo de manifiesto son:
CACHE:: Los recursos listados en esta sección serán almacenados en caché después de la primera carga de la página con el manifiesto especificado.FALLBACK:: Define recursos de reserva. Si una solicitud de red para un recurso principal falla, el navegador cargará el recurso de reserva indicado. Formato:recurso_principal recurso_de_reserva.NETWORK:: Recursos listados en esta sección nunca serán almacenados en caché y siempre se solicitarán desde la red. El símbolo*significa que todos los recursos no listados en otras secciones siempre se solicitarán desde la red.
La actualización de la caché de la aplicación ocurre cuando el archivo de manifiesto cambia. El navegador descarga el manifiesto actualizado, lo compara con el actual y descarga los recursos nuevos o modificados. Los archivos nuevos solo están disponibles después de recargar la página.
Eventos relacionados con la caché de la aplicación:
checking: El navegador verifica si hay una nueva versión del manifiesto.downloading: El navegador descarga los recursos indicados en la nueva versión del manifiesto.progress: Progreso de la descarga de recursos.updateready: La nueva versión de la caché está lista para usarse. Se requiere recargar la página.cached: Los recursos se almacenaron en caché con éxito por primera vez.noupdate: El manifiesto no cambió.error: Ocurrió un error al cargar o actualizar la caché.
La API de la caché de la aplicación está disponible a través de window.applicationCache.
// Verificar el estado de la caché
console.log(window.applicationCache.status);
// Manejar el evento updateready
window.applicationCache.addEventListener('updateready', function() {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
// Aplicar la nueva versión de la caché y recargar la página
window.applicationCache.swapCache();
window.location.reload();
}
}, false);
Aunque Application Cache proporcionaba capacidades offline, su uso no se recomienda en nuevos proyectos debido a la complejidad de gestión, problemas con las actualizaciones y la falta de flexibilidad. Como enfoque moderno para acceso offline y otras funciones de aplicaciones web progresivas (PWA), se utilizan Service Workers.