Cache API Avanzada: Gestión y Optimización de Caches
Domina los métodos avanzados de la Cache API para gestionar múltiples caches, implementar búsquedas complejas y optimizar el almacenamiento offline.
TL;DR - Resumen rápido
- Usa caches.keys() para gestionar múltiples caches con versionado
- cache.add() y cache.addAll() simplifican agregar recursos al cache
- cache.keys() lista todas las peticiones almacenadas en un cache
- Los métodos de búsqueda aceptan opciones avanzadas como ignoreSearch e ignoreVary
- Implementa estrategias de limpieza automática para mantener caches optimizados
Métodos Avanzados de Cache API
Este artículo profundiza en los métodos avanzados de la Cache API que van más allá de los conceptos básicos cubiertos en la introducción a Service Workers. Aquí exploraremos cómo gestionar múltiples caches, implementar búsquedas complejas y optimizar el almacenamiento con estrategias de limpieza automática.
La Cache API proporciona un conjunto completo de métodos para gestionar el almacenamiento offline. Dominar estos métodos te permite implementar estrategias sofisticadas de caching que mejoran significativamente el rendimiento y la experiencia offline de tu aplicación.
- <strong>caches.keys()</strong>: Obtiene lista de todos los caches para gestión de versiones
- <strong>cache.add()</strong>: Agrega una URL al cache automáticamente
- <strong>cache.keys()</strong>: Lista todas las peticiones almacenadas en un cache
- <strong>Opciones de búsqueda</strong>: Controla cómo se buscan recursos con ignoreSearch, ignoreVary
- <strong>Limpieza automática</strong>: Elimina caches antiguos basándose en versionado
Gestionar Múltiples Caches
Una aplicación moderna típicamente necesita gestionar múltiples caches para diferentes tipos de recursos. El método caches.keys() te permite listar y gestionar todos los caches activos, lo que es fundamental para implementar estrategias de versionado y limpieza.
caches.keys()
El método caches.keys() devuelve una Promise que se resuelve con un array de nombres de todos los caches disponibles. Esto es útil para listar y gestionar múltiples caches.
Este ejemplo muestra cómo obtener todos los caches disponibles usando caches.keys(). También mostramos cómo eliminar un cache específico usando caches.delete().
Mejor práctica
Usa nombres de cache con versión (ej: 'mi-app-v1', 'mi-app-v2') para facilitar la limpieza de caches antiguos. Cuando actualices tu aplicación, crea un nuevo cache con una versión actualizada y elimina el cache antiguo.
Agregar al Cache
Para agregar recursos al cache, usas los métodos cache.put() y cache.addAll(). El método cache.put() agrega una sola respuesta, mientras que cache.addAll() agrega múltiples respuestas en una sola operación.
cache.put()
El método cache.put() agrega una sola respuesta al cache. Este método toma dos parámetros: la petición (Request o URL) y la respuesta (Response). La respuesta debe ser un objeto Response válido.
Este ejemplo muestra cómo agregar una sola respuesta al cache usando cache.put(). Usamos fetch() para obtener la respuesta y luego la agregamos al cache. También mostramos cómo agregar una respuesta personalizada.
cache.addAll()
El método cache.addAll() agrega múltiples respuestas al cache en una sola operación. Este método toma un array de URLs o peticiones y las agrega todas al cache. Si alguna petición falla, ninguna se agrega.
Este ejemplo muestra cómo agregar múltiples respuestas al cache usando cache.addAll(). Este método es ideal para precachear recursos críticos durante la instalación del Service Worker.
Advertencia de cache.addAll()
cache.addAll() falla completamente si alguna petición falla. Si necesitas agregar recursos donde algunos pueden fallar, usa cache.put() en lugar de cache.addAll() o maneja los errores individualmente.
cache.add()
El método cache.add() agrega una sola respuesta al cache. A diferencia de cache.put(), cache.add() hace la petición automáticamente y agrega la respuesta al cache.
Este ejemplo muestra cómo agregar una sola respuesta al cache usando cache.add(). Este método hace la petición automáticamente y agrega la respuesta al cache.
Búsqueda Avanzada en Cache
La Cache API proporciona opciones avanzadas para buscar recursos que te permiten controlar cómo se realiza la búsqueda. Estas opciones son especialmente útiles cuando trabajas con URLs que incluyen parámetros de consulta o headers variables.
- <strong>ignoreSearch</strong>: Ignora los parámetros de consulta al buscar (ej: /api?v=1 === /api)
- <strong>ignoreMethod</strong>: Ignora el método HTTP de la petición (GET, POST, etc.)
- <strong>ignoreVary</strong>: Ignora el header Vary al comparar respuestas
- <strong>cacheName</strong>: Especifica un cache específico donde buscar
caches.match()
El método caches.match() busca una petición en todos los caches. Este método devuelve una Promise que se resuelve con la respuesta si se encuentra, o undefined si no se encuentra.
Este ejemplo muestra cómo buscar una petición en todos los caches usando caches.match(). Si encontramos una respuesta, la servimos. Si no, hacemos la petición a la red.
cache.match()
El método cache.match() busca una petición en un cache específico. Este método devuelve una Promise que se resuelve con la respuesta si se encuentra, o undefined si no se encuentra.
Este ejemplo muestra cómo buscar una petición en un cache específico usando cache.match(). Este método es útil cuando tienes múltiples caches organizados por tipo de recurso.
cache.keys()
El método cache.keys() devuelve una Promise que se resuelve con un array de todas las peticiones en el cache. Esto es útil para listar y gestionar los recursos en un cache.
Este ejemplo muestra cómo obtener todas las peticiones en un cache usando cache.keys(). También mostramos cómo eliminar todas las entradas de un cache.
Opciones de búsqueda
Los métodos caches.match() y cache.match() aceptan opciones de búsqueda como ignoreSearch, ignoreMethod e ignoreVary. Estas opciones te permiten controlar cómo se realiza la búsqueda en el cache.
Eliminar del Cache
Para eliminar recursos del cache, usas los métodos cache.delete() y caches.delete(). El método cache.delete() elimina una respuesta específica de un cache, mientras que caches.delete() elimina un cache completo.
cache.delete()
El método cache.delete() elimina una respuesta específica de un cache. Este método toma la petición (Request o URL) como parámetro y devuelve una Promise que se resuelve con true si se eliminó, o false si no se encontró.
Este ejemplo muestra cómo eliminar una respuesta específica de un cache usando cache.delete(). También mostramos cómo eliminar múltiples respuestas usando cache.keys().
caches.delete()
El método caches.delete() elimina un cache completo. Este método toma el nombre del cache como parámetro y devuelve una Promise que se resuelve con true si se eliminó, o false si no se encontró.
Este ejemplo muestra cómo eliminar un cache completo usando caches.delete(). También mostramos cómo eliminar todos los caches excepto uno específico.
Limpieza de cache
Los caches pueden crecer indefinidamente si no los limpias periódicamente. Es buena práctica implementar una estrategia de limpieza que elimine caches antiguos o recursos que ya no se necesitan.
Resumen: Cache API
Conceptos principales:
- •La Cache API almacena objetos Response completos en el cache del navegador
- •caches.open() abre un cache específico, caches.keys() lista todos los caches
- •cache.put() agrega una respuesta, cache.addAll() agrega múltiples respuestas
- •caches.match() busca en todos los caches, cache.match() busca en uno específico
- •cache.delete() elimina una respuesta, caches.delete() elimina un cache completo
Mejores prácticas:
- •Usa nombres de cache con versión para facilitar la limpieza de caches antiguos
- •Implementa limpieza periódica del cache para evitar consumo excesivo
- •Usa opciones de búsqueda (ignoreSearch, ignoreVary) para coincidencias flexibles
- •Usa cache.addAll() para precachear recursos críticos durante la instalación
- •Maneja errores al agregar recursos al cache con cache.put()