lavoro-casella-risposta-cache

Quando memorizza nella cache gli asset in fase di runtime, non esiste una regola unica per stabilire se una determinata risposta è "valida" e idonea per essere salvata e riutilizzata.

Il modulo workbox-cacheable-response fornisce un metodo standard per determinare se una risposta deve essere memorizzata nella cache in base al suo codice di stato numerico, alla presenza di un'intestazione con un valore specifico o a una combinazione dei due valori.

Memorizzazione nella cache basata sui codici di stato

Puoi configurare una strategia di Workbox per considerare un insieme di codici di stato idonei per la memorizzazione nella cache aggiungendo un'istanza CacheableResponsePlugin al parametro plugins della strategia:

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

Questa configurazione indica a Workbox che, durante l'elaborazione delle risposte per le richieste relative a https://third-party.example.com/images/, memorizza nella cache tutte le richieste con un codice di stato 0 o 200.

Memorizzazione nella cache basata sulle intestazioni

Puoi configurare una strategia di Workbox per verificare la presenza di valori di intestazione specifici come criteri per l'aggiunta alla cache impostando l'oggetto headers durante la creazione del 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',
        },
      }),
    ],
  })
);

Quando elabori le risposte per gli URL delle richieste contenenti /path/to/api/, dai un'occhiata all'intestazione denominata X-Is-Cacheable (che verrà aggiunta alla risposta dal server). Se l'intestazione è presente e se è impostata su un valore "true", la risposta può essere memorizzata nella cache.

Se vengono specificate più intestazioni, solo una delle intestazioni deve corrispondere ai valori associati.

Memorizzazione nella cache basata su intestazioni e codici di stato

Puoi combinare la configurazione di stato e intestazione. Affinché una risposta sia considerata memorizzabile nella cache, devono essere soddisfatte entrambe le condizioni; in altre parole, la risposta deve avere uno dei codici di stato configurati e deve avere almeno una delle intestazioni fornite.

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

Quali sono le impostazioni predefinite?

Se utilizzi una delle strategie integrate di Workbox senza configurare esplicitamente un cacheableResponse.CacheableResponsePlugin, vengono usati i seguenti criteri predefiniti per determinare se una risposta ricevuta dalla rete deve essere memorizzata nella cache:

  • staleWhenRevalidate e networkFirst: le risposte con uno stato 0 (ad esempio risposte opache) o 200 sono considerate memorizzabili nella cache.
  • cacheFirst: le risposte con uno stato 200 sono considerate memorizzabili nella cache.

Per impostazione predefinita, le intestazioni delle risposte non vengono utilizzate per determinare la memorizzazione nella cache.

Perché esistono valori predefiniti diversi?

I valori predefiniti variano a seconda che le risposte con stato 0 (ad esempio risposte opache) vengano memorizzate nella cache. A causa della natura "black box" delle risposte opache, il service worker non può sapere se la risposta è valida o se riflette una risposta di errore restituita dal server multiorigine.

Per le strategie che includono alcuni mezzi di aggiornamento della risposta memorizzata nella cache, come staleWhenRevalidate e networkFirst, il rischio di memorizzazione nella cache di una risposta di errore temporanea è ridotto dal fatto che al successivo aggiornamento della cache verrà utilizzata una risposta adeguata e riuscita.

Per le strategie che prevedono la memorizzazione nella cache della prima risposta ricevuta e il riutilizzo continuo della risposta memorizzata nella cache, le ripercussioni di un errore temporaneo che viene memorizzato nella cache e riutilizzato sono più gravi. Per andare in sicurezza per impostazione predefinita, cacheFirst rifiuterà di salvare una risposta, a meno che non abbia un codice di stato 200.

Utilizzo avanzato

Se vuoi utilizzare la stessa logica di memorizzazione nella cache al di fuori di una strategia di Workbox, puoi usare direttamente la classe CacheableResponse.

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

Tipi

CacheableResponse

Questa classe consente di configurare le regole che determinano quali codici di stato e/o intestazioni devono essere presenti per far sì che una Response sia considerata memorizzabile nella cache.

Proprietà

  • costruttore

    void

    Per creare una nuova istanza CacheableResponse devi fornire almeno una delle proprietà config.

    Se statuses e headers sono specificati, entrambe le condizioni devono essere soddisfatte affinché Response possa essere considerato memorizzabile nella cache.

    La funzione constructor ha il seguente aspetto: 

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

  • isResponseCacheable

    void

    Controlla una risposta per capire se può essere memorizzata nella cache o meno in base alla configurazione dell'oggetto.

    La funzione isResponseCacheable ha il seguente aspetto: 

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

    • risposta

      Risposta

      La risposta di cui viene verificata la memorizzazione nella cache.

    • returns

      boolean

      true se Response può essere memorizzato nella cache e false in caso contrario.

CacheableResponseOptions

Proprietà

  • headers

    oggetto facoltativo

  • stati

    number[] facoltativo

CacheableResponsePlugin

Una classe che implementa il callback cacheWillUpdate del ciclo di vita. In questo modo, è più facile aggiungere controlli di memorizzazione nella cache alle richieste effettuate tramite le strategie integrate di Workbox.

Proprietà

  • costruttore

    void

    Per creare una nuova istanza CacheableResponsePlugin, devi fornire almeno una delle proprietà config.

    Se statuses e headers sono specificati, entrambe le condizioni devono essere soddisfatte affinché Response possa essere considerato memorizzabile nella cache.

    La funzione constructor ha il seguente aspetto: 

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