Workbox-Ablauf

Es ist ziemlich üblich, Einschränkungen für einen Cache in Bezug darauf festzulegen, wie lange Elemente im Cache gespeichert werden dürfen oder wie viele Elemente im Cache aufbewahrt werden sollen. Workbox bietet diese Funktion über das workbox-expiration-Plug-in, mit dem Sie die Anzahl der Einträge in einem Cache begrenzen und / oder Einträge entfernen können, die seit langem im Cache gespeichert sind.

Anzahl der Cache-Einträge begrenzen

Wenn Sie die Anzahl der Einträge in einem Cache begrenzen möchten, können Sie die Option maxEntries so verwenden:

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {ExpirationPlugin} from 'workbox-expiration';

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 20,
      }),
    ],
  })
);

Dadurch wird der Plug-in dieser Route hinzugefügt. Nachdem eine zwischengespeicherte Antwort verwendet oder dem Cache eine neue Anfrage hinzugefügt wurde, prüft das Plug-in den konfigurierten Cache und stellt sicher, dass die Anzahl der zwischengespeicherten Einträge das Limit nicht überschreitet. In diesem Fall werden die ältesten Einträge entfernt.

Alter der im Cache gespeicherten Einträge einschränken

Wenn Sie einschränken möchten, wie lange eine Anfrage im Cache gespeichert wird, können Sie mit der Option maxAgeSeconds ein maximales Alter in Sekunden definieren:

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {ExpirationPlugin} from 'workbox-expiration';

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new ExpirationPlugin({
        maxAgeSeconds: 24 * 60 * 60,
      }),
    ],
  })
);

Das Plug-in prüft und entfernt Einträge nach jeder Anfrage oder Cache-Aktualisierung.

Erweiterte Nutzung

Wenn Sie die Ablauflogik unabhängig von anderen Workbox-Modulen verwenden möchten, können Sie dies mit der Klasse CacheExpiration tun.

Wenn Sie Einschränkungen auf einen Cache anwenden möchten, erstellen Sie eine Instanz von CacheExpiration für den Cache, den Sie steuern möchten, und zwar so:

import {CacheExpiration} from 'workbox-expiration';

const cacheName = 'my-cache';
const expirationManager = new CacheExpiration(cacheName, {
  maxAgeSeconds: 24 * 60 * 60,
  maxEntries: 20,
});

Wenn Sie einen Eintrag im Cache aktualisieren, müssen Sie die Methode updateTimestamp() aufrufen, damit sein Alter aktualisiert wird.

await openCache.put(request, response);

await expirationManager.updateTimestamp(request.url);

Wenn Sie dann eine Reihe von Einträgen ablaufen lassen möchten, können Sie die Methode expireEntries() aufrufen, wodurch die Konfiguration maxAgeSeconds und maxEntries erzwungen wird.

await expirationManager.expireEntries();

Typen

CacheExpiration

Mit der CacheExpiration-Klasse können Sie ein Ablaufdatum und / oder eine Begrenzung für die Anzahl der Antworten festlegen, die in einer Cache gespeichert werden.

Attribute

  • Konstruktor

    void

    Um eine neue Instanz von „CacheExpiration“ zu erstellen, müssen Sie mindestens eine der config-Properties angeben.

    Die constructor-Funktion sieht so aus: 

    (cacheName: string, config?: CacheExpirationConfig) => {...}

    • cacheName

      String

      Name des Caches, auf den Einschränkungen angewendet werden sollen.

    • config

      CacheExpirationConfig optional

  • Löschen

    void

    Entfernt den IndexedDB-Objektspeicher, der zum Überwachen der Cache-Ablaufmetadaten verwendet wird.

    Die delete-Funktion sieht so aus: 

    () => {...}

    • Gibt zurück

      Promise<void>

  • expireEntries

    void

    Laufzeit von Einträgen für den angegebenen Cache und die angegebenen Kriterien ablaufen lässt.

    Die expireEntries-Funktion sieht so aus: 

    () => {...}

    • Gibt zurück

      Promise<void>

  • isURLExpired

    void

    Damit kann vor der Verwendung geprüft werden, ob eine URL abgelaufen ist.

    Dazu ist eine Suche in IndexedDB erforderlich, was zu Verzögerungen führen kann.

    Hinweis: Mit dieser Methode wird der Eintrag im Cache nicht entfernt. Rufen Sie expireEntries() auf, um indexedDB- und Cache-Einträge zu entfernen.

    Die isURLExpired-Funktion sieht so aus: 

    (url: string) => {...}

    • URL

      String

    • Gibt zurück

      Promise<boolean>

  • updateTimestamp

    void

    Aktualisieren Sie den Zeitstempel für die angegebene URL. So wird sichergestellt, dass beim Entfernen von Einträgen auf der Grundlage der maximalen Anzahl von Einträgen der zuletzt verwendete Eintrag korrekt ist oder dass der Zeitstempel beim Ablaufen auf dem neuesten Stand ist.

    Die updateTimestamp-Funktion sieht so aus: 

    (url: string) => {...}

    • URL

      String

    • Gibt zurück

      Promise<void>

ExpirationPlugin

Dieses Plug-in kann in einem workbox-strategy verwendet werden, um regelmäßig ein Limit für das Alter und / oder die Anzahl der im Cache gespeicherten Anfragen durchzusetzen.

Sie kann nur mit workbox-strategy-Instanzen verwendet werden, für die eine benutzerdefinierte cacheName-Eigenschaft festgelegt ist. Mit anderen Worten: Sie können damit keine Einträge in der Strategie ablaufen lassen, die den Standardnamen des Laufzeit-Caches verwendet.

Wenn eine im Cache gespeicherte Antwort verwendet oder aktualisiert wird, prüft dieses Plug-in den zugehörigen Cache und entfernt alle alten oder zusätzlichen Antworten.

Bei Verwendung von maxAgeSeconds können Antworten nach Ablauf einmal verwendet werden, da die Bereinigung nach Ablauf erst nach der Verwendung der im Cache gespeicherten Antwort erfolgt. Wenn die Antwort den Header „Datum“ enthält, wird eine einfache Gültigkeitsprüfung durchgeführt und die Antwort wird nicht sofort verwendet.

Bei Verwendung von maxEntries wird der Eintrag, der am längsten nicht angefordert wurde, zuerst aus dem Cache entfernt.

Attribute

  • Konstruktor

    void

    Die constructor-Funktion sieht so aus: 

    (config?: ExpirationPluginOptions) => {...}

  • deleteCacheAndMetadata

    void

    Dies ist eine Hilfsmethode, die zwei Vorgänge ausführt:

    • Hiermit werden alle zugrunde liegenden Cache-Instanzen gelöscht, die mit dieser Plug-in-Instanz verknüpft sind. Dazu wird in Ihrem Namen caches.delete() aufgerufen.
    • Löscht die Metadaten aus IndexedDB, die zum Überwachen der Ablaufdetails für jede Cache-Instanz verwendet werden.

    Wenn Sie die Cache-Zeitüberschreitung verwenden, ist es besser, diese Methode aufzurufen, als caches.delete() direkt aufzurufen. So werden auch die IndexedDB-Metadaten vollständig entfernt und geöffnete IndexedDB-Instanzen gelöscht.

    Wenn Sie für einen bestimmten Cache kein Cache-Ablaufen verwenden, sollte es ausreichen, caches.delete() aufzurufen und den Namen des Caches anzugeben. In diesem Fall ist keine Workbox-spezifische Methode für die Bereinigung erforderlich.

    Die deleteCacheAndMetadata-Funktion sieht so aus: 

    () => {...}

    • Gibt zurück

      Promise<void>

ExpirationPluginOptions

Attribute

  • matchOptions

    CacheQueryOptions optional

  • maxAgeSeconds

    number optional

  • maxEntries

    number optional

  • purgeOnQuotaError

    boolescher Wert optional