workbox-cacheable-response

Beim Caching von Assets zur Laufzeit gibt es keine einheitliche Regel dafür, ob eine bestimmte Antwort "gültig" ist und gespeichert und wiederverwendet werden kann.

Das Modul workbox-cacheable-response bietet eine Standardmethode zum Ermitteln, ob eine Antwort im Cache gespeichert wird, basierend auf ihrem numerischen Statuscode, dem Vorhandensein eines Headers mit einem bestimmten Wert oder einer Kombination aus beidem.

Caching basierend auf Statuscodes

Sie können eine Workbox-Strategie konfigurieren, um eine Reihe von Statuscodes als für das Caching geeignet zu betrachten. Fügen Sie dazu dem Parameter plugins einer Strategie eine CacheableResponsePlugin-Instanz hinzu:

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],
      }),
    ],
  })
);

Diese Konfiguration weist Workbox an, bei der Verarbeitung von Antworten auf Anfragen an https://third-party.example.com/images/ alle Anfragen mit dem Statuscode 0 oder 200 im Cache zu speichern.

Basierend auf Headern zwischenspeichern

Sie können eine Workbox-Strategie konfigurieren, um das Vorhandensein bestimmter Header-Werte als Kriterien für das Hinzufügen zum Cache zu prüfen. 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',
        },
      }),
    ],
  })
);

Sehen Sie sich bei der Verarbeitung von Antworten für Anfrage-URLs mit /path/to/api/ den Header X-Is-Cacheable an. Dieser wird der Antwort vom Server hinzugefügt. Wenn dieser Header vorhanden ist und 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 miteinander kombinieren. Beide Bedingungen müssen erfüllt sein, damit eine Antwort als im Cache speicherbar gilt. Mit anderen Worten, die Antwort muss einen der konfigurierten Statuscodes und mindestens einen der bereitgestellten 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',
        },
      }),
    ],
  })
);

Was sind die Standardeinstellungen?

Wenn Sie eine der integrierten Strategien von Workbox verwenden, ohne explizit ein cacheableResponse.CacheableResponsePlugin zu konfigurieren, wird anhand der folgenden Standardkriterien bestimmt, ob eine vom Netzwerk empfangene Antwort im Cache gespeichert werden soll:

• staleBeforeRevalidator und networkFirst: Antworten mit dem Status 0 (d.h. opake Antworten) oder 200 werden als im Cache speicherbar betrachtet.
• CacheFirst: Antworten mit dem Status 200 gelten als im Cache speicherbar.

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

Warum gibt es verschiedene Standardeinstellungen?

Die Standardwerte variieren je nachdem, ob Antworten mit dem Status 0 (d.h. opake Antworten) im Cache gespeichert werden. Aufgrund der „Blackbox“-Natur von intransparenten Antworten kann der Service Worker nicht feststellen, ob die Antwort gültig ist oder ob sie eine Fehlerantwort vom ursprungsübergreifenden Server ist.

Bei Strategien, die eine Aktualisierung der im Cache gespeicherten Antwort beinhalten, wie stalewhileRevalid und networkFirst, wird das Risiko, eine vorübergehende Fehlerantwort im Cache zu speichern, dadurch gemindert, dass bei der nächsten Aktualisierung des Caches hoffentlich eine korrekte, erfolgreiche Antwort verwendet wird.

Bei Strategien, bei denen die erste empfangene Antwort im Cache gespeichert und diese Antwort unbegrenzt wiederverwendet wird, sind die Folgen eines vorübergehenden Fehlers, der im Cache gespeichert und wiederverwendet wird, schwerwiegender. Um auf Nummer sicher zu gehen, verweigert CacheFirst das Speichern einer Antwort, es sei denn, sie hat den Statuscode 200.

Erweiterte Nutzung

Wenn Sie dieselbe Caching-Logik außerhalb einer Workbox-Strategie verwenden möchten, können Sie die Klasse CacheableResponse 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.
}