CacheStorage

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨abril de 2018⁩.

La interfazCacheStorage representa el almacenamiento para objetosCache.

La interfaz:

Proporciona un directorio maestro de todos los cachés con nombre a los que se puede acceder mediante unServiceWorker u otro tipo de trabajador o alcance dewindow (no está limitado a usándolo solo conservice worker).
Mantiene una asignación de nombres de cadenas a objetosCache correspondientes

UtiliceCacheStorage.open() para obtener una instancia deCache.

UsaCacheStorage.match() para verificar si unRequest dado es una clave en cualquiera de losCache objetos que el objetoCacheStorage rastrea.

Puede acceder aCacheStorage a través de la propiedad globalcaches.

Nota:CacheStorage siempre rechaza con unSecurityError en orígenes que no son de confianza (es decir, aquellos que no usan HTTPS, aunque esta definición probablemente se volverá más compleja en el futuro). Al probar en Firefox, puede evitar esto marcando la opciónActivar service workers bajo HTTP (cuando la caja de herramientas esté abierta) en el menú de opciones/engranaje de las Herramientas de desarrollador de Firefox. Además, debido a queCacheStorage requiere acceso al sistema de archivos, es posible que no esté disponible en modo privado en Firefox.

Nota:CacheStorage.match() es un método conveniente. Se puede implementar una funcionalidad equivalente para hacer coincidir una entrada de caché devolviendo una matriz de nombres de caché desdeCacheStorage.keys(), abriendo cada caché conCacheStorage.open(), y haciendo coincidir el que quieras conCache.match().

Nota: Esta característica está disponible enWeb Workers.

Contexto seguro: Esta función está disponible solo encontextos seguros (HTTPS), en algunos o todos losnavegadores que lo soportan.

Métodos de instancia

CacheStorage.match(): Comprueba si un objetoRequest dado es una clave en cualquiera de los objetosCache que rastrea el objetoCacheStorage y devuelve unPromise que se resuelve en esa coincidencia.
CacheStorage.has(): Devuelve unPromise que se resuelve entrue si existe un objetoCache que coincide concacheName.
CacheStorage.open(): Devuelve unPromise que se resuelve en el objetoCache que coincide concacheName (se crea un nuevo caché si aún no existe).
CacheStorage.delete(): Encuentra el objetoCache que coincide concacheName y, si lo encuentra, elimina el objetoCache y devuelve unPromise que se resuelve entrue. Si no se encuentra ningún objetoCache, se resuelve comofalse.
CacheStorage.keys(): Devuelve unPromise que se resolverá con una matriz que contiene cadenas correspondientes a todos los objetosCache nombrados rastreados porCacheStorage. Utilice este método para iterar sobre una lista de todos los objetosCache.

Ejemplos

Este fragmento de código de MDNejemplo simple deservice worker (veasimpleservice worker ejecutándose en vivo.)Este código deservice worker espera que se active unInstallEvent, luego ejecutawaitUntil para manejar el proceso de instalación de la aplicación. Esto consiste en llamar aCacheStorage.open para crear un nuevo caché, luego usarCache.addAll para agregarle una serie de activos.

En el segundo bloque de código, esperamos que se active unFetchEvent. Construimos una respuesta personalizada así:

Compruebe si se encuentra una coincidencia para la solicitud en CacheStorage. Si es así, entrega eso.
De lo contrario, obtenga la solicitud de la red, luego abra también el caché creado en el primer bloque y agregue un clon de la solicitud usandoCache.put (cache.put(event.request, response.clone())).
Si esto falla (por ejemplo, porque la red no funciona), devuelva una respuesta alternativa.

Finalmente, devuelva lo que sea que la respuesta personalizada terminó siendo igual a, usandoFetchEvent.respondWith.

self.addEventListener("install", (event) => {  event.waitUntil(    caches      .open("v1")      .then((cache) =>        cache.addAll([          "/",          "/index.html",          "/style.css",          "/app.js",          "/image-list.js",          "/star-wars-logo.jpg",          "/gallery/bountyHunters.jpg",          "/gallery/myLittleVader.jpg",          "/gallery/snowTroopers.jpg",        ]),      ),  );});self.addEventListener("fetch", (event) => {  event.respondWith(    caches.match(event.request).then((response) => {      // caches.match() siempre se resuelve,      // pero en caso de éxito, la respuesta tendrá valor      if (response !== undefined) {        return response;      } else {        return fetch(event.request)          .then((response) => {            // la respuesta puede usarse solo una vez            // que necesitamos guardar el clon para poner            // una copia en caché y entregar la segunda            let responseClone = response.clone();            caches.open("v1").then((cache) => {              cache.put(event.request, responseClone);            });            return response;          })          .catch(() => caches.match("/gallery/myLittleVader.jpg"));      }    }),  );});

Este fragmento muestra cómo se puede usar la API fuera del contexto de unservice worker y usa el operadorawait para obtener un código mucho más legible.

// Intente obtener datos del caché, pero recurra a buscarlos en vivo.async function getData() {  const cacheVersion = 1;  const cacheName = `myapp-${cacheVersion}`;  const url = "https://jsonplaceholder.typicode.com/todos/1";  let cachedData = await getCachedData(cacheName, url);  if (cachedData) {    console.log("Datos almacenados en caché recuperados");    return cachedData;  }  console.log("Obtener datos nuevos");  const cacheStorage = await caches.open(cacheName);  await cacheStorage.add(url);  cachedData = await getCachedData(cacheName, url);  await deleteOldCaches(cacheName);  return cachedData;}// Obtener datos del caché.async function getCachedData(cacheName, url) {  const cacheStorage = await caches.open(cacheName);  const cachedResponse = await cacheStorage.match(url);  if (!cachedResponse || !cachedResponse.ok) {    return false;  }  return await cachedResponse.json();}// Elimine los cachés antiguos para respetar// el espacio en disco del usuario.async function deleteOldCaches(currentCache) {  const keys = await caches.keys();  for (const key of keys) {    const isOurCache = key.startsWith("myapp-");    if (currentCache === key || !isOurCache) {      continue;    }    caches.delete(key);  }}try {  const data = await getData();  console.log({ data });} catch (error) {  console.error({ error });}