strategie-workbox

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

Diagramma inattivo 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)

Primo diagramma cache

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)

Diagramma della prima rete

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

Diagramma 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

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

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 un Promise che verrà risolto con un Response, richiamando tutti i callback pertinenti del plug-in.
  • handleAll(): simile a handle(), ma restituisce due oggetti Promise. La prima equivale a quanto restituisce handle(), mentre la seconda si risolve quando vengono completate le promesse aggiuntive a event.waitUntil() nell'ambito della strategia.

Entrambe le strategie di richiesta vengono richiamate con due parametri:

  • request: il valore Request per cui la strategia restituirà una risposta.
  • handler: un'istanza StrategyHandler 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-in requestWillFetch(), fetchDidSucceed() e fetchDidFail()
  • cacheMatch: corrisponde a una richiesta dalla cache e richiama i metodi del ciclo di vita dei plug-in cacheKeyWillBeUsed() e cachedResponseWillBeUsed()
  • cachePut: inserisce una coppia richiesta/risposta nella cache e richiama i metodi del ciclo di vita dei plug-in cacheKeyWillBeUsed(), cacheWillUpdate() e cacheDidUpdate()
  • fetchAndCachePut: chiama fetch() ed esegue cachePut() in background sulla risposta generata da fetch().
  • 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 un FetchEvent).
  • doneWaiting: restituisce una promessa che si risolve una volta soddisfatte tutte le promesse passate a waitUntil().
  • destroy: interrompe l'esecuzione della strategia e risolve immediatamente eventuali promesse di waitUntil() 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)=> {...}

  • cacheName

    stringa

  • fetchOptions

    RequestInit facoltativo

  • matchOptions

    CacheQueryOptions facoltativo

  • plugins

    WorkboxPlugin[]

  • _awaitCompletato

    void

    La funzione _awaitComplete ha il seguente aspetto: 

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

    • responseDone

      Promessa<Risposta>

    • handler

      StrategyHandler

    • richiesta

      Richiesta

    • event

      ExtendableEvent

    • returns

      Promise<void>

  • _getResponse

    void

    La funzione _getResponse ha il seguente aspetto: 

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

    • returns

      Promessa<Risposta>

  • handle

    void

    Esegui una strategia di richiesta e restituisce un Promise che verrà risolto con un Response, 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 a event.respondWith().

    La funzione handle ha il seguente aspetto: 

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

    • opzioni

      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 un Promise che si risolve in Response, restituirà una tupla di [response, done] promesse, dove la prima (response) equivale a quanto restituisce handle(), mentre la seconda è una promessa che si risolverà una volta completate tutte le promesse aggiunte a event.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

      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)=> {...}

  • cacheName

    stringa

  • fetchOptions

    RequestInit facoltativo

  • matchOptions

    CacheQueryOptions facoltativo

  • plugins

    WorkboxPlugin[]

  • _awaitCompletato

    void

    La funzione _awaitComplete ha il seguente aspetto: 

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

    • responseDone

      Promessa<Risposta>

    • handler

      StrategyHandler

    • richiesta

      Richiesta

    • event

      ExtendableEvent

    • returns

      Promise<void>

  • _getResponse

    void

    La funzione _getResponse ha il seguente aspetto: 

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

    • returns

      Promessa<Risposta>

  • handle

    void

    Esegui una strategia di richiesta e restituisce un Promise che verrà risolto con un Response, 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 a event.respondWith().

    La funzione handle ha il seguente aspetto: 

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

    • opzioni

      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 un Promise che si risolve in Response, restituirà una tupla di [response, done] promesse, dove la prima (response) equivale a quanto restituisce handle(), mentre la seconda è una promessa che si risolverà una volta completate tutte le promesse aggiunte a event.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

      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)=> {...}

  • cacheName

    stringa

  • fetchOptions

    RequestInit facoltativo

  • matchOptions

    CacheQueryOptions facoltativo

  • plugins

    WorkboxPlugin[]

  • _awaitCompletato

    void

    La funzione _awaitComplete ha il seguente aspetto: 

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

    • responseDone

      Promessa<Risposta>

    • handler

      StrategyHandler

    • richiesta

      Richiesta

    • event

      ExtendableEvent

    • returns

      Promise<void>

  • _getResponse

    void

    La funzione _getResponse ha il seguente aspetto: 

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

    • returns

      Promessa<Risposta>

  • handle

    void

    Esegui una strategia di richiesta e restituisce un Promise che verrà risolto con un Response, 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 a event.respondWith().

    La funzione handle ha il seguente aspetto: 

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

    • opzioni

      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 un Promise che si risolve in Response, restituirà una tupla di [response, done] promesse, dove la prima (response) equivale a quanto restituisce handle(), mentre la seconda è una promessa che si risolverà una volta completate tutte le promesse aggiunte a event.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

      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)=> {...}

  • cacheName

    stringa

  • fetchOptions

    RequestInit facoltativo

  • matchOptions

    CacheQueryOptions facoltativo

  • plugins

    WorkboxPlugin[]

  • _awaitCompletato

    void

    La funzione _awaitComplete ha il seguente aspetto: 

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

    • responseDone

      Promessa<Risposta>

    • handler

      StrategyHandler

    • richiesta

      Richiesta

    • event

      ExtendableEvent

    • returns

      Promise<void>

  • _getResponse

    void

    La funzione _getResponse ha il seguente aspetto: 

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

    • returns

      Promessa<Risposta>

  • handle

    void

    Esegui una strategia di richiesta e restituisce un Promise che verrà risolto con un Response, 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 a event.respondWith().

    La funzione handle ha il seguente aspetto: 

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

    • opzioni

      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 un Promise che si risolve in Response, restituirà una tupla di [response, done] promesse, dove la prima (response) equivale a quanto restituisce handle(), mentre la seconda è una promessa che si risolverà una volta completate tutte le promesse aggiunte a event.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

      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)=> {...}

  • cacheName

    stringa

  • fetchOptions

    RequestInit facoltativo

  • matchOptions

    CacheQueryOptions facoltativo

  • plugins

    WorkboxPlugin[]

  • _awaitCompletato

    void

    La funzione _awaitComplete ha il seguente aspetto: 

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

    • responseDone

      Promessa<Risposta>

    • handler

      StrategyHandler

    • richiesta

      Richiesta

    • event

      ExtendableEvent

    • returns

      Promise<void>

  • _getResponse

    void

    La funzione _getResponse ha il seguente aspetto: 

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

    • returns

      Promessa<Risposta>

  • handle

    void

    Esegui una strategia di richiesta e restituisce un Promise che verrà risolto con un Response, 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 a event.respondWith().

    La funzione handle ha il seguente aspetto: 

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

    • opzioni

      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 un Promise che si risolve in Response, restituirà una tupla di [response, done] promesse, dove la prima (response) equivale a quanto restituisce handle(), mentre la seconda è una promessa che si risolverà una volta completate tutte le promesse aggiunte a event.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

      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)=> {...}

  • cacheName

    stringa

  • fetchOptions

    RequestInit facoltativo

  • matchOptions

    CacheQueryOptions facoltativo

  • plugins

    WorkboxPlugin[]

  • _awaitCompletato

    void

    La funzione _awaitComplete ha il seguente aspetto: 

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

    • responseDone

      Promessa<Risposta>

    • handler

      StrategyHandler

    • richiesta

      Richiesta

    • event

      ExtendableEvent

    • returns

      Promise<void>

  • _getResponse

    void

    La funzione _getResponse ha il seguente aspetto: 

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

    • returns

      Promessa<Risposta>

  • _handle

    void

    La funzione _handle ha il seguente aspetto: 

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

    • returns

      Promessa<Risposta>

  • handle

    void

    Esegui una strategia di richiesta e restituisce un Promise che verrà risolto con un Response, 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 a event.respondWith().

    La funzione handle ha il seguente aspetto: 

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

    • opzioni

      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 un Promise che si risolve in Response, restituirà una tupla di [response, done] promesse, dove la prima (response) equivale a quanto restituisce handle(), mentre la seconda è una promessa che si risolverà una volta completate tutte le promesse aggiunte a event.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

      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)=> {...}

  • 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 e plugins 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 e plugins 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 e true 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 metodo waitUntil() di un evento (non al metodo waitUntil() 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) e plugins definiti nell'oggetto Strategy.

    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) esegue this.cachePut() sulla risposta generata da this.fetch().

    La chiamata a this.cachePut() richiama automaticamente this.waitUntil(), quindi non devi chiamare manualmente waitUntil() 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'oggetto Request 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-in cacheKeyWillBeUsed, la richiesta passata viene restituita senza modifiche

    La 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 un FetchEvent).

    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