core box di lavoro

Workbox è stato progettato per essere modulare, consentendo agli sviluppatori di selezionare i pezzi da utilizzare senza costringere gli sviluppatori a scaricare tutti i dati in un singolo file.

Tuttavia, i moduli sono sovrapposti. Ad esempio, per ogni modulo deve interagire con la console, generare errori significativi e utilizzare la rete o la cache. Per evitare che ogni modulo implementi la stessa logica, workbox-core contiene questo codice comune su cui si basa ogni modulo.

Questo modulo fornisce alcune funzionalità agli sviluppatori, ma oltre a livelli di log e memorizzazione nella cache, workbox-core offre logica interna per ogni modulo, anziché per lo sviluppatore finale.

Visualizza e modifica i nomi predefiniti della cache

Workbox definisce le sue cache tramite cacheNames:

import {cacheNames} from 'workbox-core';

console.log(cacheNames.precache);
console.log(cacheNames.runtime);
console.log(cacheNames.googleAnalytics);

I nomi delle cache sono creati sotto il formato di un prefisso, un nome e un suffisso, dove il nome cambia in base all'uso della cache.

<prefix>-<cache-id>-<suffix>

Puoi cambiare questi nomi predefiniti modificando tutti o alcuni dei valori passati a setCacheNameDetails().

import {cacheNames, setCacheNameDetails} from 'workbox-core';

setCacheNameDetails({
  prefix: 'my-app',
  suffix: 'v1',
  precache: 'install-time',
  runtime: 'run-time',
  googleAnalytics: 'ga',
});

// Will print 'my-app-install-time-v1'
console.log(cacheNames.precache);

// Will print 'my-app-run-time-v1'
console.log(cacheNames.runtime);

// Will print 'my-app-ga-v1'
console.log(cacheNames.googleAnalytics);

Il caso d'uso principale per il prefisso e il suffisso è che, se utilizzi Workbox per più progetti e la stessa porta localhost per ogni progetto, l'impostazione di un prefisso personalizzato per ogni modulo evita che le cache creino conflitti tra loro.

Attestazione dei clienti

Alcuni sviluppatori vogliono poter pubblicare un nuovo service worker e fare in modo che controlli le pagine web già aperte non appena verrà attivato, cosa che non avverrà per impostazione predefinita.

Se pensi di volere questo comportamento, workbox-core ti offre un metodo di supporto:

import {clientsClaim} from 'workbox-core';

// This clientsClaim() should be at the top level
// of your service worker, not inside of, e.g.,
// an event handler.
clientsClaim();

Il metodo clientsClaim() in workbox-core aggiunge automaticamente un listener di eventi activate al service worker e al suo interno chiama self.clients.claim(). La chiamata a self.clients.claim() prima dell'attivazione del worker attuale del servizio comporterà un'eccezione di runtime e il wrapper di workbox-core aiuta a garantire la chiamata al momento giusto.

Il wrapper skipwait è deprecato

In precedenza, gli sviluppatori erano invitati a utilizzare il metodo skipWaiting() di workbox-core. Tuttavia, questo metodo offriva un valore scarso oltre a quello che gli sviluppatori otterrebbero se chiamassero self.skipWaiting() esplicitamente.

Poiché anche il wrapper workbox-core legacy ha registrato un gestore di eventi install in cui è stato chiamato self.skipWaiting(), il wrapper non si comportava come previsto se fosse stato chiamato all'interno di un altro gestore di eventi, come message, dopo il completamento dell'installazione.

Per questi motivi, skipWaiting() di workbox-core è deprecato e gli sviluppatori devono passare direttamente alle chiamate self.skipWaiting(). A differenza di self.clients.claim(), self.skipWaiting() non genera un'eccezione se viene richiamato nel momento "sbagliato", quindi non è necessario includerlo in un gestore di eventi.

Tipi

CacheDidUpdateCallback()

workbox-core.CacheDidUpdateCallback(
  param: CacheDidUpdateCallbackParam,
)

Parametri

Ritorni

  • Promise<void>

CacheDidUpdateCallbackParam

Proprietà

  • cacheName

    stringa

  • event

    ExtendableEvent

  • newResponse

    Risposta

  • oldResponse

    Risposta facoltativa

  • richiesta

    Richiesta

  • state

    MapLikeObject facoltativo

CachedResponseWillBeUsedCallback()

workbox-core.CachedResponseWillBeUsedCallback(
  param: CachedResponseWillBeUsedCallbackParam,
)

Parametri

Ritorni

  • Promise<void|Response>

CachedResponseWillBeUsedCallbackParam

Proprietà

  • cacheName

    stringa

  • cachedResponse

    Risposta facoltativa

  • event

    ExtendableEvent

  • matchOptions

    CacheQueryOptions facoltativo

  • richiesta

    Richiesta

  • state

    MapLikeObject facoltativo

CacheKeyWillBeUsedCallback()

workbox-core.CacheKeyWillBeUsedCallback(
  param: CacheKeyWillBeUsedCallbackParam,
)

Parametri

Ritorni

  • Promessa<string|Richiesta>

CacheKeyWillBeUsedCallbackParam

Proprietà

  • event

    ExtendableEvent

  • modalità

    stringa

  • params

    qualsiasi facoltativo

  • richiesta

    Richiesta

  • state

    MapLikeObject facoltativo

CacheWillUpdateCallback()

workbox-core.CacheWillUpdateCallback(
  param: CacheWillUpdateCallbackParam,
)

Parametri

Ritorni

  • Promise<void|Response>

CacheWillUpdateCallbackParam

Proprietà

  • event

    ExtendableEvent

  • richiesta

    Richiesta

  • risposta

    Risposta

  • state

    MapLikeObject facoltativo

FetchDidFailCallback()

workbox-core.FetchDidFailCallback(
  param: FetchDidFailCallbackParam,
)

Parametri

Ritorni

  • Promise<void>

FetchDidFailCallbackParam

Proprietà

  • errore

    Errore

  • event

    ExtendableEvent

  • originalRequest

    Richiesta

  • richiesta

    Richiesta

  • state

    MapLikeObject facoltativo

FetchDidSucceedCallback()

workbox-core.FetchDidSucceedCallback(
  param: FetchDidSucceedCallbackParam,
)

Parametri

Ritorni

  • Promessa<Risposta>

FetchDidSucceedCallbackParam

Proprietà

  • event

    ExtendableEvent

  • richiesta

    Richiesta

  • risposta

    Risposta

  • state

    MapLikeObject facoltativo

HandlerCallbackOptions

Enum

RouteHandlerCallbackOptions

ManualHandlerCallbackOptions

HandlerDidCompleteCallback()

workbox-core.HandlerDidCompleteCallback(
  param: HandlerDidCompleteCallbackParam,
)

Parametri

Ritorni

  • Promise<void>

HandlerDidCompleteCallbackParam

Proprietà

  • errore

    Errore facoltativo

  • event

    ExtendableEvent

  • richiesta

    Richiesta

  • risposta

    Risposta facoltativa

  • state

    MapLikeObject facoltativo

HandlerDidErrorCallback()

workbox-core.HandlerDidErrorCallback(
  param: HandlerDidErrorCallbackParam,
)

Parametri

Ritorni

  • Promessa<Risposta>

HandlerDidErrorCallbackParam

Proprietà

  • errore

    Errore

  • event

    ExtendableEvent

  • richiesta

    Richiesta

  • state

    MapLikeObject facoltativo

HandlerDidRespondCallback()

workbox-core.HandlerDidRespondCallback(
  param: HandlerDidRespondCallbackParam,
)

Parametri

Ritorni

  • Promise<void>

HandlerDidRespondCallbackParam

Proprietà

  • event

    ExtendableEvent

  • richiesta

    Richiesta

  • risposta

    Risposta facoltativa

  • state

    MapLikeObject facoltativo

HandlerWillRespondCallback()

workbox-core.HandlerWillRespondCallback(
  param: HandlerWillRespondCallbackParam,
)

Parametri

Ritorni

  • Promessa<Risposta>

HandlerWillRespondCallbackParam

Proprietà

  • event

    ExtendableEvent

  • richiesta

    Richiesta

  • risposta

    Risposta

  • state

    MapLikeObject facoltativo

HandlerWillStartCallback()

workbox-core.HandlerWillStartCallback(
  param: HandlerWillStartCallbackParam,
)

Parametri

Ritorni

  • Promise<void>

HandlerWillStartCallbackParam

Proprietà

  • event

    ExtendableEvent

  • richiesta

    Richiesta

  • state

    MapLikeObject facoltativo

ManualHandlerCallback()

workbox-core.ManualHandlerCallback(
  options: ManualHandlerCallbackOptions,
)

Il callback "handler" viene richiamato ogni volta che Router corrisponde a un URL o a una richiesta a un Route tramite RouteMatchCallback. Questo callback del gestore deve restituire un Promise che si risolve con un Response.

Se RouteMatchCallback restituisce un array o un oggetto non vuoto, verrà passato come argomento options.params di questo gestore.

Parametri

Ritorni

  • Promessa<Risposta>

ManualHandlerCallbackOptions

Opzioni passate a una funzione ManualHandlerCallback.

Proprietà

  • event

    ExtendableEvent

  • richiesta

    stringa|Richiesta

MapLikeObject

PluginState

Per il momento viene utilizzato un elemento MapLikeObject semplice, ma questa impostazione potrebbe essere estesa/limitata in futuro.

Tipo

MapLikeObject

RequestWillFetchCallback()

workbox-core.RequestWillFetchCallback(
  param: RequestWillFetchCallbackParam,
)

Parametri

Ritorni

  • Promessa<Richiesta>

RequestWillFetchCallbackParam

Proprietà

  • event

    ExtendableEvent

  • richiesta

    Richiesta

  • state

    MapLikeObject facoltativo

RouteHandler

Può essere un RouteHandlerCallback o un RouteHandlerObject. La maggior parte delle API in workbox-routing che accettano i gestori di route prende uno dei due.

Enum

RouteHandlerCallback

RouteHandlerObject

RouteHandlerCallback()

workbox-core.RouteHandlerCallback(
  options: RouteHandlerCallbackOptions,
)

Il callback "handler" viene richiamato ogni volta che Router corrisponde a un URL o a una richiesta a un Route tramite RouteMatchCallback. Questo callback del gestore deve restituire un Promise che si risolve con un Response.

Se RouteMatchCallback restituisce un array o un oggetto non vuoto, verrà passato come argomento options.params di questo gestore.

Parametri

Ritorni

  • Promessa<Risposta>

RouteHandlerCallbackOptions

Opzioni passate a una funzione RouteHandlerCallback.

Proprietà

  • event

    ExtendableEvent

  • params

    string[]|MapLikeObject facoltativo

  • richiesta

    Richiesta

  • url

    URL

RouteHandlerObject

Un oggetto con un metodo handle di tipo RouteHandlerCallback.

Un oggetto Route può essere creato con una funzione RouteHandlerCallback o questo oggetto RouteHandler. Il vantaggio di RouteHandler è che può essere esteso (come avviene dal pacchetto workbox-strategies).

Proprietà

RouteMatchCallback()

workbox-core.RouteMatchCallback(
  options: RouteMatchCallbackOptions,
)

Il callback "match" viene utilizzato per determinare se un Route deve essere applicato per un determinato URL e una determinata richiesta. Quando la corrispondenza avviene in risposta a un evento di recupero dal client, viene fornito anche l'oggetto event. Tuttavia, poiché il callback di corrispondenza può essere richiamato al di fuori di un evento di recupero, la logica di corrispondenza non dovrebbe presupporre che l'oggetto event sia sempre disponibile. Se il callback di corrispondenza restituisce un valore attendibile, il valore RouteHandlerCallback della route corrispondente verrà richiamato immediatamente. Se il valore restituito è un array o un oggetto non vuoto, questo valore verrà impostato nell'argomento options.params del gestore.

Parametri

Ritorni

  • Qualsiasi

RouteMatchCallbackOptions

Opzioni passate a una funzione RouteMatchCallback.

Proprietà

  • event

    ExtendableEvent

  • richiesta

    Richiesta

  • sameOrigin

    boolean

  • url

    URL

WorkboxPlugin

Oggetto con proprietà facoltative di callback del ciclo di vita per le operazioni di recupero e cache.

Proprietà

WorkboxPluginCallbackParam

Proprietà

Proprietà

cacheNames

Ottieni i nomi della cache e il prefisso/suffisso correnti utilizzati da Workbox.

cacheNames.precache viene utilizzato per gli asset pre-cache, cacheNames.googleAnalytics viene utilizzato da workbox-google-analytics per archiviare analytics.js e cacheNames.runtime viene utilizzato per tutto il resto.

cacheNames.prefix può essere utilizzato per recuperare solo il valore del prefisso attuale. cacheNames.suffix può essere utilizzato per recuperare solo il valore del suffisso attuale.

Tipo

oggetto

Proprietà

  • googleAnalytics

    stringa

  • pre-cache

    stringa

  • prefisso

    stringa

  • runtime

    stringa

  • suffisso

    stringa

Metodi

clientsClaim()

workbox-core.clientsClaim()

Rivendicare tutti i client attualmente disponibili quando il service worker diventa attivo. In genere viene utilizzato in combinazione con skipWaiting().

copyResponse()

workbox-core.copyResponse(
  response: Response,
  modifier?: function,
)

Consente agli sviluppatori di copiare una risposta e di modificarne i valori headers, status o statusText (i valori impostabili tramite un oggetto [ResponseInit]https://developer.mozilla.org/en-US/docs/Web/API/Response/Response#Syntax nel costruttore). Per modificare questi valori, aggiungi una funzione come secondo argomento. Questa funzione verrà richiamata con un singolo oggetto con le proprietà di risposta {headers, status, statusText}. Il valore restituito di questa funzione verrà utilizzato come ResponseInit per il nuovo Response. Per cambiare i valori, modifica i parametri passati e restituiscili oppure restituisci un oggetto completamente nuovo.

Questo metodo è intenzionalmente limitato alle risposte della stessa origine, indipendentemente dal fatto che sia stato utilizzato o meno CORS.

Parametri

  • risposta

    Risposta

  • modificatore

    funzione facoltativa

    Il parametro modifier ha il seguente aspetto: 

    (responseInit: ResponseInit)=>ResponseInit

    • responseInit

      ResponseInit

    • returns

      ResponseInit

Ritorni

  • Promessa<Risposta>

registerQuotaErrorCallback()

workbox-core.registerQuotaErrorCallback(
  callback: Function,
)

Aggiunge una funzione al set di quotaErrorCallbacks che verrà eseguita in caso di errore di quota.

Parametri

  • callback

    Funzione

setCacheNameDetails()

workbox-core.setCacheNameDetails(
  details: PartialCacheNameDetails,
)

Modifica i nomi predefiniti della cache utilizzati dai pacchetti Workbox. I nomi delle cache vengono generati come <prefix>-<Cache Name>-<suffix>.

Parametri

  • dettagli

    PartialCacheNameDetails

skipWaiting()

workbox-core.skipWaiting()

Questo metodo è obsoleto e verrà rimosso in Workbox v7.

La chiamata a self.skipPending() è equivalente e dovrebbe essere utilizzata al suo posto.