CacheStorage
La interfaz CacheStorage
representa el almacenamiento para objetos Cache
.
La interfaz:
- Proporciona un directorio maestro de todos los cachés con nombre a los que se puede acceder mediante un
ServiceWorker
u otro tipo de trabajador o alcance dewindow
(no está limitado a usándolo solo con service worker). - Mantiene una asignación de nombres de cadenas a objetos
Cache
correspondientes
Utilice CacheStorage.open()
para obtener una instancia de Cache
.
Usa CacheStorage.match()
para verificar si un Request
dado es una clave en cualquiera de los Cache
objetos que el objeto CacheStorage
rastrea.
Puede acceder a CacheStorage
a través de la propiedad global caches
.
Nota: CacheStorage
siempre rechaza con un SecurityError
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ón Activar 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 que CacheStorage
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é desde CacheStorage.keys()
, abriendo cada caché con CacheStorage.open()
, y haciendo coincidir el que quieras con Cache.match()
.
Nota: Esta característica está disponible en Web Workers.
Contexto seguro: Esta función está disponible solo en contextos seguros (HTTPS), en algunos o todos los navegadores que lo soportan.
Métodos de instancia
CacheStorage.match()
-
Comprueba si un objeto
Request
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 un
Promise
que se resuelve entrue
si existe un objetoCache
que coincide concacheName
. CacheStorage.open()
-
Devuelve un
Promise
que se resuelve en el objetoCache
que coincide concacheName
(se crea un nuevo caché si aún no existe). CacheStorage.delete()
-
Encuentra el objeto
Cache
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 un
Promise
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 MDN ejemplo simple de service worker (vea simple service worker ejecutándose en vivo.)
Este código de service worker espera que se active un InstallEvent
, luego ejecuta waitUntil
para manejar el proceso de instalación de la aplicación. Esto consiste en llamar a CacheStorage.open
para crear un nuevo caché, luego usar Cache.addAll
para agregarle una serie de activos.
En el segundo bloque de código, esperamos que se active un FetchEvent
. 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 usando
Cache.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, usando FetchEvent.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 un service worker y usa el operador await
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 });
}
Especificaciones
Specification |
---|
Service Workers # cachestorage-interface |
Compatibilidad con navegadores
BCD tables only load in the browser