strategie-workbox

All'inizio dei Service worker, un insieme di strategie di memorizzazione nella cache comuni sono emerse. 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 offre le strategie di memorizzazione nella cache più comuni, per cui è facile e applicarle nel tuo service worker.

Non entreremo molto in dettaglio al di fuori delle strategie supportate da Workbox, ma puoi scoprire di più nel Libro di ricette offline.

Utilizzo di strategie

Nei seguenti esempi, ti mostreremo come utilizzare la memorizzazione nella cache di Workbox strategie con workbox-routing. Puoi definire alcune opzioni ognuna delle strategie trattate nei Sezione sulla configurazione delle strategie di questo documento.

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

Inattiva durante la riconvalida

Diagramma inattivo durante la riconvalida

L'opzione stale-while-revalidate consente di rispondere alla richiesta il più rapidamente possibile con un la risposta memorizzata nella cache, se disponibile, facendo riferimento alla richiesta di rete, se non memorizzati nella cache. La richiesta di rete viene quindi utilizzata per aggiornare la cache. Al contrario di alcune implementazioni di stale-Mentre-riconvalida, questa strategia farà sempre una richiesta di riconvalida, a prescindere dall'età della risposta memorizzata nella cache.

Questa è una strategia abbastanza comune in cui avere le risorse non è essenziale per l'applicazione.

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

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

Prima cache (fallimento della cache sulla rete)

Memorizza primo diagramma nella cache

Le app web offline fanno affidamento sulla cache, ma per gli asset che sono non critici e possono essere gradualmente memorizzati nella cache, prima 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 cache risposta, la Richiesta sarà soddisfatta da una richiesta di rete e la risposta verranno memorizzate 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 (la rete torna alla cache)

Primo diagramma della rete

Per le richieste che vengono aggiornate di frequente, prima la rete è la soluzione ideale. Per impostazione predefinita, proverà a recuperare l'ultima versione dalla rete. Se la richiesta ha esito positivo, la risposta verrà inserita nella cache. Se la rete non riesce a restituire una risposta, 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 occorre soddisfare richieste specifiche dalla rete, solo rete è la strategia da usare.

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

registerRoute(({url}) => url.pathname.startsWith('/admin/'), new NetworkOnly());

Solo cache

Diagramma solo cache

Solo cache assicura che le risposte siano ottenute da una cache. Questo è meno comune nella casella di lavoro, ma possono essere utili se hai un tuo passaggio di pre-memorizzazione nella cache.

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 della scadenza della cache da utilizzare nella strategia.
  • Un array di plug-in i cui metodi del ciclo di vita vengono chiamati quando recuperando una richiesta e memorizzandola nella cache.

Modificare la cache utilizzata da una strategia

Puoi modificare la cache con una strategia utilizzata fornendo un nome cache. Questo è è 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 dei plug-in

Workbox include una serie di plug-in che possono essere utilizzati con queste strategie.

Per utilizzare uno qualsiasi di questi plug-in (o un plug-in personalizzato), è sufficiente passare di Compute Engine 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 strategie personalizzate. Questa operazione può essere eseguita importando ed estendendo 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 utilizzata come strategia di richiesta per definire una logica di gestione specifica. Là esistono due strategie di richiesta che possono essere usate:

  • handle(): esegui una strategia di richiesta e restituisci un Promise che si risolverà con un Response, richiamando 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 il secondo verrà risolto quando le promesse che erano aggiunti a event.waitUntil() nella strategia sono stati completati.

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 reimplementa il comportamento di NetworkOnly:

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

Nota come viene chiamato handler.fetch() invece del metodo fetch nativo. StrategyHandler fornisce una serie di azioni di recupero e cache che possono essere utilizzate ogni volta che handle() o handleAll() è utilizzato:

  • fetch: recupera una determinata richiesta e richiama requestWillFetch(), fetchDidSucceed() e Metodi del ciclo di vita dei plug-in fetchDidFail()
  • cacheMatch: corrisponde a una richiesta dalla cache e richiama cacheKeyWillBeUsed() e cachedResponseWillBeUsed() metodi del ciclo di vita dei plug-in
  • cachePut: inserisce una coppia di richiesta/risposta nella cache e richiama cacheKeyWillBeUsed(), Metodi del ciclo di vita dei plug-in cacheWillUpdate() e cacheDidUpdate()
  • fetchAndCachePut: chiama fetch() ed esegue cachePut() in background nella risposta generate 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 determinato parametro (unito allo stato corrente del plug-in) come unico argomento.
  • iterateCallbacks: accetta un callback e restituisce una serie di callback del plug-in corrispondenti, in cui ogni callback è aggregato con lo stato del gestore corrente (ad es. quando chiami ogni callback, qualsiasi parametro oggetto passato verrà unito allo stato corrente del plug-in).
  • waitUntil: aggiunge una promessa per estendere la durata delle promesse dell'evento associato all'evento associato all'evento. richiesta gestita (di solito, FetchEvent).
  • doneWaiting: restituisce una promessa che si risolve una volta che tutte le promesse passate a waitUntil() sono state risolto.
  • destroy: interrompe l'esecuzione della strategia e risolve immediatamente tutte le promesse waitUntil() in sospeso.
di Gemini Advanced.

Strategia di gara sulla rete con cache personalizzata

L'esempio seguente si basa su cache-network-race dal Libro di ricette offline (che non è disponibile in Workbox), ma va oltre e aggiorna sempre di memorizzazione nella cache dopo una richiesta di rete riuscita. Questo è 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 attraverso una strategia specifica.

Ad esempio, per usare la strategia stale-Durante-riconvalida, puoi eseguire la seguenti:

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 dei corsi disponibili nella documenti di riferimento sulle strategie-box.

Tipi

CacheFirst

Un'implementazione di un approccio cache-first la strategia di richiesta.

Una strategia Cache-first è utile per gli asset sottoposti a revisione, come gli URL come /styles/example.a8f5f1.css, poiché possono essere memorizzate nella cache per lunghi periodi di tempo.

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

Proprietà

  • costruttore

    null

    Crea una nuova istanza della strategia e imposta tutte le opzioni documentate come proprietà dell'istanza pubblica.

    Nota: se una classe di strategia personalizzata estende la classe di strategia di base e lo fa non ha bisogno di più di queste proprietà, non ha bisogno di definire le proprie come costruttore.

    La funzione constructor ha questo aspetto: 

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

  • cacheName

    stringa

  • fetchOptions

    RequestInit facoltativo

  • matchOptions

    CacheQueryOptions facoltativo

  • plugins

    WorkboxPlugin[]

  • _awaitComplete

    null

    La funzione _awaitComplete ha questo aspetto: 

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

    • responseDone

      Promise&lt;Response&gt;

    • handler

      StrategyHandler

    • richiesta

      Richiesta

    • evento

      ExtendableEvent

    • returns

      Promesso<void>

  • _getResponse

    null

    La funzione _getResponse ha questo aspetto: 

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

    • returns

      Promise&lt;Response&gt;

  • handle

    null

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

    Quando un'istanza di strategia è registrata con una Workbox workbox-routing.Route, questo metodo viene automaticamente chiamato quando corrisponde la route.

    In alternativa, questo metodo può essere utilizzato in una versione autonoma di FetchEvent in un listener passandolo a event.respondWith().

    La funzione handle ha questo aspetto: 

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

    • returns

      Promise&lt;Response&gt;

  • handleAll

    null

    Simile a workbox-strategies.Strategy~handle, ma invece di restituire semplicemente un Promise che si risolve in Response restituirà una tupla di [response, done] promesse, dove la prima (response) è equivalente a ciò che restituisce handle() e il secondo è un Promessa che si risolverà una volta eventuali promesse aggiunte a event.waitUntil() nell'ambito dell'esecuzione della strategia sono stati completati.

    Puoi attendere la promessa done di garantire che eventuali lavori aggiuntivi eseguiti la strategia (di solito la memorizzazione nella cache delle risposte) viene completata correttamente.

    La funzione handleAll ha questo aspetto: 

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

    • returns

      [Promessa<risposta>, Promessa<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 lavoro.

CacheOnly

Un'implementazione solo cache la strategia di richiesta.

Questo corso è utile se vuoi usufruire di Plug-in di Workbox.

Se non esiste una corrispondenza della cache, viene generata un'eccezione WorkboxError.

Proprietà

  • costruttore

    null

    Crea una nuova istanza della strategia e imposta tutte le opzioni documentate come proprietà dell'istanza pubblica.

    Nota: se una classe di strategia personalizzata estende la classe di strategia di base e lo fa non ha bisogno di più di queste proprietà, non ha bisogno di definire le proprie come costruttore.

    La funzione constructor ha questo aspetto: 

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

  • cacheName

    stringa

  • fetchOptions

    RequestInit facoltativo

  • matchOptions

    CacheQueryOptions facoltativo

  • plugins

    WorkboxPlugin[]

  • _awaitComplete

    null

    La funzione _awaitComplete ha questo aspetto: 

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

    • responseDone

      Promise&lt;Response&gt;

    • handler

      StrategyHandler

    • richiesta

      Richiesta

    • evento

      ExtendableEvent

    • returns

      Promesso<void>

  • _getResponse

    null

    La funzione _getResponse ha questo aspetto: 

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

    • returns

      Promise&lt;Response&gt;

  • handle

    null

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

    Quando un'istanza di strategia è registrata con una Workbox workbox-routing.Route, questo metodo viene automaticamente chiamato quando corrisponde la route.

    In alternativa, questo metodo può essere utilizzato in una versione autonoma di FetchEvent in un listener passandolo a event.respondWith().

    La funzione handle ha questo aspetto: 

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

    • returns

      Promise&lt;Response&gt;

  • handleAll

    null

    Simile a workbox-strategies.Strategy~handle, ma invece di restituire semplicemente un Promise che si risolve in Response restituirà una tupla di [response, done] promesse, dove la prima (response) è equivalente a ciò che restituisce handle() e il secondo è un Promessa che si risolverà una volta eventuali promesse aggiunte a event.waitUntil() nell'ambito dell'esecuzione della strategia sono stati completati.

    Puoi attendere la promessa done di garantire che eventuali lavori aggiuntivi eseguiti la strategia (di solito la memorizzazione nella cache delle risposte) viene completata correttamente.

    La funzione handleAll ha questo aspetto: 

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

    • returns

      [Promessa<risposta>, Promessa<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 lavoro.

NetworkFirst

L'implementazione di un prima la rete la strategia di richiesta.

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

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

Proprietà

  • costruttore

    null

    La funzione constructor ha questo aspetto: 

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

  • cacheName

    stringa

  • fetchOptions

    RequestInit facoltativo

  • matchOptions

    CacheQueryOptions facoltativo

  • plugins

    WorkboxPlugin[]

  • _awaitComplete

    null

    La funzione _awaitComplete ha questo aspetto: 

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

    • responseDone

      Promise&lt;Response&gt;

    • handler

      StrategyHandler

    • richiesta

      Richiesta

    • evento

      ExtendableEvent

    • returns

      Promesso<void>

  • _getResponse

    null

    La funzione _getResponse ha questo aspetto: 

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

    • returns

      Promise&lt;Response&gt;

  • handle

    null

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

    Quando un'istanza di strategia è registrata con una Workbox workbox-routing.Route, questo metodo viene automaticamente chiamato quando corrisponde la route.

    In alternativa, questo metodo può essere utilizzato in una versione autonoma di FetchEvent in un listener passandolo a event.respondWith().

    La funzione handle ha questo aspetto: 

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

    • returns

      Promise&lt;Response&gt;

  • handleAll

    null

    Simile a workbox-strategies.Strategy~handle, ma invece di restituire semplicemente un Promise che si risolve in Response restituirà una tupla di [response, done] promesse, dove la prima (response) è equivalente a ciò che restituisce handle() e il secondo è un Promessa che si risolverà una volta eventuali promesse aggiunte a event.waitUntil() nell'ambito dell'esecuzione della strategia sono stati completati.

    Puoi attendere la promessa done di garantire che eventuali lavori aggiuntivi eseguiti la strategia (di solito la memorizzazione nella cache delle risposte) viene completata correttamente.

    La funzione handleAll ha questo aspetto: 

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

    • returns

      [Promessa<risposta>, Promessa<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 lavoro.

NetworkFirstOptions

Proprietà

  • cacheName

    stringa facoltativo

  • fetchOptions

    RequestInit facoltativo

  • matchOptions

    CacheQueryOptions facoltativo

  • networkTimeoutSeconds

    numero facoltativo

  • plugins

    WorkboxPlugin[] facoltativo

NetworkOnly

L'implementazione di un solo rete la strategia di richiesta.

Questo corso è utile se vuoi usufruire di Plug-in di Workbox.

Se la richiesta di rete non va a buon fine, viene generata un'eccezione WorkboxError.

Proprietà

  • costruttore

    null

    La funzione constructor ha questo aspetto: 

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

  • cacheName

    stringa

  • fetchOptions

    RequestInit facoltativo

  • matchOptions

    CacheQueryOptions facoltativo

  • plugins

    WorkboxPlugin[]

  • _awaitComplete

    null

    La funzione _awaitComplete ha questo aspetto: 

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

    • responseDone

      Promise&lt;Response&gt;

    • handler

      StrategyHandler

    • richiesta

      Richiesta

    • evento

      ExtendableEvent

    • returns

      Promesso<void>

  • _getResponse

    null

    La funzione _getResponse ha questo aspetto: 

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

    • returns

      Promise&lt;Response&gt;

  • handle

    null

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

    Quando un'istanza di strategia è registrata con una Workbox workbox-routing.Route, questo metodo viene automaticamente chiamato quando corrisponde la route.

    In alternativa, questo metodo può essere utilizzato in una versione autonoma di FetchEvent in un listener passandolo a event.respondWith().

    La funzione handle ha questo aspetto: 

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

    • returns

      Promise&lt;Response&gt;

  • handleAll

    null

    Simile a workbox-strategies.Strategy~handle, ma invece di restituire semplicemente un Promise che si risolve in Response restituirà una tupla di [response, done] promesse, dove la prima (response) è equivalente a ciò che restituisce handle() e il secondo è un Promessa che si risolverà una volta eventuali promesse aggiunte a event.waitUntil() nell'ambito dell'esecuzione della strategia sono stati completati.

    Puoi attendere la promessa done di garantire che eventuali lavori aggiuntivi eseguiti la strategia (di solito la memorizzazione nella cache delle risposte) viene completata correttamente.

    La funzione handleAll ha questo aspetto: 

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

    • returns

      [Promessa<risposta>, Promessa<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 lavoro.

NetworkOnlyOptions

Proprietà

  • fetchOptions

    RequestInit facoltativo

  • networkTimeoutSeconds

    numero facoltativo

  • plugins

    WorkboxPlugin[] facoltativo

StaleWhileRevalidate

L'implementazione di un inattivo-durante-riconvalida la strategia di richiesta.

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

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

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

Proprietà

  • costruttore

    null

    La funzione constructor ha questo aspetto: 

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

  • cacheName

    stringa

  • fetchOptions

    RequestInit facoltativo

  • matchOptions

    CacheQueryOptions facoltativo

  • plugins

    WorkboxPlugin[]

  • _awaitComplete

    null

    La funzione _awaitComplete ha questo aspetto: 

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

    • responseDone

      Promise&lt;Response&gt;

    • handler

      StrategyHandler

    • richiesta

      Richiesta

    • evento

      ExtendableEvent

    • returns

      Promesso<void>

  • _getResponse

    null

    La funzione _getResponse ha questo aspetto: 

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

    • returns

      Promise&lt;Response&gt;

  • handle

    null

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

    Quando un'istanza di strategia è registrata con una Workbox workbox-routing.Route, questo metodo viene automaticamente chiamato quando corrisponde la route.

    In alternativa, questo metodo può essere utilizzato in una versione autonoma di FetchEvent in un listener passandolo a event.respondWith().

    La funzione handle ha questo aspetto: 

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

    • returns

      Promise&lt;Response&gt;

  • handleAll

    null

    Simile a workbox-strategies.Strategy~handle, ma invece di restituire semplicemente un Promise che si risolve in Response restituirà una tupla di [response, done] promesse, dove la prima (response) è equivalente a ciò che restituisce handle() e il secondo è un Promessa che si risolverà una volta eventuali promesse aggiunte a event.waitUntil() nell'ambito dell'esecuzione della strategia sono stati completati.

    Puoi attendere la promessa done di garantire che eventuali lavori aggiuntivi eseguiti la strategia (di solito la memorizzazione nella cache delle risposte) viene completata correttamente.

    La funzione handleAll ha questo aspetto: 

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

    • returns

      [Promessa<risposta>, Promessa<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 lavoro.

Strategy

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

Proprietà

  • costruttore

    null

    Crea una nuova istanza della strategia e imposta tutte le opzioni documentate come proprietà dell'istanza pubblica.

    Nota: se una classe di strategia personalizzata estende la classe di strategia di base e lo fa non ha bisogno di più di queste proprietà, non ha bisogno di definire le proprie come costruttore.

    La funzione constructor ha questo aspetto: 

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

  • cacheName

    stringa

  • fetchOptions

    RequestInit facoltativo

  • matchOptions

    CacheQueryOptions facoltativo

  • plugins

    WorkboxPlugin[]

  • _awaitComplete

    null

    La funzione _awaitComplete ha questo aspetto: 

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

    • responseDone

      Promise&lt;Response&gt;

    • handler

      StrategyHandler

    • richiesta

      Richiesta

    • evento

      ExtendableEvent

    • returns

      Promesso<void>

  • _getResponse

    null

    La funzione _getResponse ha questo aspetto: 

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

    • returns

      Promise&lt;Response&gt;

  • _handle

    null

    La funzione _handle ha questo aspetto: 

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

    • returns

      Promise&lt;Response&gt;

  • handle

    null

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

    Quando un'istanza di strategia è registrata con una Workbox workbox-routing.Route, questo metodo viene automaticamente chiamato quando corrisponde la route.

    In alternativa, questo metodo può essere utilizzato in una versione autonoma di FetchEvent in un listener passandolo a event.respondWith().

    La funzione handle ha questo aspetto: 

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

    • returns

      Promise&lt;Response&gt;

  • handleAll

    null

    Simile a workbox-strategies.Strategy~handle, ma invece di restituire semplicemente un Promise che si risolve in Response restituirà una tupla di [response, done] promesse, dove la prima (response) è equivalente a ciò che restituisce handle() e il secondo è un Promessa che si risolverà una volta eventuali promesse aggiunte a event.waitUntil() nell'ambito dell'esecuzione della strategia sono stati completati.

    Puoi attendere la promessa done di garantire che eventuali lavori aggiuntivi eseguiti la strategia (di solito la memorizzazione nella cache delle risposte) viene completata correttamente.

    La funzione handleAll ha questo aspetto: 

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

    • returns

      [Promessa<risposta>, Promessa<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 lavoro.

StrategyHandler

Una classe creata ogni volta che viene chiamata un'istanza Strategy workbox-strategies.Strategy~handle o workbox-strategies.Strategy~handleAll che aggrega tutti i dati le azioni nella cache relative ai callback dei plug-in e tiene traccia del momento in cui la strategia è "completato" (ad esempio, tutte le promesse di event.waitUntil() aggiunte sono state risolte).

Proprietà

  • costruttore

    null

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

    Il costruttore inizializza anche lo stato che verrà passato a ciascuno i plug-in che gestiscono questa richiesta.

    La funzione constructor ha questo aspetto: 

    (strategy: Strategy, options: HandlerCallbackOptions) => {...}

  • evento

    ExtendableEvent

  • parametri

    qualsiasi opzione facoltativa

  • richiesta

    Richiesta

  • url

    URL facoltativo

  • cacheMatch

    null

    Corrisponde a una richiesta proveniente dalla cache (e richiama qualsiasi plug-in applicabile di callback) usando i metodi cacheName, matchOptions e plugins definita nell'oggetto strategia.

    Quando si utilizza questo metodo, vengono richiamati i seguenti metodi per il ciclo di vita dei plug-in:

    • cacheKeyWillByUsed()
    • cachedResponseWillByUsed()

    La funzione cacheMatch ha questo aspetto: 

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

    • chiave

      RequestInfo

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

    • returns

      Promise&lt;Response&gt;

      Una risposta corrispondente, se trovata.

  • cachePut

    null

    Inserisci una coppia di richiesta/risposta nella cache (e richiama qualsiasi i metodi di callback del plug-in) utilizzando i valori cacheName e plugins definiti su l'oggetto strategia di offerta.

    Quando si utilizza questo metodo, vengono richiamati i seguenti metodi per il ciclo di vita dei plug-in:

    • cacheKeyWillByUsed()
    • cacheWillUpdate()
    • cacheDidUpdate()

    La funzione cachePut ha questo aspetto: 

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

    • chiave

      RequestInfo

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

    • risposta

      Risposta

      La risposta da memorizzare nella cache.

    • returns

      Promise&lt;boolean&gt;

      false se la risposta è stata causata da cacheWillUpdate non deve essere memorizzata nella cache, altrimenti true.

  • eliminare

    null

    Interrompe l'esecuzione della strategia e risolve immediatamente eventuali attività in sospeso waitUntil() promesse.

    La funzione destroy ha questo aspetto: 

    () => {...}

  • doneWaiting

    null

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

    Nota: qualsiasi lavoro svolto dopo la liquidazione di doneWaiting() deve essere manuale passati al metodo waitUntil() di un evento (non quello di questo gestore waitUntil()), altrimenti il thread del service worker verrà interrotto prima di completare il tuo lavoro.

    La funzione doneWaiting ha questo aspetto: 

    () => {...}

    • returns

      Promesso<void>

  • fetch

    null

    Recupera una determinata richiesta (e richiama qualsiasi callback di plug-in applicabile) (per le richieste non di navigazione) utilizzando fetchOptions (per le richieste non di navigazione) e plugins definita nell'oggetto Strategy.

    Quando si utilizza questo metodo, vengono richiamati i seguenti metodi per il ciclo di vita dei plug-in:

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

    La funzione fetch ha questo aspetto: 

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

    • input

      RequestInfo

      L'URL o la richiesta da recuperare.

    • returns

      Promise&lt;Response&gt;

  • fetchAndCachePut

    null

    Richiama this.fetch() e (in background) esegue this.cachePut() su la risposta generata da this.fetch().

    La chiamata a this.cachePut() richiama automaticamente this.waitUntil(), in modo da non dover chiamare manualmente waitUntil() per l'evento.

    La funzione fetchAndCachePut ha questo aspetto: 

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

    • input

      RequestInfo

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

    • returns

      Promise&lt;Response&gt;

  • getCacheKey

    null

    Controlla l'elenco dei plug-in per il callback cacheKeyWillBeUsed e esegue uno qualsiasi dei callback trovati in sequenza. Gli ultimi Request l'oggetto restituito dall'ultimo plug-in viene considerato la chiave cache per la cache operazioni di lettura e/o scrittura. Se nessun callback del plug-in cacheKeyWillBeUsed ha registrato, la richiesta passata viene restituita non modificata

    La funzione getCacheKey ha questo aspetto: 

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

    • richiesta

      Richiesta

    • modalità

      "leggi"
       | "scrivere"

    • returns

      Promise&lt;Request&gt;

  • hasCallback

    null

    Restituisce true se la strategia ha almeno un plug-in con il valore di Google.

    La funzione hasCallback ha questo aspetto: 

    (name: C) => {...}

    • nome

      C

      Il nome del callback da controllare.

    • returns

      booleano

  • iterateCallbacks

    null

    Accetta un callback e restituisce una serie di callback del plug-in corrispondenti, in cui ogni callback viene aggregato allo stato del gestore corrente (ad es. quando viene chiamato ogni callback, indipendentemente dal parametro oggetto unito allo stato attuale del plug-in).

    La funzione iterateCallbacks ha questo aspetto: 

    (name: C) => {...}

    • nome

      C

      Il nome del callback da eseguire

    • returns

      Generatore<NonNullable<indexedAccess>anyunknown>

  • runCallbacks

    null

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

    Nota: poiché questo metodo esegue tutti i plug-in, non è adatto per casi in cui il valore restituito di un callback deve essere applicato prima di chiamare al richiamo successivo. Consulta workbox-strategies.StrategyHandler#iterateCallbacks di seguito per istruzioni su come gestire questo caso.

    La funzione runCallbacks ha questo aspetto: 

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

    • nome

      C

      Il nome del callback da eseguire all'interno di ogni 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 lo stato attuale del plug-in prima dell'esecuzione del callback.

    • returns

      Promesso<void>

  • waitUntil

    null

    Aggiunge una promessa al campo [estendere le promesse per tutta la vita]https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises dell'evento associato alla richiesta da gestire (di solito un FetchEvent).

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

    La funzione waitUntil ha questo aspetto: 

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

    • promessa

      Promesso<T>

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

    • returns

      Promesso<T>

StrategyOptions

Proprietà

  • cacheName

    stringa facoltativo

  • fetchOptions

    RequestInit facoltativo

  • matchOptions

    CacheQueryOptions facoltativo

  • plugins

    WorkboxPlugin[] facoltativo