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) o200
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
cheheaders
, è necessario che entrambe le condizioni siano soddisfatte affinchéResponse
sia considerato memorizzabile nella cache.La funzione
constructor
ha il seguente aspetto:(config?: CacheableResponseOptions) => {...}
-
config
CacheableResponseOptions facoltativo
-
returns
-
-
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
seResponse
è memorizzabile nella cache efalse
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
cheheaders
, è necessario che entrambe le condizioni siano soddisfatte affinchéResponse
sia considerato memorizzabile nella cache.La funzione
constructor
ha il seguente aspetto:(config: CacheableResponseOptions) => {...}
-
config
-
returns
-