All'introduzione dei Service worker, è emerse una serie di strategie di memorizzazione nella cache comuni. Una strategia di memorizzazione nella cache è un pattern che determina il modo in cui un service worker genera una risposta dopo aver ricevuto un evento di recupero.
workbox-strategies
fornisce le strategie di memorizzazione nella cache più comuni, così è facile
applicarle nel tuo service worker.
Non esamineremo in dettaglio al di fuori delle strategie supportate da Workbox, ma puoi scoprire di più nel Libro di ricette offline.
Utilizzo delle strategie
Nei seguenti esempi, ti mostreremo come utilizzare le strategie di memorizzazione nella cache di Workbox con workbox-routing
. Le opzioni che puoi definire con ogni strategia sono illustrate nella sezione sulla configurazione delle strategie di questo documento.
Nella sezione Utilizzo avanzato, vedremo come utilizzare
le strategie di memorizzazione nella cache direttamente senza workbox-routing
.
Inattiva durante la riconvalida
Il pattern stale-while-revalidate ti consente di rispondere alla richiesta il più rapidamente possibile con una risposta memorizzata nella cache, se disponibile, facendo affidamento sulla richiesta di rete se non è memorizzata nella cache. La richiesta di rete viene quindi utilizzata per aggiornare la cache. A differenza di alcune implementazioni della riconvalida in caso di inattività, questa strategia effettua sempre una richiesta di riconvalida, indipendentemente dall'età della risposta memorizzata nella cache.
Si tratta di una strategia abbastanza comune in cui avere le risorse più aggiornate non è vitale per l'applicazione.
import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
registerRoute(
({url}) => url.pathname.startsWith('/images/avatars/'),
new StaleWhileRevalidate()
);
Prima cache (riduzione della cache alla rete)
Le app web offline fanno molto affidamento sulla cache, ma per gli asset non critici e che possono essere memorizzati gradualmente nella cache, l'operazione con la cache è l'opzione migliore.
Se nella cache è presente una risposta, la richiesta verrà soddisfatta utilizzando la risposta memorizzata nella cache e la rete non verrà utilizzata. Se non è presente una risposta memorizzata nella cache, la richiesta verrà soddisfatta da una richiesta di rete e la risposta verrà memorizzata nella cache, in modo che la richiesta successiva venga fornita direttamente dalla cache.
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
registerRoute(({request}) => request.destination === 'style', new CacheFirst());
Prima rete (rete tornata nella cache)
Per le richieste con aggiornamento frequente, la strategia network first è la soluzione ideale. Per impostazione predefinita, prova a recuperare l'ultima risposta dalla rete. Se la richiesta ha esito positivo, la risposta verrà inserita nella cache. Se la rete non riesce a restituire una risposta, verrà utilizzata la risposta memorizzata nella cache.
import {registerRoute} from 'workbox-routing';
import {NetworkFirst} from 'workbox-strategies';
registerRoute(
({url}) => url.pathname.startsWith('/social-timeline/'),
new NetworkFirst()
);
Solo rete
Se hai bisogno di soddisfare richieste specifiche dalla rete, la strategia da utilizzare è solo rete.
import {registerRoute} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';
registerRoute(({url}) => url.pathname.startsWith('/admin/'), new NetworkOnly());
Solo cache
La strategia cache only assicura che le risposte vengano ottenute da una cache. Questa operazione è meno comune nel workbox, ma può essere utile se hai un passaggio di pre-memorizzazione nella cache personale.
import {registerRoute} from 'workbox-routing';
import {CacheOnly} from 'workbox-strategies';
registerRoute(({url}) => url.pathname.startsWith('/app/v2/'), new CacheOnly());
Configurazione delle strategie
Tutte le strategie ti consentono di configurare:
- Il nome della cache da utilizzare nella strategia.
- Limitazioni di scadenza della cache da utilizzare nella strategia.
- Un array di plug-in che verranno chiamati i metodi del loro ciclo di vita durante il recupero e la memorizzazione nella cache di una richiesta.
Modificare la cache utilizzata da una strategia
Puoi modificare la strategia di cache utilizzata assegnando un nome per la cache. È utile se vuoi separare gli asset per facilitare il debug.
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
registerRoute(
({request}) => request.destination === 'image',
new CacheFirst({
cacheName: 'image-cache',
})
);
Utilizzo di plug-in
Workbox include un insieme di plug-in che possono essere utilizzati con queste strategie.
- workbox-background-sync
- workbox-broadcast-update
- workbox-cacheable-response
- scadenza casella di lavoro
- richieste-intervallo-workbox
Per utilizzare uno di questi plug-in (o un plug-in personalizzato), devi solo passare le istanze all'opzione plugins
.
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {ExpirationPlugin} from 'workbox-expiration';
registerRoute(
({request}) => request.destination === 'image',
new CacheFirst({
cacheName: 'image-cache',
plugins: [
new ExpirationPlugin({
// Only cache requests for a week
maxAgeSeconds: 7 * 24 * 60 * 60,
// Only cache 10 requests.
maxEntries: 10,
}),
],
})
);
Strategie personalizzate
Oltre a configurare le strategie, Workbox consente di creare strategie personalizzate.
A questo scopo, importa ed estendi la classe base Strategy
da workbox-strategies
:
import {Strategy} from 'workbox-strategies';
class NewStrategy extends Strategy {
_handle(request, handler) {
// Define handling logic here
}
}
In questo esempio, handle()
viene utilizzato come strategia di richiesta per definire una logica di gestione specifica. Puoi utilizzare due strategie di richiesta:
handle()
: esegui una strategia di richiesta e restituisci unPromise
che verrà risolto con unResponse
, richiamando tutti i callback pertinenti del plug-in.handleAll()
: simile ahandle()
, ma restituisce due oggettiPromise
. La prima equivale a quanto restituiscehandle()
, mentre la seconda si risolve quando vengono completate le promesse aggiuntive aevent.waitUntil()
nell'ambito della strategia.
Entrambe le strategie di richiesta vengono richiamate con due parametri:
request
: il valoreRequest
per cui la strategia restituirà una risposta.handler
: un'istanzaStrategyHandler
creata automaticamente per la strategia corrente.
Creare una nuova strategia
Di seguito è riportato un esempio di una nuova strategia che implementa nuovamente il comportamento di NetworkOnly
:
class NewNetworkOnlyStrategy extends Strategy {
_handle(request, handler) {
return handler.fetch(request);
}
}
Osserva come viene chiamato handler.fetch()
anziché il metodo nativo fetch
. La classe StrategyHandler
offre una serie di azioni di recupero e cache che possono essere utilizzate ogni volta che viene utilizzato handle()
o
handleAll()
:
fetch
: recupera una determinata richiesta e richiama i metodi del ciclo di vita dei plug-inrequestWillFetch()
,fetchDidSucceed()
efetchDidFail()
cacheMatch
: corrisponde a una richiesta dalla cache e richiama i metodi del ciclo di vita dei plug-incacheKeyWillBeUsed()
ecachedResponseWillBeUsed()
cachePut
: inserisce una coppia richiesta/risposta nella cache e richiama i metodi del ciclo di vita dei plug-incacheKeyWillBeUsed()
,cacheWillUpdate()
ecacheDidUpdate()
fetchAndCachePut
: chiamafetch()
ed eseguecachePut()
in background sulla risposta generata dafetch()
.hasCallback
: prende un callback come input e restituisce true se la strategia ha almeno un plug-in con il callback specificato.runCallbacks
: esegue tutti i callback dei plug-in corrispondenti a un determinato nome, in ordine, passando un dato oggetto parametro (unito allo stato attuale del plug-in) come unico argomento.iterateCallbacks
: accetta un callback e restituisce un'iterazione dei callback di plug-in corrispondenti, in cui ogni callback è aggregato allo stato di gestore corrente (ad esempio, quando chiami ogni callback, qualsiasi parametro oggetto trasmesso verrà unito allo stato corrente del plug-in).waitUntil
: aggiunge una promessa di estendere la durata dell'evento associato alla richiesta gestita (di solito unFetchEvent
).doneWaiting
: restituisce una promessa che si risolve una volta soddisfatte tutte le promesse passate awaitUntil()
.destroy
: interrompe l'esecuzione della strategia e risolve immediatamente eventuali promesse diwaitUntil()
in sospeso.
Strategia di gara di rete cache personalizzata
L'esempio seguente si basa su cache-network-race del manuale di istruzioni offline (che Workbox non fornisce), ma va oltre e aggiorna sempre la cache dopo una richiesta di rete andata a buon fine. Questo in un esempio di strategia più complessa che utilizza più azioni.
import {Strategy} from 'workbox-strategies';
class CacheNetworkRace extends Strategy {
_handle(request, handler) {
const fetchAndCachePutDone = handler.fetchAndCachePut(request);
const cacheMatchDone = handler.cacheMatch(request);
return new Promise((resolve, reject) => {
fetchAndCachePutDone.then(resolve);
cacheMatchDone.then(response => response && resolve(response));
// Reject if both network and cache error or find no response.
Promise.allSettled([fetchAndCachePutDone, cacheMatchDone]).then(
results => {
const [fetchAndCachePutResult, cacheMatchResult] = results;
if (
fetchAndCachePutResult.status === 'rejected' &&
!cacheMatchResult.value
) {
reject(fetchAndCachePutResult.reason);
}
}
);
});
}
}
Utilizzo avanzato
Se vuoi utilizzare le strategie nella tua logica dell'evento di recupero, puoi usare le classi di strategia per eseguire una richiesta tramite una strategia specifica.
Ad esempio, per usare la strategia instale-while-revalidate, puoi procedere come segue:
self.addEventListener('fetch', event => {
const {request} = event;
const url = new URL(request.url);
if (url.origin === location.origin && url.pathname === '/') {
event.respondWith(new StaleWhileRevalidate().handle({event, request}));
}
});
Puoi trovare l'elenco delle classi disponibili nei documenti di riferimento delle strategie di lavoro.
Tipi
CacheFirst
Un'implementazione di una strategia di richiesta cache-first.
Una strategia basata sulla cache è utile per gli asset sottoposti a revisione, ad esempio URL come /styles/example.a8f5f1.css
, perché possono essere memorizzati nella cache per lunghi periodi di tempo.
Se la richiesta di rete non va a buon fine e non esiste una corrispondenza della cache, verrà generata un'eccezione WorkboxError
.
Proprietà
-
costruttore
void
Crea una nuova istanza della strategia e imposta tutte le proprietà delle opzioni documentate come proprietà dell'istanza pubblica.
Nota: se una classe di strategia personalizzata estende la classe Strategy di base e non ha bisogno di più di queste proprietà, non è necessario definire un proprio creatore.
La funzione
constructor
ha il seguente aspetto:(options?: StrategyOptions) => {...}
-
opzioni del modello.
StrategyOptions facoltativo
-
returns
-
-
cacheName
stringa
-
fetchOptions
RequestInit facoltativo
-
matchOptions
CacheQueryOptions facoltativo
-
plugins
-
_awaitCompletato
void
La funzione
_awaitComplete
ha il seguente aspetto:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promessa<Risposta>
-
handler
-
richiesta
Richiesta
-
event
ExtendableEvent
-
returns
Promise<void>
-
-
_getResponse
void
La funzione
_getResponse
ha il seguente aspetto:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
richiesta
Richiesta
-
event
ExtendableEvent
-
returns
Promessa<Risposta>
-
-
handle
void
Esegui una strategia di richiesta e restituisce un
Promise
che verrà risolto con unResponse
, richiamando tutti i callback pertinenti dei plug-in.Quando un'istanza di strategia viene registrata con una Workbox
workbox-routing.Route
, questo metodo viene richiamato automaticamente quando la route corrisponde.In alternativa, questo metodo può essere utilizzato in un ascoltatore
FetchEvent
autonomo passandolo aevent.respondWith()
.La funzione
handle
ha il seguente aspetto:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
opzioni del modello.
FetchEvent | HandlerCallbackOptions
Un oggetto
FetchEvent
o un oggetto con le proprietà elencate di seguito.
-
returns
Promessa<Risposta>
-
-
handleAll
void
Simile a
workbox-strategies.Strategy~handle
, ma anziché restituire semplicemente unPromise
che si risolve inResponse
, restituirà una tupla di[response, done]
promesse, dove la prima (response
) equivale a quanto restituiscehandle()
, mentre la seconda è una promessa che si risolverà una volta completate tutte le promesse aggiunte aevent.waitUntil()
nell'ambito dell'esecuzione della strategia.Puoi attendere la promessa
done
per assicurarti che l'eventuale lavoro aggiuntivo eseguito dalla strategia (di solito le risposte nella cache) venga completato correttamente.La funzione
handleAll
ha il seguente aspetto:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
opzioni del modello.
FetchEvent | HandlerCallbackOptions
Un oggetto
FetchEvent
o un oggetto con le proprietà elencate di seguito.
-
returns
[Promise<Response>, Promise<void>]
Una tupla di [response, done] promesse che possono essere utilizzate per determinare quando la risposta si risolve e quando il gestore ha completato tutto il suo lavoro.
-
CacheOnly
Un'implementazione di una strategia di richiesta solo cache.
Questa classe è utile se vuoi sfruttare eventuali plug-in di Workbox.
Se non esiste una corrispondenza cache, verrà generata un'eccezione WorkboxError
.
Proprietà
-
costruttore
void
Crea una nuova istanza della strategia e imposta tutte le proprietà delle opzioni documentate come proprietà dell'istanza pubblica.
Nota: se una classe di strategia personalizzata estende la classe Strategy di base e non ha bisogno di più di queste proprietà, non è necessario definire un proprio creatore.
La funzione
constructor
ha il seguente aspetto:(options?: StrategyOptions) => {...}
-
opzioni del modello.
StrategyOptions facoltativo
-
returns
-
-
cacheName
stringa
-
fetchOptions
RequestInit facoltativo
-
matchOptions
CacheQueryOptions facoltativo
-
plugins
-
_awaitCompletato
void
La funzione
_awaitComplete
ha il seguente aspetto:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promessa<Risposta>
-
handler
-
richiesta
Richiesta
-
event
ExtendableEvent
-
returns
Promise<void>
-
-
_getResponse
void
La funzione
_getResponse
ha il seguente aspetto:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
richiesta
Richiesta
-
event
ExtendableEvent
-
returns
Promessa<Risposta>
-
-
handle
void
Esegui una strategia di richiesta e restituisce un
Promise
che verrà risolto con unResponse
, richiamando tutti i callback pertinenti dei plug-in.Quando un'istanza di strategia viene registrata con una Workbox
workbox-routing.Route
, questo metodo viene richiamato automaticamente quando la route corrisponde.In alternativa, questo metodo può essere utilizzato in un ascoltatore
FetchEvent
autonomo passandolo aevent.respondWith()
.La funzione
handle
ha il seguente aspetto:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
opzioni del modello.
FetchEvent | HandlerCallbackOptions
Un oggetto
FetchEvent
o un oggetto con le proprietà elencate di seguito.
-
returns
Promessa<Risposta>
-
-
handleAll
void
Simile a
workbox-strategies.Strategy~handle
, ma anziché restituire semplicemente unPromise
che si risolve inResponse
, restituirà una tupla di[response, done]
promesse, dove la prima (response
) equivale a quanto restituiscehandle()
, mentre la seconda è una promessa che si risolverà una volta completate tutte le promesse aggiunte aevent.waitUntil()
nell'ambito dell'esecuzione della strategia.Puoi attendere la promessa
done
per assicurarti che l'eventuale lavoro aggiuntivo eseguito dalla strategia (di solito le risposte nella cache) venga completato correttamente.La funzione
handleAll
ha il seguente aspetto:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
opzioni del modello.
FetchEvent | HandlerCallbackOptions
Un oggetto
FetchEvent
o un oggetto con le proprietà elencate di seguito.
-
returns
[Promise<Response>, Promise<void>]
Una tupla di [response, done] promesse che possono essere utilizzate per determinare quando la risposta si risolve e quando il gestore ha completato tutto il suo lavoro.
-
NetworkFirst
Un'implementazione di una strategia di richiesta network first.
Per impostazione predefinita, questa strategia memorizza nella cache le risposte con un codice di stato 200 e le risposte opache. Le risposte opache sono richieste multiorigine in cui la risposta non supporta CORS.
Se la richiesta di rete non va a buon fine e non esiste una corrispondenza della cache, verrà generata un'eccezione WorkboxError
.
Proprietà
-
costruttore
void
La funzione
constructor
ha il seguente aspetto:(options?: NetworkFirstOptions) => {...}
-
opzioni del modello.
NetworkFirstOptions facoltativo
-
returns
-
-
cacheName
stringa
-
fetchOptions
RequestInit facoltativo
-
matchOptions
CacheQueryOptions facoltativo
-
plugins
-
_awaitCompletato
void
La funzione
_awaitComplete
ha il seguente aspetto:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promessa<Risposta>
-
handler
-
richiesta
Richiesta
-
event
ExtendableEvent
-
returns
Promise<void>
-
-
_getResponse
void
La funzione
_getResponse
ha il seguente aspetto:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
richiesta
Richiesta
-
event
ExtendableEvent
-
returns
Promessa<Risposta>
-
-
handle
void
Esegui una strategia di richiesta e restituisce un
Promise
che verrà risolto con unResponse
, richiamando tutti i callback pertinenti dei plug-in.Quando un'istanza di strategia viene registrata con una Workbox
workbox-routing.Route
, questo metodo viene richiamato automaticamente quando la route corrisponde.In alternativa, questo metodo può essere utilizzato in un ascoltatore
FetchEvent
autonomo passandolo aevent.respondWith()
.La funzione
handle
ha il seguente aspetto:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
opzioni del modello.
FetchEvent | HandlerCallbackOptions
Un oggetto
FetchEvent
o un oggetto con le proprietà elencate di seguito.
-
returns
Promessa<Risposta>
-
-
handleAll
void
Simile a
workbox-strategies.Strategy~handle
, ma anziché restituire semplicemente unPromise
che si risolve inResponse
, restituirà una tupla di[response, done]
promesse, dove la prima (response
) equivale a quanto restituiscehandle()
, mentre la seconda è una promessa che si risolverà una volta completate tutte le promesse aggiunte aevent.waitUntil()
nell'ambito dell'esecuzione della strategia.Puoi attendere la promessa
done
per assicurarti che l'eventuale lavoro aggiuntivo eseguito dalla strategia (di solito le risposte nella cache) venga completato correttamente.La funzione
handleAll
ha il seguente aspetto:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
opzioni del modello.
FetchEvent | HandlerCallbackOptions
Un oggetto
FetchEvent
o un oggetto con le proprietà elencate di seguito.
-
returns
[Promise<Response>, Promise<void>]
Una tupla di [response, done] promesse che possono essere utilizzate per determinare quando la risposta si risolve e quando il gestore ha completato tutto il suo lavoro.
-
NetworkFirstOptions
Proprietà
-
cacheName
stringa facoltativo
-
fetchOptions
RequestInit facoltativo
-
matchOptions
CacheQueryOptions facoltativo
-
networkTimeoutSeconds
numero facoltativo
-
plugins
WorkboxPlugin[] facoltativo
NetworkOnly
Un'implementazione di una strategia di richiesta solo rete.
Questa classe è utile se vuoi sfruttare eventuali plug-in di Workbox.
Se la richiesta di rete non va a buon fine, verrà generata un'eccezione WorkboxError
.
Proprietà
-
costruttore
void
La funzione
constructor
ha il seguente aspetto:(options?: NetworkOnlyOptions) => {...}
-
opzioni del modello.
NetworkOnlyOptions facoltativo
-
returns
-
-
cacheName
stringa
-
fetchOptions
RequestInit facoltativo
-
matchOptions
CacheQueryOptions facoltativo
-
plugins
-
_awaitCompletato
void
La funzione
_awaitComplete
ha il seguente aspetto:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promessa<Risposta>
-
handler
-
richiesta
Richiesta
-
event
ExtendableEvent
-
returns
Promise<void>
-
-
_getResponse
void
La funzione
_getResponse
ha il seguente aspetto:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
richiesta
Richiesta
-
event
ExtendableEvent
-
returns
Promessa<Risposta>
-
-
handle
void
Esegui una strategia di richiesta e restituisce un
Promise
che verrà risolto con unResponse
, richiamando tutti i callback pertinenti dei plug-in.Quando un'istanza di strategia viene registrata con una Workbox
workbox-routing.Route
, questo metodo viene richiamato automaticamente quando la route corrisponde.In alternativa, questo metodo può essere utilizzato in un ascoltatore
FetchEvent
autonomo passandolo aevent.respondWith()
.La funzione
handle
ha il seguente aspetto:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
opzioni del modello.
FetchEvent | HandlerCallbackOptions
Un oggetto
FetchEvent
o un oggetto con le proprietà elencate di seguito.
-
returns
Promessa<Risposta>
-
-
handleAll
void
Simile a
workbox-strategies.Strategy~handle
, ma anziché restituire semplicemente unPromise
che si risolve inResponse
, restituirà una tupla di[response, done]
promesse, dove la prima (response
) equivale a quanto restituiscehandle()
, mentre la seconda è una promessa che si risolverà una volta completate tutte le promesse aggiunte aevent.waitUntil()
nell'ambito dell'esecuzione della strategia.Puoi attendere la promessa
done
per assicurarti che l'eventuale lavoro aggiuntivo eseguito dalla strategia (di solito le risposte nella cache) venga completato correttamente.La funzione
handleAll
ha il seguente aspetto:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
opzioni del modello.
FetchEvent | HandlerCallbackOptions
Un oggetto
FetchEvent
o un oggetto con le proprietà elencate di seguito.
-
returns
[Promise<Response>, Promise<void>]
Una tupla di [response, done] promesse che possono essere utilizzate per determinare quando la risposta si risolve e quando il gestore ha completato tutto il suo lavoro.
-
NetworkOnlyOptions
Proprietà
-
fetchOptions
RequestInit facoltativo
-
networkTimeoutSeconds
numero facoltativo
-
plugins
WorkboxPlugin[] facoltativo
StaleWhileRevalidate
Un'implementazione di una strategia di richiesta stale-while-revalidate.
Le risorse vengono richieste in parallelo sia dalla cache sia dalla rete. La strategia risponderà con la versione memorizzata nella cache, se disponibile, altrimenti Attendi la risposta della rete. La cache viene aggiornata con la risposta di rete con ogni richiesta andata a buon fine.
Per impostazione predefinita, questa strategia memorizza nella cache le risposte con un codice di stato 200 e le risposte opache. Le risposte opache sono richieste multiorigine in cui la risposta non supporta CORS.
Se la richiesta di rete non va a buon fine e non esiste una corrispondenza della cache, verrà generata un'eccezione WorkboxError
.
Proprietà
-
costruttore
void
La funzione
constructor
ha il seguente aspetto:(options?: StrategyOptions) => {...}
-
opzioni del modello.
StrategyOptions facoltativo
-
returns
-
-
cacheName
stringa
-
fetchOptions
RequestInit facoltativo
-
matchOptions
CacheQueryOptions facoltativo
-
plugins
-
_awaitCompletato
void
La funzione
_awaitComplete
ha il seguente aspetto:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promessa<Risposta>
-
handler
-
richiesta
Richiesta
-
event
ExtendableEvent
-
returns
Promise<void>
-
-
_getResponse
void
La funzione
_getResponse
ha il seguente aspetto:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
richiesta
Richiesta
-
event
ExtendableEvent
-
returns
Promessa<Risposta>
-
-
handle
void
Esegui una strategia di richiesta e restituisce un
Promise
che verrà risolto con unResponse
, richiamando tutti i callback pertinenti dei plug-in.Quando un'istanza di strategia viene registrata con una Workbox
workbox-routing.Route
, questo metodo viene richiamato automaticamente quando la route corrisponde.In alternativa, questo metodo può essere utilizzato in un ascoltatore
FetchEvent
autonomo passandolo aevent.respondWith()
.La funzione
handle
ha il seguente aspetto:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
opzioni del modello.
FetchEvent | HandlerCallbackOptions
Un oggetto
FetchEvent
o un oggetto con le proprietà elencate di seguito.
-
returns
Promessa<Risposta>
-
-
handleAll
void
Simile a
workbox-strategies.Strategy~handle
, ma anziché restituire semplicemente unPromise
che si risolve inResponse
, restituirà una tupla di[response, done]
promesse, dove la prima (response
) equivale a quanto restituiscehandle()
, mentre la seconda è una promessa che si risolverà una volta completate tutte le promesse aggiunte aevent.waitUntil()
nell'ambito dell'esecuzione della strategia.Puoi attendere la promessa
done
per assicurarti che l'eventuale lavoro aggiuntivo eseguito dalla strategia (di solito le risposte nella cache) venga completato correttamente.La funzione
handleAll
ha il seguente aspetto:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
opzioni del modello.
FetchEvent | HandlerCallbackOptions
Un oggetto
FetchEvent
o un oggetto con le proprietà elencate di seguito.
-
returns
[Promise<Response>, Promise<void>]
Una tupla di [response, done] promesse che possono essere utilizzate per determinare quando la risposta si risolve e quando il gestore ha completato tutto il suo lavoro.
-
Strategy
Una classe base astratta da cui devono estendersi tutte le altre classi di strategia:
Proprietà
-
costruttore
void
Crea una nuova istanza della strategia e imposta tutte le proprietà delle opzioni documentate come proprietà dell'istanza pubblica.
Nota: se una classe di strategia personalizzata estende la classe Strategy di base e non ha bisogno di più di queste proprietà, non è necessario definire un proprio creatore.
La funzione
constructor
ha il seguente aspetto:(options?: StrategyOptions) => {...}
-
opzioni del modello.
StrategyOptions facoltativo
-
returns
-
-
cacheName
stringa
-
fetchOptions
RequestInit facoltativo
-
matchOptions
CacheQueryOptions facoltativo
-
plugins
-
_awaitCompletato
void
La funzione
_awaitComplete
ha il seguente aspetto:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promessa<Risposta>
-
handler
-
richiesta
Richiesta
-
event
ExtendableEvent
-
returns
Promise<void>
-
-
_getResponse
void
La funzione
_getResponse
ha il seguente aspetto:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
richiesta
Richiesta
-
event
ExtendableEvent
-
returns
Promessa<Risposta>
-
-
_handle
void
La funzione
_handle
ha il seguente aspetto:(request: Request, handler: StrategyHandler) => {...}
-
richiesta
Richiesta
-
handler
-
returns
Promessa<Risposta>
-
-
handle
void
Esegui una strategia di richiesta e restituisce un
Promise
che verrà risolto con unResponse
, richiamando tutti i callback pertinenti dei plug-in.Quando un'istanza di strategia viene registrata con una Workbox
workbox-routing.Route
, questo metodo viene richiamato automaticamente quando la route corrisponde.In alternativa, questo metodo può essere utilizzato in un ascoltatore
FetchEvent
autonomo passandolo aevent.respondWith()
.La funzione
handle
ha il seguente aspetto:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
opzioni del modello.
FetchEvent | HandlerCallbackOptions
Un oggetto
FetchEvent
o un oggetto con le proprietà elencate di seguito.
-
returns
Promessa<Risposta>
-
-
handleAll
void
Simile a
workbox-strategies.Strategy~handle
, ma anziché restituire semplicemente unPromise
che si risolve inResponse
, restituirà una tupla di[response, done]
promesse, dove la prima (response
) equivale a quanto restituiscehandle()
, mentre la seconda è una promessa che si risolverà una volta completate tutte le promesse aggiunte aevent.waitUntil()
nell'ambito dell'esecuzione della strategia.Puoi attendere la promessa
done
per assicurarti che l'eventuale lavoro aggiuntivo eseguito dalla strategia (di solito le risposte nella cache) venga completato correttamente.La funzione
handleAll
ha il seguente aspetto:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
opzioni del modello.
FetchEvent | HandlerCallbackOptions
Un oggetto
FetchEvent
o un oggetto con le proprietà elencate di seguito.
-
returns
[Promise<Response>, Promise<void>]
Una tupla di [response, done] promesse che possono essere utilizzate per determinare quando la risposta si risolve e quando il gestore ha completato tutto il suo lavoro.
-
StrategyHandler
Una classe creata ogni volta che un'istanza di Strategy chiama
workbox-strategies.Strategy~handle
o
workbox-strategies.Strategy~handleAll
, che aggrega tutte le azioni di recupero
e cache relative ai callback dei plug-in e tiene traccia del momento in cui la strategia
viene "completata" (ossia, tutte le promesse event.waitUntil()
aggiunte sono state risolte).
Proprietà
-
costruttore
void
Crea una nuova istanza associata alla strategia passata e all'evento che gestisce la richiesta.
Il costruttore inizializza anche lo stato che verrà passato a ciascuno dei plug-in che gestiscono questa richiesta.
La funzione
constructor
ha il seguente aspetto:(strategy: Strategy, options: HandlerCallbackOptions) => {...}
-
di strategia
-
opzioni del modello.
-
returns
-
-
event
ExtendableEvent
-
params
qualsiasi facoltativo
-
richiesta
Richiesta
-
url
URL facoltativo
-
cacheMatch
void
Corrisponde a una richiesta dalla cache (e richiama qualsiasi metodo di callback applicabile) utilizzando i
cacheName
,matchOptions
eplugins
definiti nell'oggetto strategia.Quando si utilizza questo metodo, vengono richiamati i seguenti metodi del ciclo di vita dei plug-in:
- cacheKeyWillByUsed()
- cachedResponseWillByUsed()
La funzione
cacheMatch
ha il seguente aspetto:(key: RequestInfo) => {...}
-
chiave
RequestInfo
La richiesta o l'URL da utilizzare come chiave cache.
-
returns
Promessa<Risposta>
Una risposta corrispondente, se trovata.
-
cachePut
void
Mette una coppia richiesta/risposta nella cache (e richiama eventuali metodi di callback applicabili) utilizzando
cacheName
eplugins
definiti nell'oggetto strategia.Quando si utilizza questo metodo, vengono richiamati i seguenti metodi del ciclo di vita dei plug-in:
- cacheKeyWillByUsed()
- cacheWillUpdate()
- cacheDidUpdate()
La funzione
cachePut
ha il seguente aspetto:(key: RequestInfo, response: Response) => {...}
-
chiave
RequestInfo
La richiesta o l'URL da utilizzare come chiave cache.
-
risposta
Risposta
La risposta alla cache.
-
returns
Promise<boolean>
false
se un errore cacheWillUpdate ha causato il mancato inserimento della risposta nella cache etrue
in caso contrario.
-
destroy
void
Interrompe l'esecuzione della strategia e risolve immediatamente eventuali promesse
waitUntil()
in sospeso.La funzione
destroy
ha il seguente aspetto:() => {...}
-
doneWaiting
void
Restituisce una promessa che si risolve una volta risolte tutte le promesse a
workbox-strategies.StrategyHandler~waitUntil
.Nota: qualsiasi lavoro svolto dopo la risoluzione di
doneWaiting()
deve essere passato manualmente al metodowaitUntil()
di un evento (non al metodowaitUntil()
di questo gestore), altrimenti il thread del service worker deve essere interrotto prima del completamento del tuo lavoro.La funzione
doneWaiting
ha il seguente aspetto:() => {...}
-
returns
Promise<void>
-
-
fetch
void
Recupera una determinata richiesta (e richiama qualsiasi metodo di callback applicabile) utilizzando
fetchOptions
(per le richieste non di navigazione) eplugins
definiti nell'oggettoStrategy
.Quando si utilizza questo metodo, vengono richiamati i seguenti metodi del ciclo di vita dei plug-in:
requestWillFetch()
fetchDidSucceed()
fetchDidFail()
La funzione
fetch
ha il seguente aspetto:(input: RequestInfo) => {...}
-
input
RequestInfo
L'URL o la richiesta da recuperare.
-
returns
Promessa<Risposta>
-
fetchAndCachePut
void
Richiama
this.fetch()
e (in background) eseguethis.cachePut()
sulla risposta generata dathis.fetch()
.La chiamata a
this.cachePut()
richiama automaticamentethis.waitUntil()
, quindi non devi chiamare manualmentewaitUntil()
per l'evento.La funzione
fetchAndCachePut
ha il seguente aspetto:(input: RequestInfo) => {...}
-
input
RequestInfo
La richiesta o l'URL da recuperare e memorizzare nella cache.
-
returns
Promessa<Risposta>
-
-
getCacheKey
void
Controlla l'elenco dei plug-in per il callback
cacheKeyWillBeUsed
ed esegue tutti i callback trovati in sequenza. L'oggettoRequest
finale restituito dall'ultimo plug-in viene considerato come chiave cache per le letture e/o le scritture della cache. Se non sono stati registrati callback del plug-incacheKeyWillBeUsed
, la richiesta passata viene restituita senza modificheLa funzione
getCacheKey
ha il seguente aspetto:(request: Request, mode: "read"
| "write"
) => {...}-
richiesta
Richiesta
-
modalità
-
returns
Promessa<Richiesta>
-
-
hasCallback
void
Restituisce true se la strategia ha almeno un plug-in con il callback specificato.
La funzione
hasCallback
ha il seguente aspetto:(name: C) => {...}
-
nome
C
Il nome del callback da controllare.
-
returns
boolean
-
-
iterateCallbacks
void
Accetta un callback e restituisce un'iterazione dei callback di plug-in corrispondenti, in cui ogni callback viene aggregato allo stato di gestore corrente (ad esempio, quando chiami ogni callback, qualsiasi parametro oggetto trasmesso verrà unito allo stato corrente del plug-in).
La funzione
iterateCallbacks
ha il seguente aspetto:(name: C) => {...}
-
nome
C
Il nome del callback da eseguire
-
returns
Generatore<NonNullable<indexedAccess>anyunknown>
-
-
runCallbacks
void
Esegue tutti i callback del plug-in corrispondenti al nome specificato, in ordine, passando l'oggetto param specificato (unione con lo stato attuale del plug-in) come unico argomento.
Nota: poiché questo metodo esegue tutti i plug-in, non è adatto nei casi in cui il valore restituito di un callback deve essere applicato prima di chiamare il callback successivo. Vedi
workbox-strategies.StrategyHandler#iterateCallbacks
di seguito per informazioni su come gestire questa richiesta.La funzione
runCallbacks
ha il seguente aspetto:(name: C, param: Omit<indexedAccess"state"
>) => {...}-
nome
C
Il nome del callback da eseguire in ciascun plug-in.
-
parametro
Ometti<indexedAccess"state"
>L'oggetto da passare come primo (e unico) parametro durante l'esecuzione di ogni callback. Questo oggetto verrà unito allo stato attuale del plug-in prima dell'esecuzione del callback.
-
returns
Promise<void>
-
-
waitUntil
void
Aggiunge una promessa a [estendi promesse di durata]
https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises
dell'evento evento associato alla richiesta gestita (in genere unFetchEvent
).Nota: puoi attendere
workbox-strategies.StrategyHandler~doneWaiting
per sapere quando tutte le promesse aggiunte sono state saldate.La funzione
waitUntil
ha il seguente aspetto:(promise: Promise<T>) => {...}
-
promessa
Promise<T>
Una promessa di ampliare le promesse di estensione della durata dell'evento che ha attivato la richiesta.
-
returns
Promise<T>
-
StrategyOptions
Proprietà
-
cacheName
stringa facoltativo
-
fetchOptions
RequestInit facoltativo
-
matchOptions
CacheQueryOptions facoltativo
-
plugins
WorkboxPlugin[] facoltativo