Workbox è stato progettato per essere modulare, consentendo agli sviluppatori di selezionare i componenti che vogliono utilizzare senza dover scaricare tutto in un unico file.
Tuttavia, esiste una sovrapposizione tra i moduli, ad esempio ogni modulo dovrà 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 ai livelli di log e alla memorizzazione nella cache, workbox-core
offre la logica interna a ogni modulo, piuttosto che allo sviluppatore finale.
Visualizzare e modificare i nomi della cache predefiniti
Workbox definisce le proprie cache tramite cacheNames
:
import {cacheNames} from 'workbox-core';
console.log(cacheNames.precache);
console.log(cacheNames.runtime);
console.log(cacheNames.googleAnalytics);
Questi nomi della cache sono costituiti da un prefisso, un nome e un suffisso, dove il nome cambia in base all'utilizzo della cache.
<prefix>-<cache-id>-<suffix>
Puoi modificare 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 impedirà alle cache di entrare in conflitto tra loro.
Dichiarazione dei clienti
Alcuni sviluppatori vogliono poter pubblicare un nuovo worker di servizio e controllarne subito il funzionamento non appena viene attivato, cosa che non accade per impostazione predefinita.
Se vuoi questo comportamento, workbox-core
fornisce un metodo di assistenza:
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 activate
listener di eventi al tuo service worker e al suo interno chiama
self.clients.claim()
. La chiamata a self.clients.claim()
prima dell'attivazione dell'attuale worker del servizio comporterà un'eccezione di runtime e il wrapper di workbox-core
ti aiuta ad assicurarti di chiamarlo al momento giusto.
L'wrapper skipWaiting è deprecato
Prima della versione 6 di Workbox, gli sviluppatori erano anche incoraggiati a utilizzare il metodo skipWaiting()
di workbox-core
. Tuttavia, questo metodo offriva poco valore oltre a quanto ottenuto dagli sviluppatori se avessero chiamato self.skipWaiting()
esplicitamente.
Poiché il wrapper workbox-core
precedente registrava anche un gestore di eventi install
in cui veniva chiamato self.skipWaiting()
, il wrapper non si comportava come previsto
se veniva chiamato all'interno di un altro gestore di eventi, come message
, dopo che l'installazione
era già stata completata.
Per questi motivi, skipWaiting()
di workbox-core
è deprecato e gli sviluppatori devono passare a chiamare direttamente self.skipWaiting()
. A differenza di self.clients.claim()
, self.skipWaiting()
non genera un'eccezione se viene chiamato al momento "sbagliato", quindi non è necessario racchiuderlo in un gestore eventi.
Tipi
CacheDidUpdateCallback()
workbox-core.CacheDidUpdateCallback(
param: CacheDidUpdateCallbackParam,
)
Parametri
Resi
-
Promise<void>
CacheDidUpdateCallbackParam
Proprietà
-
cacheName
stringa
-
evento
ExtendableEvent
-
newResponse
Risposta
-
oldResponse
Risposta facoltativa
-
richiesta
Richiesta
-
stato
MapLikeObject facoltativo
CachedResponseWillBeUsedCallback()
workbox-core.CachedResponseWillBeUsedCallback(
param: CachedResponseWillBeUsedCallbackParam,
)
Parametri
Resi
-
Promise<void | Response>
CachedResponseWillBeUsedCallbackParam
Proprietà
-
cacheName
stringa
-
cachedResponse
Risposta facoltativa
-
evento
ExtendableEvent
-
matchOptions
CacheQueryOptions facoltativo
-
richiesta
Richiesta
-
stato
MapLikeObject facoltativo
CacheKeyWillBeUsedCallback()
workbox-core.CacheKeyWillBeUsedCallback(
param: CacheKeyWillBeUsedCallbackParam,
)
Parametri
Resi
-
Promise<string | Request>
CacheKeyWillBeUsedCallbackParam
Proprietà
-
evento
ExtendableEvent
-
modalità
stringa
-
params
qualsiasi facoltativo
-
richiesta
Richiesta
-
stato
MapLikeObject facoltativo
CacheWillUpdateCallback()
workbox-core.CacheWillUpdateCallback(
param: CacheWillUpdateCallbackParam,
)
Parametri
Resi
-
Promise<void | Response>
CacheWillUpdateCallbackParam
Proprietà
-
evento
ExtendableEvent
-
richiesta
Richiesta
-
risposta
Risposta
-
stato
MapLikeObject facoltativo
FetchDidFailCallback()
workbox-core.FetchDidFailCallback(
param: FetchDidFailCallbackParam,
)
Parametri
Resi
-
Promise<void>
FetchDidFailCallbackParam
Proprietà
-
errore
Errore
-
evento
ExtendableEvent
-
originalRequest
Richiesta
-
richiesta
Richiesta
-
stato
MapLikeObject facoltativo
FetchDidSucceedCallback()
workbox-core.FetchDidSucceedCallback(
param: FetchDidSucceedCallbackParam,
)
Parametri
Resi
-
Promise<Response>
FetchDidSucceedCallbackParam
Proprietà
-
evento
ExtendableEvent
-
richiesta
Richiesta
-
risposta
Risposta
-
stato
MapLikeObject facoltativo
HandlerCallbackOptions
HandlerDidCompleteCallback()
workbox-core.HandlerDidCompleteCallback(
param: HandlerDidCompleteCallbackParam,
)
Parametri
Resi
-
Promise<void>
HandlerDidCompleteCallbackParam
Proprietà
-
errore
Errore facoltativo
-
evento
ExtendableEvent
-
richiesta
Richiesta
-
risposta
Risposta facoltativa
-
stato
MapLikeObject facoltativo
HandlerDidErrorCallback()
workbox-core.HandlerDidErrorCallback(
param: HandlerDidErrorCallbackParam,
)
Parametri
Resi
-
Promise<Response>
HandlerDidErrorCallbackParam
Proprietà
-
errore
Errore
-
evento
ExtendableEvent
-
richiesta
Richiesta
-
stato
MapLikeObject facoltativo
HandlerDidRespondCallback()
workbox-core.HandlerDidRespondCallback(
param: HandlerDidRespondCallbackParam,
)
Parametri
Resi
-
Promise<void>
HandlerDidRespondCallbackParam
Proprietà
-
evento
ExtendableEvent
-
richiesta
Richiesta
-
risposta
Risposta facoltativa
-
stato
MapLikeObject facoltativo
HandlerWillRespondCallback()
workbox-core.HandlerWillRespondCallback(
param: HandlerWillRespondCallbackParam,
)
Parametri
Resi
-
Promise<Response>
HandlerWillRespondCallbackParam
Proprietà
-
evento
ExtendableEvent
-
richiesta
Richiesta
-
risposta
Risposta
-
stato
MapLikeObject facoltativo
HandlerWillStartCallback()
workbox-core.HandlerWillStartCallback(
param: HandlerWillStartCallbackParam,
)
Parametri
Resi
-
Promise<void>
HandlerWillStartCallbackParam
Proprietà
-
evento
ExtendableEvent
-
richiesta
Richiesta
-
stato
MapLikeObject facoltativo
ManualHandlerCallback()
workbox-core.ManualHandlerCallback(
options: ManualHandlerCallbackOptions,
)
Il callback "handler" viene invocato ogni volta che un Router
corrisponde a un URL/una richiesta
a un Route
tramite il relativo 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, questo verrà passato come argomento options.params
di questo gestore.
Parametri
-
opzioni
Resi
-
Promise<Response>
ManualHandlerCallbackOptions
Opzioni passate a una funzione ManualHandlerCallback
.
Proprietà
-
evento
ExtendableEvent
-
richiesta
stringa | Richiesta
MapLikeObject
PluginState
Per il momento viene utilizzato un semplice MapLikeObject
, ma in futuro potremmo estendere/limitare questa opzione.
Tipo
RequestWillFetchCallback()
workbox-core.RequestWillFetchCallback(
param: RequestWillFetchCallbackParam,
)
Parametri
Resi
-
Promise<Request>
RequestWillFetchCallbackParam
Proprietà
-
evento
ExtendableEvent
-
richiesta
Richiesta
-
stato
MapLikeObject facoltativo
RouteHandler
RouteHandlerCallback
o RouteHandlerObject
.
La maggior parte delle API in workbox-routing
che accettano gestori di route accettano entrambi.
RouteHandlerCallback()
workbox-core.RouteHandlerCallback(
options: RouteHandlerCallbackOptions,
)
Il callback "handler" viene invocato ogni volta che un Router
corrisponde a un URL/una richiesta
a un Route
tramite il relativo 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, questo verrà passato come argomento options.params
di questo gestore.
Parametri
-
opzioni
Resi
-
Promise<Response>
RouteHandlerCallbackOptions
Opzioni passate a una funzione RouteHandlerCallback
.
Proprietà
-
evento
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 con questo oggetto RouteHandler
. Il vantaggio di RouteHandler
è che può essere esteso (come avviene con il pacchetto workbox-strategies
).
Proprietà
-
handle
RouteMatchCallback()
workbox-core.RouteMatchCallback(
options: RouteMatchCallbackOptions,
)
Il callback "match" viene utilizzato per determinare se un Route
deve essere applicato per un determinato URL e richiesta. Quando la corrispondenza si verifica in risposta a un evento di recupero dal client, viene fornito anche l'oggetto event
. Tuttavia, poiché il callback di corrispondenza può essere invocato al di fuori di un evento di recupero, la logica di corrispondenza non deve presupporre che l'oggetto event
sarà sempre disponibile.
Se il callback di corrispondenza restituisce un valore vero, il valore corrispondenteRouteHandlerCallback
della route verrà invocato immediatamente. Se il valore restituito è un array o un oggetto non vuoto, verrà impostato sull'argomento options.params
dell'handler.
Parametri
-
opzioni
Resi
-
qualsiasi
RouteMatchCallbackOptions
Opzioni passate a una funzione RouteMatchCallback
.
Proprietà
-
evento
ExtendableEvent
-
richiesta
Richiesta
-
sameOrigin
booleano
-
url
URL
WorkboxPlugin
Un oggetto con proprietà di callback del ciclo di vita facoltative per le operazioni di recupero e memorizzazione nella cache.
Proprietà
-
cacheDidUpdate
CacheDidUpdateCallback facoltativo
-
cacheKeyWillBeUsed
CacheKeyWillBeUsedCallback facoltativo
-
cacheWillUpdate
CacheWillUpdateCallback facoltativo
-
cachedResponseWillBeUsed
CachedResponseWillBeUsedCallback facoltativo
-
fetchDidFail
FetchDidFailCallback facoltativo
-
fetchDidSucceed
FetchDidSucceedCallback facoltativo
-
handlerDidComplete
HandlerDidCompleteCallback facoltativo
-
handlerDidError
HandlerDidErrorCallback facoltativo
-
handlerDidRespond
HandlerDidRespondCallback facoltativo
-
handlerWillRespond
HandlerWillRespondCallback facoltativo
-
handlerWillStart
HandlerWillStartCallback facoltativo
-
requestWillFetch
RequestWillFetchCallback facoltativo
WorkboxPluginCallbackParam
Proprietà
-
cacheDidUpdate
-
cacheKeyWillBeUsed
-
cacheWillUpdate
-
cachedResponseWillBeUsed
-
fetchDidFail
-
fetchDidSucceed
-
handlerDidComplete
-
handlerDidError
-
handlerDidRespond
-
handlerWillRespond
-
handlerWillStart
-
requestWillFetch
Proprietà
cacheNames
Recupera i nomi e il prefisso/suffisso della cache corrente utilizzati da Workbox.
cacheNames.precache
viene utilizzato per gli asset pre-memorizzati nella cache,
cacheNames.googleAnalytics
viene utilizzato da workbox-google-analytics
per memorizzare analytics.js
e cacheNames.runtime
viene utilizzato per tutto il resto.
cacheNames.prefix
può essere utilizzato per recuperare solo il valore del prefisso corrente.
cacheNames.suffix
può essere utilizzato per recuperare solo il valore del suffisso corrente.
Tipo
oggetto
Proprietà
-
googleAnalytics
stringa
-
precache
stringa
-
prefisso
stringa
-
runtime
stringa
-
suffisso
stringa
Metodi
clientsClaim()
workbox-core.clientsClaim()
Rivendica tutti i clienti attualmente disponibili una volta che il servizio worker diventa attivo. Questo attributo viene normalmente utilizzato in combinazione con skipWaiting()
.
copyResponse()
workbox-core.copyResponse(
response: Response,
modifier?: function,
)
Consente agli sviluppatori di copiare una risposta e 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, passa una funzione come secondo argomento. Questa funzione verrà richiamata con un singolo oggetto con le proprietà di risposta{headers, status, statusText}
. Il valore restituito da questa funzione verrà utilizzato come ResponseInit
per il nuovo Response
. Per modificare i valori, modifica i parametri passati e restituiscili oppure restituisci un oggetto completamente nuovo.
Questo metodo è intenzionalmente limitato alle risposte dello stesso dominio, indipendentemente dall'utilizzo o meno di CORS.
Parametri
-
risposta
Risposta
-
modificatore
function facoltativa
Il parametro
modifier
ha il seguente aspetto:(responseInit: ResponseInit) => ResponseInit
-
responseInit
ResponseInit
-
returns
ResponseInit
-
Resi
-
Promise<Response>
registerQuotaErrorCallback()
workbox-core.registerQuotaErrorCallback(
callback: Function,
)
Aggiunge una funzione all'insieme di quotaErrorCallbacks che verrà eseguita se si verifica un errore di quota.
Parametri
-
callback
Funzione
setCacheNameDetails()
workbox-core.setCacheNameDetails(
details: PartialCacheNameDetails,
)
Modifica i nomi delle cache predefinite utilizzati dai pacchetti Workbox.
I nomi della cache vengono generati come <prefix>-<Cache Name>-<suffix>
.
Parametri
-
dettagli
PartialCacheNameDetails
skipWaiting()
workbox-core.skipWaiting()
Questo metodo è deprecato e verrà rimosso nella versione 7 di Workbox.
La chiamata a self.skipWaiting() è equivalente e deve essere utilizzata al suo posto.