JavaScript Academy · Lección

La API Cache

Almacene y sirva respuestas desde la caché.

La API Cache es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué es la Cache API?

La Cache API almacena pares de solicitud y respuesta en cachés con nombre. Los service workers la utilizan para servir recursos sin acceder a la red, lo que constituye la base de la compatibilidad sin conexión.

El objeto caches

El objeto global caches (un CacheStorage) gestiona todas las cachés con nombre. Está disponible tanto en las páginas como en los service workers.

// Available globally:
// caches.open(name)
// caches.match(request)
// caches.delete(name)
// caches.keys()

Abrir una caché

caches.open(name) devuelve una Promise para una caché con ese nombre y la crea si no existe. Los nombres permiten versionar las cachés.

caches.open('static-v1').then(cache => {
  console.log('cache ready');
});

Precarga con addAll

Durante install, cache.addAll(urls) obtiene y almacena una lista de recursos en una sola llamada. Si falla alguna obtención, se rechaza toda la operación.

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('static-v1').then(cache =>
      cache.addAll(['/', '/styles.css', '/app.js'])
    )
  );
});

waitUntil

event.waitUntil(promise) indica al navegador que mantenga activo el worker hasta que termine la Promise. Incluya en él la configuración de la caché para que la instalación no termine demasiado pronto.

self.addEventListener('install', (event) => {
  event.waitUntil(setupCache());
});

Añadir una entrada

cache.put(request, response) almacena una sola respuesta, mientras que cache.add(url) obtiene y almacena una URL. Use put cuando ya tenga una respuesta que guardar.

const cache = await caches.open('static-v1');
const response = await fetch('/logo.png');
await cache.put('/logo.png', response);

Buscar en la caché

cache.match(request) busca una respuesta almacenada. Se resuelve con la respuesta o con undefined si no hay ninguna coincidencia.

const cache = await caches.open('static-v1');
const hit = await cache.match('/styles.css');
if (hit) console.log('served from cache');

Acceso directo a caches.match

caches.match(request) busca en todas las cachés a la vez. Resulta práctico en un controlador de fetch cuando no importa qué caché contiene el recurso.

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then(hit =>
      hit || fetch(event.request)
    )
  );
});

respondWith

Dentro de un evento fetch, event.respondWith(promise) proporciona la respuesta que utilizará el navegador. Resuélvalo con un Response almacenado en caché o recién obtenido.

self.addEventListener('fetch', (event) => {
  event.respondWith(handleRequest(event.request));
});

Clonar respuestas

El cuerpo de una respuesta solo se puede leer una vez. Para devolver una respuesta y almacenarla, clónela primero.

const response = await fetch(request);
cache.put(request, response.clone()); // store a copy
return response; // return the original

Eliminar entradas de caché

cache.delete(request) elimina una entrada; caches.delete(name) elimina una caché completa con nombre. Use estos métodos para expulsar recursos obsoletos.

await cache.delete('/old-asset.js');
await caches.delete('static-v0'); // remove old cache version

Comprobación rápida

Compruebe su comprensión de la Cache API.

Repaso

Ha aprendido sobre la Cache API:

caches.open(name) obtiene o crea una caché con nombre.
addAll precarga recursos en caché; put/add almacena entradas.
match recupera recursos; caches.match busca en todas las cachés.
respondWith proporciona la respuesta en un evento fetch.
Clone las respuestas antes de almacenarlas en caché y devolverlas.

A continuación, estrategias de caché.

Preguntas frecuentes

¿La lección «La API Cache» es gratis?

Sí — el texto completo de «La API Cache» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «La API Cache»?

Almacene y sirva respuestas desde la caché. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar JavaScript Academy?

No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «La API Cache»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?

Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a JavaScript Academy