strategie-workbox

Quando sono stati introdotti per la prima volta, i worker di servizio hanno portato alla luce un insieme di strategie di memorizzazione nella cache comuni. Una strategia di memorizzazione nella cache è un pattern che determina in che modo un worker di servizio genera una risposta dopo aver ricevuto un evento di recupero.

workbox-strategies fornisce le strategie di memorizzazione nella cache più comuni, quindi è facile applicarle nel tuo service worker.

Non entreremo nei dettagli al di fuori delle strategie supportate da Workbox, ma puoi scoprire di più nel Cookbook offline.

Utilizzare le strategie

Negli esempi che seguono, ti mostreremo come utilizzare le strategie di memorizzazione nella cache di Workbox con workbox-routing. Esistono alcune opzioni che puoi definire con ogni strategia e che sono descritte nella sezione Configurazione delle strategie di questo documento.

Nella sezione Utilizzo avanzato, spiegheremo come utilizzare le strategie di memorizzazione nella cache direttamente senza workbox-routing.

Stale-While-Revalidate

Diagramma non aggiornato durante la convalida

Il pattern stale-while-revalidate consente di rispondere alla richiesta il più rapidamente possibile con una risposta memorizzata nella cache, se disponibile, e di eseguire il fallback alla richiesta di rete se non è memorizzata nella cache. La richiesta di rete viene poi utilizzata per aggiornare la cache. A differenza di alcune implementazioni di stale-while-revalidate, questa strategia invierà sempre una richiesta di convalida, indipendentemente dall'età della risposta memorizzata nella cache.

Si tratta di una strategia abbastanza comune quando la risorsa più aggiornata non è fondamentale per l'applicazione.

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';

registerRoute(
  ({url}) => url.pathname.startsWith('/images/avatars/'),
  new StaleWhileRevalidate()
);

Cache prima (cache di riserva sulla rete)

Memorizza nella cache il primo diagramma

Le app web offline si basano molto sulla cache, ma per gli asset non critici che possono essere memorizzati nella cache gradualmente, la strategia cache first è 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 pubblicata direttamente dalla cache.

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';

registerRoute(({request}) => request.destination === 'style', new CacheFirst());

Priorità alla rete (ritorno alla cache in caso di problemi di rete)

Diagramma di rete principale

Per le richieste che vengono aggiornate di frequente, la strategia network first è la soluzione ideale. Per impostazione predefinita, cercherà di recuperare la risposta più recente dalla rete. Se la richiesta ha esito positivo, la risposta viene inserita nella cache. Se la rete non restituisce 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

Diagramma solo rete

Se vuoi che vengano soddisfatte 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

Diagramma solo cache

La strategia solo cache garantisce che le risposte vengano ottenute da una cache. Questa operazione è meno comune in Workbox, ma può essere utile se hai il tuo passaggio di pre-caching.

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.
  • Restrizioni relative alla scadenza della cache da utilizzare nella strategia.
  • Un array di plug-in i cui metodi del ciclo di vita verranno chiamati 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 specificando un nome della cache. Questa opzione è utile se vuoi separare le risorse per facilitare il debug.

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'image-cache',
  })
);

Utilizzare i plug-in

Workbox è dotato di un insieme di plug-in che possono essere utilizzati con queste strategie.

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 ti consente di creare le tue strategie personalizzate. Per farlo, importa e estendi la classe di 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 un Promise che verrà risolto con un Response, invocando tutti i callback dei plug-in pertinenti.
  • handleAll(): simile a handle(), ma restituisce due oggetti Promise. La prima è equivalente a ciò che restituisce handle() e la seconda verrà risolta quando le promesse aggiunte a handle() all'interno della strategia saranno state completate.event.waitUntil()

Entrambe le strategie di richiesta vengono richiamate con due parametri:

  • request: il Request per cui la strategia restituirà una risposta.
  • handler: un'istanza StrategyHandler creata automaticamente per la strategia corrente.

Creazione di una nuova strategia

Di seguito è riportato un esempio di una nuova strategia che reimplementa il comportamento di NetworkOnly:

class NewNetworkOnlyStrategy extends Strategy {
  _handle(request, handler) {
    return handler.fetch(request);
  }
}

Nota come viene chiamato handler.fetch() anziché il metodo nativo fetch. La classe StrategyHandler fornisce una serie di azioni di recupero e memorizzazione nella cache che possono essere utilizzate ogni volta che viene utilizzato handle() o handleAll():

  • fetch: recupera una determinata richiesta e richiama i metodi di ciclo di vita dei plug-in requestWillFetch(), fetchDidSucceed() e fetchDidFail()
  • cacheMatch: corrisponde a una richiesta dalla cache e richiama i metodi di ciclo di vita dei plug-in cacheKeyWillBeUsed() e cachedResponseWillBeUsed()
  • cachePut: inserisce una coppia di richiesta/risposta nella cache e richiama i metodi di ciclo di vita dei plug-in cacheKeyWillBeUsed(), cacheWillUpdate() e cacheDidUpdate()
  • fetchAndCachePut: chiama fetch() ed esegue cachePut() in background in base alla risposta generata da fetch().
  • hasCallback: riceve un callback come input e restituisce true se la strategia ha almeno un plug-in con il callback specificato.
  • runCallbacks: esegue in ordine tutti i callback del plug-in corrispondenti a un determinato nome, passando un determinato oggetto param (unito allo stato corrente del plug-in) come unico argomento.
  • iterateCallbacks: accetta un callback e restituisce un iterable di callback del plug-in corrispondenti, in cui ogni callback è racchiuso nello stato corrente dell'handler (ovvero quando chiami ogni callback, qualunque parametro oggetto che passi verrà unito allo stato corrente del plug-in).
  • waitUntil: aggiunge una promessa alle promesse di durata estesa dell'evento associato alla richiesta in fase di elaborazione (in genere un FetchEvent).
  • doneWaiting: restituisce una promessa che si risolve una volta completate tutte le promesse passate a waitUntil().
  • destroy: interrompe l'esecuzione della strategia e risolve immediatamente eventuali promesse waitUntil() in attesa.

Strategia di gara della rete di memorizzazione in cache personalizzata

L'esempio seguente si basa su cache-network-race del Offline Cookbook (che Workbox non fornisce), ma fa un passo avanti e aggiorna sempre la cache dopo una richiesta di rete andata a buon fine. Questo è un esempio di una 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 di evento di recupero, puoi utilizzare le classi di strategia per eseguire una richiesta tramite una strategia specifica.

Ad esempio, per utilizzare la strategia stale-while-revalidate, puoi procedere nel seguente modo:

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 nelle documentazioni di riferimento di workbox-strategies.

Tipi

CacheFirst

Un'implementazione di una strategia di richiesta cache-first.

Una strategia di cache first è utile per le risorse che sono state riviste, come gli URL come /styles/example.a8f5f1.css, poiché 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 nella cache, viene generata un'eccezione WorkboxError.

Proprietà

  • constructor

    nullo

    Crea una nuova istanza della strategia e imposta tutte le proprietà opzionali documentate come proprietà di istanze pubbliche.

    Nota: se una classe di strategia personalizzata estende la classe di strategia di base e non necessita di più di queste proprietà, non deve definire il proprio costruttore.

    La funzione constructor ha il seguente aspetto: 

    (options?: StrategyOptions) => {...}

  • cacheName

    stringa

  • fetchOptions

    RequestInit facoltativo

  • matchOptions

    CacheQueryOptions facoltativo

  • plugins

    WorkboxPlugin[]

  • _awaitComplete

    nullo

    La funzione _awaitComplete ha il seguente aspetto: 

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • richiesta

      Richiesta

    • evento

      ExtendableEvent

    • returns

      Promise<void>

  • _getResponse

    nullo

    La funzione _getResponse ha il seguente aspetto: 

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • returns

      Promise<Response>

  • handle

    nullo

    Esegui una strategia di richiesta e restituisce un Promise che verrà risolto con un Response, richiamando tutti i callback dei plug-in pertinenti.

    Quando un'istanza di strategia è registrata in Workbox workbox-routing.Route, questo metodo viene chiamato automaticamente quando il percorso corrisponde.

    In alternativa, questo metodo può essere utilizzato in un ascoltatore FetchEvent autonomo passandolo a event.respondWith().

    La funzione handle ha il seguente aspetto: 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • opzioni

      FetchEvent | HandlerCallbackOptions

      Un FetchEvent o un oggetto con le proprietà elencate di seguito.

    • returns

      Promise<Response>

  • handleAll

    nullo

    È simile a workbox-strategies.Strategy~handle, ma invece di restituire solo un Promise che si risolve in un Response, restituirà un'tupla di promesse [response, done], dove la prima (response) è equivalente a ciò che restituisce handle() e la seconda è una promessa che verrà risolta al termine di tutte le promesse aggiunte a event.waitUntil() nell'ambito dell'esecuzione della strategia.

    Puoi attendere la promessa done per assicurarti che qualsiasi lavoro aggiuntivo eseguito dalla strategia (in genere la memorizzazione nella cache delle risposte) venga completato correttamente.

    La funzione handleAll ha il seguente aspetto: 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • opzioni

      FetchEvent | HandlerCallbackOptions

      Un FetchEvent o un oggetto con le proprietà elencate di seguito.

    • returns

      [Promise<Response>, Promise<void>]

      Una tupla di promesse [response, done] che può essere utilizzata per determinare quando la risposta viene risolta e quando il gestore ha completato tutto il proprio lavoro.

CacheOnly

Un'implementazione di una strategia di richiesta solo cache.

Questo metodo è utile se vuoi sfruttare i plug-in Workbox.

Se non viene trovata alcuna corrispondenza nella cache, verrà generata un'eccezione WorkboxError.

Proprietà

  • constructor

    nullo

    Crea una nuova istanza della strategia e imposta tutte le proprietà opzionali documentate come proprietà di istanze pubbliche.

    Nota: se una classe di strategia personalizzata estende la classe di strategia di base e non necessita di più di queste proprietà, non deve definire il proprio costruttore.

    La funzione constructor ha il seguente aspetto: 

    (options?: StrategyOptions) => {...}

  • cacheName

    stringa

  • fetchOptions

    RequestInit facoltativo

  • matchOptions

    CacheQueryOptions facoltativo

  • plugins

    WorkboxPlugin[]

  • _awaitComplete

    nullo

    La funzione _awaitComplete ha il seguente aspetto: 

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • richiesta

      Richiesta

    • evento

      ExtendableEvent

    • returns

      Promise<void>

  • _getResponse

    nullo

    La funzione _getResponse ha il seguente aspetto: 

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • returns

      Promise<Response>

  • handle

    nullo

    Esegui una strategia di richiesta e restituisce un Promise che verrà risolto con un Response, richiamando tutti i callback dei plug-in pertinenti.

    Quando un'istanza di strategia è registrata in Workbox workbox-routing.Route, questo metodo viene chiamato automaticamente quando il percorso corrisponde.

    In alternativa, questo metodo può essere utilizzato in un ascoltatore FetchEvent autonomo passandolo a event.respondWith().

    La funzione handle ha il seguente aspetto: 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • opzioni

      FetchEvent | HandlerCallbackOptions

      Un FetchEvent o un oggetto con le proprietà elencate di seguito.

    • returns

      Promise<Response>

  • handleAll

    nullo

    È simile a workbox-strategies.Strategy~handle, ma invece di restituire solo un Promise che si risolve in un Response, restituirà un'tupla di promesse [response, done], dove la prima (response) è equivalente a ciò che restituisce handle() e la seconda è una promessa che verrà risolta al termine di tutte le promesse aggiunte a event.waitUntil() nell'ambito dell'esecuzione della strategia.

    Puoi attendere la promessa done per assicurarti che qualsiasi lavoro aggiuntivo eseguito dalla strategia (in genere la memorizzazione nella cache delle risposte) venga completato correttamente.

    La funzione handleAll ha il seguente aspetto: 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • opzioni

      FetchEvent | HandlerCallbackOptions

      Un FetchEvent o un oggetto con le proprietà elencate di seguito.

    • returns

      [Promise<Response>, Promise<void>]

      Una tupla di promesse [response, done] che può essere utilizzata per determinare quando la risposta viene risolta e quando il gestore ha completato tutto il proprio lavoro.

NetworkFirst

Un'implementazione di una strategia di richiesta in primo piano sulla rete.

Per impostazione predefinita, questa strategia memorizza nella cache le risposte con un codice di stato 200, nonché le risposte opache. Le risposte opache sono richieste cross-origin in cui la risposta non supporta CORS.

Se la richiesta di rete non va a buon fine e non esiste una corrispondenza nella cache, viene generata un'eccezione WorkboxError.

Proprietà

  • constructor

    nullo

    La funzione constructor ha il seguente aspetto: 

    (options?: NetworkFirstOptions) => {...}

  • cacheName

    stringa

  • fetchOptions

    RequestInit facoltativo

  • matchOptions

    CacheQueryOptions facoltativo

  • plugins

    WorkboxPlugin[]

  • _awaitComplete

    nullo

    La funzione _awaitComplete ha il seguente aspetto: 

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • richiesta

      Richiesta

    • evento

      ExtendableEvent

    • returns

      Promise<void>

  • _getResponse

    nullo

    La funzione _getResponse ha il seguente aspetto: 

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • returns

      Promise<Response>

  • handle

    nullo

    Esegui una strategia di richiesta e restituisce un Promise che verrà risolto con un Response, richiamando tutti i callback del plug-in pertinenti.

    Quando un'istanza di strategia è registrata in Workbox workbox-routing.Route, questo metodo viene chiamato automaticamente quando il percorso corrisponde.

    In alternativa, questo metodo può essere utilizzato in un ascoltatore FetchEvent autonomo passandolo a event.respondWith().

    La funzione handle ha il seguente aspetto: 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • opzioni

      FetchEvent | HandlerCallbackOptions

      Un FetchEvent o un oggetto con le proprietà elencate di seguito.

    • returns

      Promise<Response>

  • handleAll

    nullo

    È simile a workbox-strategies.Strategy~handle, ma invece di restituire solo un Promise che si risolve in un Response, restituirà un'tupla di promesse [response, done], dove la prima (response) è equivalente a ciò che restituisce handle() e la seconda è una promessa che verrà risolta al termine di tutte le promesse aggiunte a event.waitUntil() nell'ambito dell'esecuzione della strategia.

    Puoi attendere la promessa done per assicurarti che qualsiasi lavoro aggiuntivo eseguito dalla strategia (in genere la memorizzazione nella cache delle risposte) venga completato correttamente.

    La funzione handleAll ha il seguente aspetto: 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • opzioni

      FetchEvent | HandlerCallbackOptions

      Un FetchEvent o un oggetto con le proprietà elencate di seguito.

    • returns

      [Promise<Response>, Promise<void>]

      Una tupla di promesse [response, done] che può essere utilizzata per determinare quando la risposta viene risolta e quando il gestore ha completato tutto il proprio lavoro.

NetworkFirstOptions

Proprietà

  • cacheName

    stringa facoltativa

  • fetchOptions

    RequestInit facoltativo

  • matchOptions

    CacheQueryOptions facoltativo

  • networkTimeoutSeconds

    number facoltativo

  • plugins

    WorkboxPlugin[] facoltativo

NetworkOnly

Un'implementazione di una strategia di richiesta solo rete.

Questo metodo è utile se vuoi sfruttare i plug-in Workbox.

Se la richiesta di rete non riesce, viene generata un'eccezione WorkboxError.

Proprietà

  • constructor

    nullo

    La funzione constructor ha il seguente aspetto: 

    (options?: NetworkOnlyOptions) => {...}

  • cacheName

    stringa

  • fetchOptions

    RequestInit facoltativo

  • matchOptions

    CacheQueryOptions facoltativo

  • plugins

    WorkboxPlugin[]

  • _awaitComplete

    nullo

    La funzione _awaitComplete ha il seguente aspetto: 

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • richiesta

      Richiesta

    • evento

      ExtendableEvent

    • returns

      Promise<void>

  • _getResponse

    nullo

    La funzione _getResponse ha il seguente aspetto: 

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • returns

      Promise<Response>

  • handle

    nullo

    Esegui una strategia di richiesta e restituisce un Promise che verrà risolto con un Response, richiamando tutti i callback del plug-in pertinenti.

    Quando un'istanza di strategia è registrata in Workbox workbox-routing.Route, questo metodo viene chiamato automaticamente quando il percorso corrisponde.

    In alternativa, questo metodo può essere utilizzato in un ascoltatore FetchEvent autonomo passandolo a event.respondWith().

    La funzione handle ha il seguente aspetto: 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • opzioni

      FetchEvent | HandlerCallbackOptions

      Un FetchEvent o un oggetto con le proprietà elencate di seguito.

    • returns

      Promise<Response>

  • handleAll

    nullo

    È simile a workbox-strategies.Strategy~handle, ma invece di restituire solo un Promise che si risolve in un Response, restituirà un'tupla di promesse [response, done], dove la prima (response) è equivalente a ciò che restituisce handle() e la seconda è una promessa che verrà risolta al termine di tutte le promesse aggiunte a event.waitUntil() nell'ambito dell'esecuzione della strategia.

    Puoi attendere la promessa done per assicurarti che qualsiasi lavoro aggiuntivo eseguito dalla strategia (in genere la memorizzazione nella cache delle risposte) venga completato correttamente.

    La funzione handleAll ha il seguente aspetto: 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • opzioni

      FetchEvent | HandlerCallbackOptions

      Un FetchEvent o un oggetto con le proprietà elencate di seguito.

    • returns

      [Promise<Response>, Promise<void>]

      Una tupla di promesse [response, done] che può essere utilizzata per determinare quando la risposta viene risolta e quando il gestore ha completato tutto il proprio lavoro.

NetworkOnlyOptions

Proprietà

  • fetchOptions

    RequestInit facoltativo

  • networkTimeoutSeconds

    number facoltativo

  • plugins

    WorkboxPlugin[] facoltativo

StaleWhileRevalidate

Un'implementazione di una strategia di richiesta stale-while-revalidate.

Le risorse vengono richieste sia dalla cache che dalla rete in parallelo. La strategia risponderà con la versione memorizzata nella cache, se disponibile, altrimenti aspetta la risposta della rete. La cache viene aggiornata con la risposta della rete con ogni richiesta andata a buon fine.

Per impostazione predefinita, questa strategia memorizza nella cache le risposte con un codice di stato 200, nonché le risposte opache. Le risposte opache sono richieste cross-origin in cui la risposta non supporta CORS.

Se la richiesta di rete non va a buon fine e non esiste una corrispondenza nella cache, viene generata un'eccezione WorkboxError.

Proprietà

  • constructor

    nullo

    La funzione constructor ha il seguente aspetto: 

    (options?: StrategyOptions) => {...}

  • cacheName

    stringa

  • fetchOptions

    RequestInit facoltativo

  • matchOptions

    CacheQueryOptions facoltativo

  • plugins

    WorkboxPlugin[]

  • _awaitComplete

    nullo

    La funzione _awaitComplete ha il seguente aspetto: 

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • richiesta

      Richiesta

    • evento

      ExtendableEvent

    • returns

      Promise<void>

  • _getResponse

    nullo

    La funzione _getResponse ha il seguente aspetto: 

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • returns

      Promise<Response>

  • handle

    nullo

    Esegui una strategia di richiesta e restituisce un Promise che verrà risolto con un Response, richiamando tutti i callback dei plug-in pertinenti.

    Quando un'istanza di strategia è registrata in Workbox workbox-routing.Route, questo metodo viene chiamato automaticamente quando il percorso corrisponde.

    In alternativa, questo metodo può essere utilizzato in un ascoltatore FetchEvent autonomo passandolo a event.respondWith().

    La funzione handle ha il seguente aspetto: 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • opzioni

      FetchEvent | HandlerCallbackOptions

      Un FetchEvent o un oggetto con le proprietà elencate di seguito.

    • returns

      Promise<Response>

  • handleAll

    nullo

    È simile a workbox-strategies.Strategy~handle, ma invece di restituire solo un Promise che si risolve in un Response, restituirà un'tupla di promesse [response, done], dove la prima (response) è equivalente a ciò che restituisce handle() e la seconda è una promessa che verrà risolta al termine di tutte le promesse aggiunte a event.waitUntil() nell'ambito dell'esecuzione della strategia.

    Puoi attendere la promessa done per assicurarti che qualsiasi lavoro aggiuntivo eseguito dalla strategia (in genere la memorizzazione nella cache delle risposte) venga completato correttamente.

    La funzione handleAll ha il seguente aspetto: 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • opzioni

      FetchEvent | HandlerCallbackOptions

      Un FetchEvent o un oggetto con le proprietà elencate di seguito.

    • returns

      [Promise<Response>, Promise<void>]

      Una tupla di promesse [response, done] che può essere utilizzata per determinare quando la risposta viene risolta e quando il gestore ha completato tutto il proprio lavoro.

Strategy

Una classe base astratta da cui devono essere estese tutte le altre classi di strategia:

Proprietà

  • constructor

    nullo

    Crea una nuova istanza della strategia e imposta tutte le proprietà opzionali documentate come proprietà di istanze pubbliche.

    Nota: se una classe di strategia personalizzata estende la classe di strategia di base e non necessita di più di queste proprietà, non deve definire il proprio costruttore.

    La funzione constructor ha il seguente aspetto: 

    (options?: StrategyOptions) => {...}

  • cacheName

    stringa

  • fetchOptions

    RequestInit facoltativo

  • matchOptions

    CacheQueryOptions facoltativo

  • plugins

    WorkboxPlugin[]

  • _awaitComplete

    nullo

    La funzione _awaitComplete ha il seguente aspetto: 

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • richiesta

      Richiesta

    • evento

      ExtendableEvent

    • returns

      Promise<void>

  • _getResponse

    nullo

    La funzione _getResponse ha il seguente aspetto: 

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • returns

      Promise<Response>

  • _handle

    nullo

    La funzione _handle ha il seguente aspetto: 

    (request: Request, handler: StrategyHandler) => {...}

    • returns

      Promise<Response>

  • handle

    nullo

    Esegui una strategia di richiesta e restituisce un Promise che verrà risolto con un Response, richiamando tutti i callback del plug-in pertinenti.

    Quando un'istanza di strategia è registrata in Workbox workbox-routing.Route, questo metodo viene chiamato automaticamente quando il percorso corrisponde.

    In alternativa, questo metodo può essere utilizzato in un ascoltatore FetchEvent autonomo passandolo a event.respondWith().

    La funzione handle ha il seguente aspetto: 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • opzioni

      FetchEvent | HandlerCallbackOptions

      Un FetchEvent o un oggetto con le proprietà elencate di seguito.

    • returns

      Promise<Response>

  • handleAll

    nullo

    È simile a workbox-strategies.Strategy~handle, ma invece di restituire solo un Promise che si risolve in un Response, restituirà un'tupla di promesse [response, done], dove la prima (response) è equivalente a ciò che restituisce handle() e la seconda è una promessa che verrà risolta al termine di tutte le promesse aggiunte a event.waitUntil() nell'ambito dell'esecuzione della strategia.

    Puoi attendere la promessa done per assicurarti che qualsiasi lavoro aggiuntivo eseguito dalla strategia (in genere la memorizzazione nella cache delle risposte) venga completato correttamente.

    La funzione handleAll ha il seguente aspetto: 

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • opzioni

      FetchEvent | HandlerCallbackOptions

      Un FetchEvent o un oggetto con le proprietà elencate di seguito.

    • returns

      [Promise<Response>, Promise<void>]

      Una tupla di promesse [response, done] che può essere utilizzata per determinare quando la risposta viene risolta e quando il gestore ha completato tutto il proprio lavoro.

StrategyHandler

Un'istanza di classe creata ogni volta che un'istanza di strategia chiama workbox-strategies.Strategy~handle o workbox-strategies.Strategy~handleAll che racchiude tutte le azioni di recupero e cache nei callback del plug-in e tiene traccia del momento in cui la strategia è "terminata" (ovvero tutte le promesse event.waitUntil() aggiunte sono state risolte).

Proprietà

  • constructor

    nullo

    Crea una nuova istanza associata alla strategia e all'evento passati che gestisce la richiesta.

    Il costruttore inizializza inoltre 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) => {...}

  • evento

    ExtendableEvent

  • params

    qualsiasi facoltativo

  • richiesta

    Richiesta

  • url

    URL facoltativo

  • cacheMatch

    nullo

    Corrisponde a una richiesta dalla cache (e invoca eventuali metodi callback del plug-in applicabili) utilizzando cacheName, matchOptions e plugins definiti nell'oggetto strategia.

    Quando utilizzi questo metodo, vengono invocati i seguenti metodi del ciclo di vita del plug-in:

    • cacheKeyWillBeUsed()
    • cachedResponseWillBeUsed()

    La funzione cacheMatch ha il seguente aspetto: 

    (key: RequestInfo) => {...}

    • chiave

      RequestInfo

      La richiesta o l'URL da utilizzare come chiave della cache.

    • returns

      Promise<Response>

      Una risposta corrispondente, se trovata.

  • cachePut

    nullo

    Inserisce una coppia richiesta/risposta nella cache (e invoca eventuali metodi di callback del plug-in applicabili) utilizzando cacheName e plugins definiti nell'oggetto strategia.

    Quando utilizzi questo metodo, vengono invocati i seguenti metodi del ciclo di vita del plug-in:

    • cacheKeyWillBeUsed()
    • cacheWillUpdate()
    • cacheDidUpdate()

    La funzione cachePut ha il seguente aspetto: 

    (key: RequestInfo, response: Response) => {...}

    • chiave

      RequestInfo

      La richiesta o l'URL da utilizzare come chiave della cache.

    • risposta

      Risposta

      La risposta alla cache.

    • returns

      Promise<boolean>

      false se un'istruzione cacheWillUpdate ha causato la mancata memorizzazione nella cache della risposta e true in caso contrario.

  • eliminare

    nullo

    Interrompe l'esecuzione della strategia e risolve immediatamente eventuali promessewaitUntil() in sospeso.

    La funzione destroy ha il seguente aspetto: 

    () => {...}

  • doneWaiting

    nullo

    Restituisce una promessa che si risolve una volta che tutte le promesse passate a workbox-strategies.StrategyHandler~waitUntil sono state risolte.

    Nota: qualsiasi lavoro svolto dopo l'elaborazione di doneWaiting() deve essere passato manualmente al metodo waitUntil() di un evento (non al metodo waitUntil() di questo gestore), altrimenti il thread del service worker potrebbe essere interrotto prima del completamento del lavoro.

    La funzione doneWaiting ha il seguente aspetto: 

    () => {...}

    • returns

      Promise<void>

  • fetch

    nullo

    Recupera una determinata richiesta (e invoca eventuali metodi di callback del plug-in applicabili) utilizzando fetchOptions (per le richieste non di navigazione) e plugins definiti nell'oggetto Strategy.

    Quando utilizzi questo metodo, vengono invocati i seguenti metodi del ciclo di vita del plug-in:

    • requestWillFetch()
    • fetchDidSucceed()
    • fetchDidFail()

    La funzione fetch ha il seguente aspetto: 

    (input: RequestInfo) => {...}

    • input

      RequestInfo

      L'URL o la richiesta da recuperare.

    • returns

      Promise<Response>

  • fetchAndCachePut

    nullo

    Chiama this.fetch() e (in background) esegue this.cachePut() sulla risposta generata da this.fetch().

    La chiamata a this.cachePut() richiama automaticamente this.waitUntil(), quindi non devi chiamare manualmente waitUntil() nell'evento.

    La funzione fetchAndCachePut ha il seguente aspetto: 

    (input: RequestInfo) => {...}

    • input

      RequestInfo

      La richiesta o l'URL da recuperare e memorizzare nella cache.

    • returns

      Promise<Response>

  • getCacheKey

    nullo

    Controlla l'elenco dei plug-in per il callback cacheKeyWillBeUsed ed eseguito uno di questi callback trovati in sequenza. L'oggetto Request finale restituito dall'ultimo plug-in viene trattato come chiave della cache per le letture e/o le scritture della cache. Se non sono stati registrati callback del plug-in cacheKeyWillBeUsed, la richiesta passata viene restituita non modificata

    La funzione getCacheKey ha il seguente aspetto: 

    (request: Request, mode: "read" 
          | "write" 
         ) => {...}

    • richiesta

      Richiesta

    • modalità

      "read"
       | "write"

    • returns

      Promise<Request>

  • hasCallback

    nullo

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

    • returns

      booleano

  • iterateCallbacks

    nullo

    Accetta un callback e restituisce un iterable di callback del plug-in corrispondenti, dove ogni callback è racchiuso nello stato corrente dell'handler (ovvero quando chiami ogni callback, qualsiasi parametro oggetto che passi 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

      Generator<NonNullable<indexedAccess>anyunknown>

  • runCallbacks

    nullo

    Esegue tutti i callback del plug-in corrispondenti al nome specificato, in ordine, passando come unico argomento l'oggetto param specificato (unito allo stato corrente del plug-in).

    Nota: poiché questo metodo esegue tutti i plug-in, non è adatto ai casi in cui il valore restituito di un callback debba essere applicato prima di chiamare il callback successivo. Consulta workbox-strategies.StrategyHandler#iterateCallbacks di seguito per sapere come gestire la richiesta.

    La funzione runCallbacks ha il seguente aspetto: 

    (name: C, param: Omit<indexedAccess"state" 
         >) => {...}

    • nome

      C

      Il nome del callback da eseguire all'interno di ogni plug-in.

    • param

      Omit<indexedAccess"state"
      >

      L'oggetto da passare come primo (e unico) parametro durante l'esecuzione di ogni callback. Questo oggetto verrà unito allo stato corrente del plug-in prima dell'esecuzione del callback.

    • returns

      Promise<void>

  • waitUntil

    nullo

    Aggiunge una promessa a [extend lifetime promises]https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises dell'evento associato alla richiesta in fase di elaborazione (di solito un FetchEvent).

    Nota: puoi attendere workbox-strategies.StrategyHandler~doneWaiting per sapere quando tutte le promesse aggiunte sono state risolte.

    La funzione waitUntil ha il seguente aspetto: 

    (promise: Promise<T>) => {...}

    • promessa

      Promise<T>

      Una promessa da aggiungere alle promesse di estensione della durata dell'evento che ha attivato la richiesta.

    • returns

      Promise<T>

StrategyOptions

Proprietà

  • cacheName

    stringa facoltativa

  • fetchOptions

    RequestInit facoltativo

  • matchOptions

    CacheQueryOptions facoltativo

  • plugins

    WorkboxPlugin[] facoltativo