Workbox-Ablauf

Es ist durchaus üblich, einen Cache mit Einschränkungen in Bezug darauf zu versehen, wie lange Elemente in einem Cache gespeichert werden können oder wie viele Elemente in einem Cache aufbewahrt werden sollen. Workbox bietet diese Funktion über das Plug-in workbox-expiration, mit dem Sie die Anzahl der Einträge in einem Cache begrenzen und / oder Einträge entfernen können, die über einen längeren Zeitraum im Cache gespeichert wurden.

Anzahl der Cache-Einträge beschränken

Um die Anzahl der in einem Cache gespeicherten Einträge zu beschränken, 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,
      }),
    ],
  })
);

Damit wird das Plug-in dieser Route hinzugefügt. Nachdem eine im Cache gespeicherte Antwort verwendet oder dem Cache eine neue Anfrage hinzugefügt wurde, prüft das Plug-in den konfigurierten Cache und sorgt dafür, dass die Anzahl der im Cache gespeicherten Einträge das Limit nicht überschreitet. Ist dies der Fall, werden die ältesten Einträge entfernt.

Alter von im Cache gespeicherten Einträgen beschränken

Wenn Sie einschränken möchten, wie lange eine Anfrage im Cache gespeichert wird, können Sie mit der Option maxAgeSeconds ein Höchstalter 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 überprüft und entfernt Einträge nach jeder Anfrage oder Cache-Aktualisierung.

Erweiterte Nutzung

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

Um Einschränkungen auf einen Cache anzuwenden, erstellen Sie eine Instanz von CacheExpiration für den Cache, den Sie steuern möchten, so:

import {CacheExpiration} from 'workbox-expiration';

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

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

await openCache.put(request, response);

await expirationManager.updateTimestamp(request.url);

Wenn Sie dann eine Reihe von Einträgen löschen möchten, können Sie die Methode expireEntries() aufrufen, die die Konfiguration maxAgeSeconds und maxEntries erzwingt.

await expirationManager.expireEntries();

Typen

CacheExpiration

Mit der Klasse CacheExpiration können Sie ein Ablaufdatum und / oder ein Limit für die Anzahl der in einem Cache gespeicherten Antworten definieren.

Attribute

  • Konstruktor

    void

    Zum Erstellen einer neuen CacheExpiration-Instanz müssen Sie mindestens eines der config-Attribute angeben.

    Die Funktion constructor sieht so aus: 

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

    • cacheName

      String

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

    • config

      CacheExpirationConfig optional

  • delete

    void

    Entfernt den IndexedDB-Objektspeicher, der zum Verfolgen von Cache-Ablaufmetadaten verwendet wird.

    Die Funktion delete sieht so aus: 

    () => {...}

    • Gibt zurück

      Promise<void>

  • expireEntries

    void

    Läuft Einträge für den angegebenen Cache und die angegebenen Kriterien ab.

    Die Funktion expireEntries sieht so aus: 

    () => {...}

    • Gibt zurück

      Promise<void>

  • isURLExpired

    void

    Kann verwendet werden, um zu überprüfen, ob eine URL abgelaufen ist oder nicht, bevor sie verwendet wird.

    Dies erfordert einen Abruf aus der IndexedDB und kann daher langsam sein.

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

    Die Funktion isURLExpired sieht so aus: 

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

    • url

      String

    • Gibt zurück

      Promise<boolean>

  • updateTimestamp

    void

    Aktualisiere den Zeitstempel für die angegebene URL. Dadurch wird sichergestellt, dass beim Entfernen von Einträgen auf Basis der maximalen Anzahl von Einträgen, beim Entfernen der zuletzt verwendeten Einträge korrekt ist oder beim Ablauf der Zeitstempel der Zeitstempel aktuell ist.

    Die Funktion updateTimestamp 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 zu erzwingen.

Es kann nur mit workbox-strategy-Instanzen verwendet werden, für die ein benutzerdefiniertes cacheName-Attribut festgelegt ist. Mit anderen Worten: Er kann nicht zum Ablauf von Einträgen in einer Strategie verwendet werden, die den Standard-Laufzeit-Cache-Namen verwendet.

Wenn eine im Cache gespeicherte Antwort verwendet oder aktualisiert wird, prüft das 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 Ablaufbereinigung erst nach der Verwendung der im Cache gespeicherten Antwort erfolgt. Wenn die Antwort einen „Date“-Header hat, wird eine einfache Ablaufprüfung durchgeführt und die Antwort nicht sofort verwendet.

Bei Verwendung von maxEntries wird der zuletzt angeforderte Eintrag zuerst aus dem Cache entfernt.

Attribute

  • Konstruktor

    void

    Die Funktion constructor sieht so aus: 

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

  • deleteCacheAndMetadata

    void

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

    • Löscht alle zugrunde liegenden Cache-Instanzen, die mit dieser Plug-in-Instanz verknüpft sind, indem „caches.delete()“ in Ihrem Namen aufgerufen wird.
    • Löscht die Metadaten aus IndexedDB, mit denen Ablaufdetails für jede Cache-Instanz verfolgt werden.

    Bei Verwendung des Cache-Ablaufs ist das Aufrufen dieser Methode gegenüber dem direkten Aufruf von caches.delete() vorzuziehen, da dadurch sichergestellt wird, dass die IndexedDB-Metadaten sauber entfernt und offene IndexedDB-Instanzen gelöscht werden.

    Wenn Sie den Cache-Ablauf nicht für einen bestimmten Cache verwenden, sollten Sie caches.delete() aufrufen und den Namen des Cache übergeben. In diesem Fall ist keine Workbox-spezifische Methode zur Bereinigung erforderlich.

    Die Funktion deleteCacheAndMetadata sieht so aus: 

    () => {...}

    • Gibt zurück

      Promise<void>

ExpirationPluginOptions

Attribute

  • matchOptions

    CacheQueryOptions optional

  • maxAgeSeconds

    Nummer optional

  • maxEntries

    Nummer optional

  • purgeOnQuotaError

    Boolescher Wert optional