CacheStorage
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2018.
Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.
Hinweis: Diese Funktion ist in Web Workers verfügbar.
Das CacheStorage
-Interface repräsentiert den Speicher für Cache
-Objekte.
Das Interface:
- Bietet ein Hauptverzeichnis aller benannten Caches, auf das von einem
ServiceWorker
oder anderen Arbeitern oder demwindow
-Bereich zugegriffen werden kann (Sie sind nicht darauf beschränkt, es nur mit Service Workern zu verwenden). - Verwaltet eine Zuordnung von Zeichenkettennamen zu den entsprechenden
Cache
-Objekten.
Verwenden Sie CacheStorage.open()
, um eine Cache
-Instanz zu erhalten.
Verwenden Sie CacheStorage.match()
, um zu prüfen, ob eine gegebene Request
ein Schlüssel in einem der von dem CacheStorage
-Objekt verfolgten Cache
-Objekte ist.
Sie können auf CacheStorage
über die Window.caches
-Eigenschaft in Fenstern oder über die WorkerGlobalScope.caches
-Eigenschaft in Arbeitern zugreifen.
Note:
CacheStorage
lehnt immer mit einemSecurityError
bei unzuverlässigen Ursprüngen ab (z.B. solchen, die nicht HTTPS verwenden, obwohl diese Definition in Zukunft wahrscheinlich komplexer werden wird). Beim Testen in Firefox können Sie dies umgehen, indem Sie die Option Service Workers über HTTP aktivieren (wenn das Tool-Fenster geöffnet ist) im Optionen-/Zahnrad-Menü der Firefox-Entwicklertools aktivieren. Darüber hinaus kannCacheStorage
aufgrund der erforderlichen Dateisystemzugriffe im privaten Modus in Firefox nicht verfügbar sein.
Note:
CacheStorage.match()
ist eine praktische Methode. Gleichwertige Funktionalität zum Abgleichen eines Cache-Eintrags kann implementiert werden, indem ein Array von Cache-Namen ausCacheStorage.keys()
zurückgegeben, jeder Cache mitCacheStorage.open()
geöffnet und der gewünschte mitCache.match()
abgeglichen wird.
Instanzmethoden
CacheStorage.match()
-
Prüft, ob eine gegebene
Request
ein Schlüssel in einem der von demCacheStorage
-Objekt verfolgtenCache
-Objekte ist, und gibt einPromise
zurück, das mit diesem Treffer auflöst. CacheStorage.has()
-
Gibt ein
Promise
zurück, das zutrue
aufgelöst wird, wenn einCache
-Objekt existiert, das demcacheName
entspricht. CacheStorage.open()
-
Gibt ein
Promise
zurück, das zu demCache
-Objekt aufgelöst wird, das demcacheName
entspricht (ein neuer Cache wird erstellt, falls dieser noch nicht existiert). CacheStorage.delete()
-
Findet das
Cache
-Objekt, das demcacheName
entspricht, und falls gefunden, löscht dasCache
-Objekt und gibt einPromise
zurück, das zutrue
aufgelöst wird. Falls keinCache
-Objekt gefunden wird, wird es zufalse
aufgelöst. CacheStorage.keys()
-
Gibt ein
Promise
zurück, das mit einem Array von Zeichenfolgen auflöst, die allen von demCacheStorage
verfolgten benanntenCache
-Objekten entsprechen. Verwenden Sie diese Methode, um über eine Liste allerCache
-Objekte zu iterieren.
Beispiele
Dieses Code-Snippet stammt aus dem MDN einfaches Service Worker Beispiel (siehe einfacher Service Worker live betrieben.)
Dieses Service Worker-Skript wartet darauf, dass ein install
-Ereignis ausgelöst wird, und führt dann waitUntil
aus, um den Installationsprozess für die App zu verwalten. Dies besteht darin, CacheStorage.open
aufzurufen, um einen neuen Cache zu erstellen, und dann Cache.addAll
zu verwenden, um eine Reihe von Ressourcen hinzuzufügen.
Im zweiten Codeblock warten wir darauf, dass ein FetchEvent
ausgelöst wird. Wir konstruieren eine benutzerdefinierte Antwort wie folgt:
- Prüfen, ob ein Treffer für die Anfrage im CacheStorage gefunden wird. Falls ja, diesen bereitstellen.
- Falls nicht, die Anfrage aus dem Netzwerk abrufen, dann auch den Cache öffnen, der im ersten Block erstellt wurde, und ein Duplikat der Anfrage hinzufügen, indem
Cache.put
verwendet wird (cache.put(event.request, response.clone())
). - Falls dies fehlschlägt (z.B. weil das Netzwerk ausgefallen ist), eine Ersatzantwort zurückgeben.
Schließlich zurückgeben, was auch immer die benutzerdefinierte Antwort zu sein scheint, unter Verwendung von 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() always resolves
// but in case of success response will have value
if (response !== undefined) {
return response;
} else {
return fetch(event.request)
.then((response) => {
// response may be used only once
// we need to save clone to put one copy in cache
// and serve second one
let responseClone = response.clone();
caches.open("v1").then((cache) => {
cache.put(event.request, responseClone);
});
return response;
})
.catch(() => caches.match("/gallery/myLittleVader.jpg"));
}
}),
);
});
Dieses Snippet zeigt, wie die API außerhalb eines Service Worker-Kontextes verwendet werden kann und verwendet den await
-Operator, um den Code wesentlich lesbarer zu gestalten.
// Try to get data from the cache, but fall back to fetching it live.
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("Retrieved cached data");
return cachedData;
}
console.log("Fetching fresh data");
const cacheStorage = await caches.open(cacheName);
await cacheStorage.add(url);
cachedData = await getCachedData(cacheName, url);
await deleteOldCaches(cacheName);
return cachedData;
}
// Get data from the cache.
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();
}
// Delete any old caches to respect user's disk space.
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 });
}
Spezifikationen
Specification |
---|
Service Workers # cachestorage-interface |
Browser-Kompatibilität
BCD tables only load in the browser