CacheStorage

Baseline Weitgehend verfgbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Gerten und in vielen Browserversionen. Sie ist seit April 2018 browserbergreifend verfgbar.

Mehr erfahren
Vollstndige Kompatibilitt anzeigen

Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen untersttzenden Browsern verfgbar.

Hinweis: Diese Funktion ist in Web Workers verfgbar.

Das CacheStorage-Interface reprsentiert den Speicher fr Cache-Objekte.

Das Interface:

Bietet ein Hauptverzeichnis aller benannten Caches, die von einem ServiceWorker oder einem anderen Typ von Worker oder window-Scope zugegriffen werden knnen (Sie sind nicht darauf beschrnkt, es nur mit Servicearbeitern zu verwenden).
Pflegt eine Zuordnung von Zeichenfolgen-Namen zu entsprechenden Cache-Objekten.

Verwenden Sie CacheStorage.open(), um eine Cache-Instanz zu erhalten.

Verwenden Sie CacheStorage.match(), um zu berprfen, ob eine gegebene Request ein Schlssel in einem der Cache-Objekte ist, die das CacheStorage-Objekt verfolgt.

Sie knnen auf CacheStorage ber die Window.caches-Eigenschaft in Fenstern oder ber die WorkerGlobalScope.caches-Eigenschaft in Arbeitern zugreifen.

Hinweis:>CacheStorage lehnt immer mit einem SecurityError bei nicht vertrauenswrdigen Quellen ab (d.h. solchen, die kein HTTPS verwenden, obwohl diese Definition in Zukunft wahrscheinlich komplexer wird). Beim Testen auf Firefox knnen Sie dies umgehen, indem Sie die Option Enable Service Workers over HTTP (when toolbox is open) im Firefox DevTools-Options-/Zahnradmen aktivieren. Auerdem kann CacheStorage, da es Dateisystemzugriff erfordert, im privaten Modus in Firefox mglicherweise nicht verfgbar sein.

Hinweis:>CacheStorage.match() ist eine Komfortmethode. Eine gleichwertige Funktionalitt zum Abgleichen eines Cache-Eintrags kann implementiert werden, indem ein Array von Cachenamen aus CacheStorage.keys() zurckgegeben wird, jeder Cache mit CacheStorage.open() geffnet wird und der gewnschte mit Cache.match() abgeglichen wird.

Instanzmethoden

CacheStorage.match(): berprft, ob eine gegebene Request ein Schlssel in einem der Cache-Objekte ist, die das CacheStorage-Objekt verfolgt, und gibt ein Promise zurck, das sich zu diesem Treffer auflst.
CacheStorage.has(): Gibt ein Promise zurck, das sich zu true auflst, wenn ein Cache-Objekt, das dem cacheName entspricht, existiert.
CacheStorage.open(): Gibt ein Promise zurck, das sich zu dem Cache-Objekt auflst, das dem cacheName entspricht (ein neuer Cache wird erstellt, wenn er noch nicht existiert).
CacheStorage.delete(): Findet das Cache-Objekt, das dem cacheName entspricht, und lscht es, falls gefunden, und gibt ein Promise zurck, das sich zu true auflst. Wenn kein Cache-Objekt gefunden wird, lst es sich zu false auf.
CacheStorage.keys(): Gibt ein Promise zurck, das sich mit einem Array auflst, das Zeichenfolgen enthlt, die allen benannten Cache-Objekten entsprechen, die vom CacheStorage verfolgt werden. Verwenden Sie diese Methode, um ber eine Liste aller Cache-Objekte zu iterieren.

Beispiele

Dieses Codebeispiel stammt aus dem MDN einfachen Service Worker-Beispiel (siehe einfacher Service Worker im Livebetrieb.) Dieses Service Worker-Skript wartet auf ein install-Ereignis und fhrt dann waitUntil aus, um den Installationsprozess fr die App zu handhaben. Dies besteht darin, CacheStorage.open aufzurufen, um einen neuen Cache zu erstellen, und dann Cache.addAll zu verwenden, um eine Reihe von Assets hinzuzufgen.

Im zweiten Codeblock warten wir, bis ein FetchEvent ausgelst wird. Wir konstruieren eine benutzerdefinierte Antwort wie folgt:

berprfen, ob ein Treffer fr die Anfrage im CacheStorage gefunden wird. Falls ja, wird dieser verwendet.
Falls nicht, wird die Anfrage aus dem Netzwerk geholt, dann wird auch der im ersten Block erstellte Cache geffnet und ein Klon der Anfrage mit Cache.put hinzugefgt (cache.put(event.request, response.clone())).
Wenn dies fehlschlgt (z.B. weil das Netzwerk ausgefallen ist), wird eine Fallback-Antwort zurckgegeben.

Abschlieend wird die benutzerdefinierte Antwort, was auch immer sie letztendlich entspricht, unter Verwendung von FetchEvent.respondWith zurckgegeben.

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;
      }
      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 auerhalb eines Service Worker-Kontextes verwendet werden kann und verwendet den await-Operator fr wesentlich lesbareren Code.

// 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

Spezifikation
Service Workers Nightly # cachestorage-interface

Browser-Kompatibilitt

Siehe auch

Help improve MDN

War diese bersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen knnen Diese Seite wurde automatisch aus dem Englischen bersetzt.

bersetzung auf GitHub anzeigen Fehler mit dieser bersetzung melden

Service Worker API
CacheStorage
Instanzmethoden
Verwandte Seiten fr Service Workers API
Anleitungen
1. Verwendung von Service Workern