lavoro-casella-risposta-cache

Quando gli asset vengono memorizzati nella cache in fase di runtime, non esiste una regola universale per stabilire se un la risposta specificata è "valido" possono essere salvati e riutilizzati.

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

Memorizzazione nella cache in base ai codici di stato

Puoi configurare una strategia Casella di lavoro da prendere in considerazione un insieme di codici di stato idonei per la memorizzazione nella cache mediante l'aggiunta di CacheableResponsePlugin al parametro plugins di una 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 richieste relative a https://third-party.example.com/images/, memorizza nella cache tutte le richieste con il codice di stato 0 o 200.

Memorizzazione nella cache in base alle intestazioni

Puoi configurare una strategia Casella di lavoro per controllare per 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',
        },
      }),
    ],
  })
);

Durante l'elaborazione delle risposte per gli URL delle richieste contenenti /path/to/api/, guarda l'intestazione X-Is-Cacheable (che verrebbe aggiunta alla risposta del 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 di queste deve corrispondano ai valori associati.

Memorizzazione nella cache in base a intestazioni e codici di stato

Puoi combinare la configurazione dello stato e dell'intestazione. Entrambe le condizioni devono essere soddisfatte affinché una risposta sia considerata memorizzabile nella cache. In altre parole, la risposta deve avere uno dei codici di stato configurati e 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 includere configurando un cacheableResponse.CacheableResponsePlugin, i seguenti criteri predefiniti sono utilizzata per determinare se una risposta ricevuta dalla rete deve da memorizzare nella cache:

  • staleWhileRevalidate e networkFirst: le risposte con stato 0 (ovvero risposte opache) o 200 sono considerate memorizzabili nella cache.
  • cacheFirst: le risposte con stato 200 sono considerate memorizzabili nella cache.

Per impostazione predefinita, le intestazioni delle risposte non vengono utilizzate per determinare la possibilità di memorizzare nella cache.

Perché esistono valori predefiniti diversi?

I valori predefiniti variano in base al fatto che le risposte con uno stato 0 (ovvero le risposte opache) verranno memorizzate nella cache. A causa della "scatola nera" la natura di risposte opache, il Service worker non può sapere se la risposta sia valida o se riflette una risposta di errore restituita dal multiorigine.

Per le strategie che includono metodi per aggiornare la risposta memorizzata nella cache, come staleMentreRevalidate e networkFirst, il rischio di memorizzare nella cache una risposta agli errori transitori è mitigata dal fatto che la prossima volta se la cache è aggiornata, dovrebbe essere utilizzata una risposta corretta.

Per le strategie che prevedono la memorizzazione nella cache della prima risposta ricevuta riutilizzando indefinitamente quella risposta memorizzata nella cache, le ripercussioni di un gli errori temporanei al recupero nella cache e al riutilizzo sono più gravi. Per sbagliare lato sicuro per impostazione predefinita, cacheFirst rifiuterà di salvare una risposta a meno che ha un codice di stato 200.

Utilizzo avanzato

Se vuoi utilizzare la stessa logica di memorizzazione nella cache al di fuori di una strategia Workbox, puoi utilizzare 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 regole che determinano quali Response codici di stato e/o intestazioni devono essere presenti affinché un Response siano considerati memorizzabili nella cache.

Proprietà

  • costruttore

    null

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

    Se sono specificati sia statuses che headers, è necessario che entrambe le condizioni siano soddisfatte affinché Response sia considerato memorizzabile nella cache.

    La funzione constructor ha il seguente aspetto: 

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

  • isResponseCacheable

    null

    Controlla una risposta per verificare se può essere memorizzata o meno nella cache, in base a questa informazione configurazione dell'oggetto.

    La funzione isResponseCacheable ha questo aspetto: 

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

    • risposta

      Risposta

      La risposta la cui memorizzabilità nella cache selezionata.

    • returns

      booleano

      true se Response è memorizzabile nella cache e false altrimenti.

CacheableResponseOptions

Proprietà

  • intestazioni

    Oggetto facoltativo

  • stati

    numero[] facoltativo

CacheableResponsePlugin

Un corso che implementa il callback del ciclo di vita cacheWillUpdate. Ciò rende aggiungere più facilmente i controlli di memorizzabilità alla cache alle richieste effettuate tramite strategie.

Proprietà

  • costruttore

    null

    Per creare una nuova istanza CacheableResponse Plugin, devi specificare un almeno una delle config proprietà.

    Se sono specificati sia statuses che headers, è necessario che entrambe le condizioni siano soddisfatte affinché Response sia considerato memorizzabile nella cache.

    La funzione constructor ha il seguente aspetto: 

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