workbox-cacheable-response

Beim Caching von Assets zur Laufzeit gibt es keine allgemeingültige Regel, ob eine bestimmte Antwort „gültig“ ist und gespeichert und wiederverwendet werden kann.

Das workbox-cacheable-response-Modul bietet eine Standardmethode, um anhand des numerischen Statuscodes, des Vorhandenseins eines Headers mit einem bestimmten Wert oder einer Kombination aus beiden zu bestimmen, ob eine Antwort im Cache gespeichert werden soll.

Caching basierend auf Statuscodes

Sie können eine Workbox-Strategie konfigurieren, die in Betracht gezogen werden soll. eine Reihe von Statuscodes, die für das Caching geeignet sind, indem ein CacheableResponsePlugin-Instanz zum Parameter plugins einer Strategie:

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';

registerRoute(
  ({url}) =>
    url.origin === 'https://third-party.example.com' &&
    url.pathname.startsWith('/images/'),
  new CacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  })
);

Mit dieser Konfiguration wird Workbox mitgeteilt, dass bei der Verarbeitung von Antworten für Anfragen an https://third-party.example.com/images/ alle Anfragen mit dem Statuscode 0 oder 200 im Cache gespeichert werden sollen.

Caching basierend auf Headern

Sie können eine Workbox-Strategie konfigurieren, um zu prüfen, ob bestimmte Headerwerte als Kriterien für die Aufnahme in den Cache vorhanden sind. Legen Sie dazu beim Erstellen des Plug-ins das headers-Objekt fest:

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';

registerRoute(
  ({url}) => url.pathname.startsWith('/path/to/api/'),
  new StaleWhileRevalidate({
    cacheName: 'api-cache',
    plugins: [
      new CacheableResponsePlugin({
        headers: {
          'X-Is-Cacheable': 'true',
        },
      }),
    ],
  })
);

Wenn du Antworten für Anfrage-URLs mit /path/to/api/ bearbeitest, sieh dir den Header X-Is-Cacheable an, der der Antwort vom Server hinzugefügt wird. Ob dieser Header vorhanden ist und ob er auf den Wert „true“ gesetzt ist, kann die Antwort im Cache gespeichert werden.

Wenn mehrere Header angegeben sind, muss nur einer der Header mit den zugehörigen Werten übereinstimmen.

Caching basierend auf Headern und Statuscodes

Sie können sowohl die Status- als auch die Headerkonfiguration mischen. Beide Bedingungen muss erfüllt sein, damit eine Antwort als Cache-fähig betrachtet wird. mit anderen Worten: Die Antwort muss einen der konfigurierten Statuscodes enthalten und mindestens einen der angegebenen Header haben.

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';

registerRoute(
  ({url}) => url.pathname.startsWith('/path/to/api/'),
  new StaleWhileRevalidate({
    cacheName: 'api-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [200, 404],
        headers: {
          'X-Is-Cacheable': 'true',
        },
      }),
    ],
  })
);

Welche Standardeinstellungen gibt es?

Wenn Sie eine der integrierten Strategien von Workbox verwenden, ohne eine cacheableResponse.CacheableResponsePlugin explizit zu konfigurieren, werden die folgenden Standardkriterien verwendet, um zu bestimmen, ob eine vom Netzwerk empfangene Antwort im Cache gespeichert werden soll:

  • staleWhileRevalidate und networkFirst: Antworten mit dem Status 0 (d. h. nicht transparente Antworten) oder 200 gelten als im Cache speicherbar.
  • cacheFirst: Antworten mit dem Status 200 gelten als cachefähig.

Standardmäßig werden Antwortheader nicht verwendet, um die Cache-Fähigkeit zu bestimmen.

Warum gibt es unterschiedliche Standardeinstellungen?

Die Standardeinstellungen variieren je nachdem, ob Antworten mit dem Status 0 (d. h. nicht transparente Antworten) im Cache gespeichert werden. Aufgrund der „Blackbox“ Art der undurchsichtigen Antworten, kann der Service Worker nicht erkennen, gültig ist oder ob sie eine Fehlerantwort darstellt, die vom ursprungsübergreifend sein.

Bei Strategien, die Möglichkeiten zur Aktualisierung der im Cache gespeicherten Antwort enthalten, wie staleWährendRevalid und networkFirst, besteht das Risiko, dass ein Caching einer vorübergehende Fehlerantwort wird abgemildert, indem das nächste Mal wenn der Cache aktualisiert wurde, wird eine ordnungsgemäße, erfolgreiche Antwort verwendet.

Bei Strategien, bei denen die erste erhaltene Antwort im Cache gespeichert wird, unbestimmte Zeit wiederverwendet, vorübergehende Fehler im Cache und Wiederverwendung sind schwerwiegender. Zur Sicherheit wird bei cacheFirst standardmäßig keine Antwort gespeichert, es sei denn, sie hat den Statuscode 200.

Erweiterte Nutzung

Wenn Sie die gleiche Caching-Logik außerhalb einer Workbox-Strategie verwenden möchten, kann die CacheableResponse-Klasse direkt verwenden.

import {CacheableResponse} from 'workbox-cacheable-response';

const cacheable = new CacheableResponse({
  statuses: [0, 200],
  headers: {
    'X-Is-Cacheable': 'true',
  },
});

const response = await fetch('/path/to/api');

if (cacheable.isResponseCacheable(response)) {
  const cache = await caches.open('api-cache');
  cache.put(response.url, response);
} else {
  // Do something when the response can't be cached.
}

Typen

CacheableResponse

Mit dieser Klasse können Sie Regeln festlegen, welche Statuscodes und/oder Header vorhanden sein müssen, damit eine Response als im Cache speicherbar betrachtet wird.

Attribute

  • Konstruktor

    void

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

    Wenn sowohl statuses als auch headers angegeben sind, müssen beide Bedingungen erfüllt sein, damit das Response als Cache-fähig gilt.

    Die constructor-Funktion sieht so aus: 

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

  • isResponseCacheable

    voidm

    Prüft anhand der Konfiguration dieses Objekts, ob eine Antwort im Cache gespeichert werden kann oder nicht.

    Die Funktion isResponseCacheable sieht so aus: 

    (response: Response) => {...}

    • Antwort

      Antwort

      Die Antwort, deren Cache-Fähigkeit aktiviert.

    • Gibt zurück

      boolean

      true, wenn Response im Cache gespeichert werden kann, und false sonst.

CacheableResponseOptions

Attribute

  • headers

    Objekt optional

  • statuses

    number[] optional

CacheableResponsePlugin

Eine Klasse, die den cacheWillUpdate-Lebenszyklusereignis-Callback implementiert. So können Sie einfachere Überprüfung der Cache-Fähigkeit bei Anfragen über die integrierte Workbox- zu entwickeln.

Attribute

  • Konstruktor

    void

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

    Wenn sowohl statuses als auch headers angegeben sind, müssen beide Bedingungen erfüllt sein, damit das Response als Cache-fähig gilt.

    Die constructor-Funktion sieht so aus: 

    (config: CacheableResponseOptions) => {...}