workbox-cachebaar-antwoord

Bij het cachen van assets tijdens runtime bestaat er geen one-size-fits-all-regel die bepaalt of een bepaald antwoord 'geldig' is en in aanmerking komt voor opslag en hergebruik.

De workbox-cacheable-response module biedt een standaardmanier om te bepalen of een antwoord in de cache moet worden opgeslagen op basis van de numerieke statuscode , de aanwezigheid van een header met een specifieke waarde, of een combinatie van beide.

Caching op basis van statuscodes

U kunt een Workbox-strategie configureren om een ​​reeks statuscodes te beschouwen als geschikt voor caching door een CacheableResponsePlugin instantie toe te voegen aan de plugins parameter van een 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],
      }),
    ],
  })
);

Deze configuratie vertelt Workbox dat bij het verwerken van antwoorden op verzoeken tegen https://third-party.example.com/images/ alle verzoeken met een statuscode van 0 of 200 in de cache worden opgeslagen.

Caching op basis van headers

U kunt een Workbox-strategie configureren om te controleren op de aanwezigheid van specifieke headerwaarden als criteria om aan de cache te worden toegevoegd door het headers object in te stellen bij het bouwen van de plug-in:

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

Bij het verwerken van reacties voor aanvraag-URL's die /path/to/api/ bevatten, kijk eens naar de header met de naam X-Is-Cacheable (die door de server aan het antwoord zou worden toegevoegd). Als die header aanwezig is en is ingesteld op de waarde 'true', kan het antwoord in de cache worden opgeslagen.

Als er meerdere headers zijn opgegeven, hoeft slechts één van de headers overeen te komen met de bijbehorende waarden.

Caching op basis van headers en statuscodes

U kunt zowel status- als headerconfiguratie combineren. Aan beide voorwaarden moet worden voldaan om een ​​antwoord als cachebaar te kunnen beschouwen; met andere woorden: het antwoord moet een van de geconfigureerde statuscodes hebben en ten minste een van de opgegeven headers.

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

Wat zijn de standaardinstellingen?

Als u een van de ingebouwde strategieën van Workbox gebruikt zonder expliciet een cacheableResponse.CacheableResponsePlugin te configureren, worden de volgende standaardcriteria gebruikt om te bepalen of een antwoord dat van het netwerk wordt ontvangen, in de cache moet worden opgeslagen:

  • staleWhileRevalidate en networkFirst: antwoorden met de status 0 (dwz ondoorzichtige reacties ) of 200 worden als cachebaar beschouwd.
  • cacheFirst: antwoorden met de status 200 worden als cachebaar beschouwd.

Standaard worden antwoordheaders niet gebruikt om de cachebaarheid te bepalen.

Waarom zijn er verschillende standaardwaarden?

De standaardinstellingen variëren afhankelijk van de vraag of antwoorden met de status 0 (dat wil zeggen ondoorzichtige antwoorden ) in de cache terechtkomen. Vanwege het 'black box'-karakter van ondoorzichtige reacties is het voor de servicemedewerker niet mogelijk om te weten of het antwoord geldig is, of dat het een foutreactie weerspiegelt die is geretourneerd door de cross-origin-server.

Voor strategieën die een manier omvatten om het in de cache opgeslagen antwoord bij te werken, zoals staleWhileRevalidate en networkFirst, wordt het risico van het in de cache opslaan van een tijdelijke foutreactie beperkt door het feit dat de volgende keer dat de cache wordt bijgewerkt, hopelijk een correct, succesvol antwoord zal worden gebruikt.

Voor strategieën waarbij het eerste ontvangen antwoord in de cache wordt opgeslagen en het in de cache opgeslagen antwoord voor onbepaalde tijd wordt hergebruikt, zijn de gevolgen van een tijdelijke fout die in de cache wordt opgeslagen en opnieuw wordt gebruikt ernstiger. Om het zekere voor het onzekere te nemen, zal cacheFirst standaard weigeren een antwoord op te slaan, tenzij het de statuscode 200 heeft.

Geavanceerd gebruik

Als u dezelfde cachinglogica buiten een Workbox-strategie wilt gebruiken, kunt u de klasse CacheableResponse rechtstreeks gebruiken.

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.
}

Soorten

CacheableResponse

Met deze klasse kunt u regels instellen die bepalen welke statuscodes en/of headers aanwezig moeten zijn om een Response als cachebaar te beschouwen.

Eigenschappen

  • bouwer

    leegte

    Om een ​​nieuwe CacheableResponse-instantie te construeren, moet u ten minste één van de config eigenschappen opgeven.

    Als zowel statuses als headers zijn opgegeven, moet aan beide voorwaarden worden voldaan voordat het Response als cachebaar wordt beschouwd.

    De constructor ziet er als volgt uit: 

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

  • isResponseCachebaar

    leegte

    Controleert een antwoord om te zien of het cachebaar is of niet, op basis van de configuratie van dit object.

    De isResponseCacheable -functie ziet er als volgt uit: 

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

    • antwoord

      Antwoord

      Het antwoord waarvan de cachebaarheid wordt gecontroleerd.

    • retourneert

      Booleaans

      true als het Response cachebaar is, en false anders.

CacheableResponseOptions

Eigenschappen

  • kopteksten

    object optioneel

  • statussen

    nummer[] optioneel

CacheableResponsePlugin

Een klasse die de callback van de cacheWillUpdate levenscyclus implementeert. Dit maakt het eenvoudiger om cacheability-controles toe te voegen aan verzoeken die zijn gedaan via de ingebouwde strategieën van Workbox.

Eigenschappen

  • bouwer

    leegte

    Om een ​​nieuwe CacheableResponsePlugin-instantie te construeren, moet u ten minste één van de config eigenschappen opgeven.

    Als zowel statuses als headers zijn opgegeven, moet aan beide voorwaarden worden voldaan voordat het Response als cachebaar wordt beschouwd.

    De constructor ziet er als volgt uit: 

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