Quando os service workers foram introduzidos pela primeira vez, surgiu um conjunto de estratégias comuns de armazenamento em cache. Uma estratégia de armazenamento em cache é um padrão que determina como um service worker gera uma resposta depois de receber um evento de busca.
workbox-strategies
fornece as estratégias de armazenamento em cache mais comuns para que seja fácil
aplicá-las ao service worker.
Não entraremos em muitos detalhes além das estratégias disponíveis no Workbox, mas você pode saber mais no Manual off-line.
Como usar estratégias
Nos exemplos a seguir, vamos mostrar como usar as estratégias de armazenamento em cache
do Workbox com o workbox-routing
. Há algumas opções que podem ser definidas em cada estratégia. Elas são abordadas na seção de configuração de estratégias deste documento.
Na seção Uso avançado, você vai aprender a usar
as estratégias de armazenamento em cache diretamente sem workbox-routing
.
Desatualizado ao revalidar
O padrão stale-while-revalidate permite responder à solicitação o mais rápido possível com uma resposta em cache, se disponível, retornando à solicitação de rede se não estiver armazenada. Em seguida, a solicitação de rede é usada para atualizar o cache. Ao contrário de algumas implementações de inatividade durante a revalidação, essa estratégia sempre faz uma solicitação de revalidação, independente da idade da resposta armazenada em cache.
Essa é uma estratégia bastante comum em que ter o recurso mais atualizado não é vital para o aplicativo.
import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
registerRoute(
({url}) => url.pathname.startsWith('/images/avatars/'),
new StaleWhileRevalidate()
);
Cache primeiro (cache que retorna à rede)
Os apps da Web off-line dependem muito do cache. No entanto, para recursos que não são essenciais e podem ser armazenados em cache gradualmente, a melhor opção é primeiro cache.
Se houver uma Resposta no cache, a solicitação será atendida usando a resposta armazenada em cache, e a rede não será usada. Se não houver uma resposta em cache, a solicitação será atendida por uma solicitação de rede e a resposta será armazenada em cache para que a próxima solicitação seja atendida diretamente do cache.
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
registerRoute(({request}) => request.destination === 'style', new CacheFirst());
Priorização da rede (rede que retorna ao cache)
Para solicitações que são atualizadas com frequência, a estratégia priorizar a rede é a solução ideal. Por padrão, ele tentará buscar a resposta mais recente da rede. Se a solicitação for bem-sucedida, a resposta será armazenada no cache. Se a rede não retornar uma resposta, a resposta armazenada em cache será usada.
import {registerRoute} from 'workbox-routing';
import {NetworkFirst} from 'workbox-strategies';
registerRoute(
({url}) => url.pathname.startsWith('/social-timeline/'),
new NetworkFirst()
);
Somente rede
Se você precisar que solicitações específicas sejam atendidas a partir da rede, a estratégia a ser usada é somente rede.
import {registerRoute} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';
registerRoute(({url}) => url.pathname.startsWith('/admin/'), new NetworkOnly());
Somente cache
A estratégia somente cache garante que as respostas sejam recebidas de um cache. Isso é menos comum na caixa de trabalho, mas pode ser útil se você tiver sua própria etapa de pré-armazenamento em cache.
import {registerRoute} from 'workbox-routing';
import {CacheOnly} from 'workbox-strategies';
registerRoute(({url}) => url.pathname.startsWith('/app/v2/'), new CacheOnly());
Como configurar estratégias
Todas as estratégias permitem que você configure:
- O nome do cache a ser usado na estratégia.
- Restrições de expiração do cache a serem usadas na estratégia.
- Uma matriz de plug-ins que terão os métodos de ciclo de vida chamados ao buscar e armazenar em cache uma solicitação.
Alterar o cache usado por uma estratégia
Você pode alterar o cache de uma estratégia usada fornecendo um nome para o cache. Isso é útil se você quiser separar seus recursos para ajudar na depuração.
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
registerRoute(
({request}) => request.destination === 'image',
new CacheFirst({
cacheName: 'image-cache',
})
);
Usar de plug-ins
O Workbox vem com um conjunto de plug-ins que podem ser usados com essas estratégias.
- workbox-background-sync
- workbox-broadcast-update (link em inglês)
- workbox-cacheable-response (em inglês)
- workbox-expiration (em inglês)
- workbox-range-requests (link em inglês)
Para usar qualquer um desses plug-ins (ou um plug-in personalizado), basta transmitir as instâncias para a opção 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,
}),
],
})
);
Estratégias personalizadas
Além de configurar estratégias, o Workbox permite criar suas próprias estratégias personalizadas.
Isso pode ser feito importando e estendendo a classe base Strategy
de workbox-strategies
:
import {Strategy} from 'workbox-strategies';
class NewStrategy extends Strategy {
_handle(request, handler) {
// Define handling logic here
}
}
Neste exemplo, handle()
é usado como uma estratégia de solicitação para definir uma lógica de processamento específica. É possível usar duas estratégias de solicitação:
handle()
: executa uma estratégia de solicitação e retorna umPromise
que será resolvido com umResponse
, invocando todos os callbacks de plug-in relevantes.handleAll()
: semelhante ahandle()
, mas retorna dois objetosPromise
. A primeira é equivalente ao quehandle()
retorna, e a segunda é resolvida quando as promessas que foram adicionadas aevent.waitUntil()
na estratégia forem concluídas.
Ambas as estratégias de solicitação são invocadas com dois parâmetros:
request
: aRequest
para a qual a estratégia vai retornar uma resposta.handler
: uma instânciaStrategyHandler
criada automaticamente para a estratégia atual.
Criação de uma nova estratégia
Este é um exemplo de uma nova estratégia que reimplementa o comportamento de NetworkOnly
:
class NewNetworkOnlyStrategy extends Strategy {
_handle(request, handler) {
return handler.fetch(request);
}
}
Observe como handler.fetch()
é chamado em vez do método fetch
nativo. A classe
StrategyHandler
fornece várias ações de busca e cache que podem ser usadas sempre que handle()
ou
handleAll()
é usado:
fetch
: busca uma determinada solicitação e invoca os métodos de ciclo de vida do plug-inrequestWillFetch()
,fetchDidSucceed()
efetchDidFail()
.cacheMatch
: faz a correspondência de uma solicitação do cache e invoca os métodos de ciclo de vida do plug-incacheKeyWillBeUsed()
ecachedResponseWillBeUsed()
.cachePut
: coloca um par de solicitação/resposta no cache e invoca os métodos de ciclo de vida do plug-incacheKeyWillBeUsed()
,cacheWillUpdate()
ecacheDidUpdate()
.fetchAndCachePut
: chamafetch()
e executacachePut()
em segundo plano na resposta gerada porfetch()
.hasCallback
: recebe um callback como entrada e retorna "true" se a estratégia tiver pelo menos um plug-in com o callback especificado.runCallbacks
: executa todos os callbacks do plug-in correspondentes a um determinado nome, em ordem, transmitindo um determinado objeto de parâmetro (mesclado com o estado atual do plug-in) como o único argumento.iterateCallbacks
: aceita um callback e retorna um iterável de callbacks do plug-in correspondentes, em que cada callback é encapsulado com o estado atual do gerenciador (ou seja, quando você chama cada callback, qualquer parâmetro de objeto transmitido será mesclado com o estado atual do plug-in).waitUntil
: adiciona uma promessa às promessas de vida útil estendidas do evento associado à solicitação que está sendo processada (geralmente umFetchEvent
).doneWaiting
: retorna uma promessa que é resolvida quando todas as promessas passadas parawaitUntil()
são resolvidas.destroy
: interrompe a execução da estratégia e resolve imediatamente todas as promessas dewaitUntil()
pendentes.
Estratégia de corrida da rede de cache personalizada
O exemplo a seguir é baseado no cache-network-race do Manual off-line (que não é fornecido pelo Workbox), mas vai além e sempre atualiza o cache após uma solicitação de rede bem-sucedida. Isso é um exemplo de uma estratégia mais complexa que usa várias ações.
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);
}
}
);
});
}
}
Uso avançado
Se você quiser usar as estratégias em sua própria lógica de eventos de busca, poderá usar as classes de estratégia para executar uma solicitação com uma estratégia específica.
Por exemplo, para usar a estratégia de inatividade durante a revalidação, você pode fazer o seguinte:
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}));
}
});
Confira a lista de classes disponíveis nos documentos de referência de estratégias de caixa de trabalho.
Tipos
CacheFirst
Uma implementação de uma estratégia de solicitação que prioriza o cache.
Uma estratégia de priorização do cache é útil para recursos que foram revisados,
como URLs como /styles/example.a8f5f1.css
, já que eles
podem ser armazenados em cache por longos períodos.
Se a solicitação de rede falhar e não houver correspondência de cache, uma exceção WorkboxError
será gerada.
Propriedades
-
construtor
void
Cria uma nova instância da estratégia e define todas as propriedades da opção documentada como propriedades de instância pública.
Observação: se uma classe de estratégia personalizada estender a classe de base Strategy e não precisar de mais do que essas propriedades, ela não vai precisar definir o próprio construtor.
A função
constructor
tem esta aparência:(options?: StrategyOptions) => {...}
-
do modelo.
StrategyOptions opcional
-
retorna
-
-
cacheName
string
-
fetchOptions
RequestInit opcional
-
matchOptions
CacheQueryOptions opcional
-
plugins
-
_awaitComplete
void
A função
_awaitComplete
tem esta aparência:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promessa<Resposta>
-
handler
-
request
Solicitação
-
event
ExtendableEvent
-
retorna
Promise<void>
-
-
_getResponse
void
A função
_getResponse
tem esta aparência:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
request
Solicitação
-
event
ExtendableEvent
-
retorna
Promessa<Resposta>
-
-
identificador
void
Executa uma estratégia de solicitação e retorna um
Promise
que será resolvido com umResponse
, invocando todos os callbacks de plug-in relevantes.Quando uma instância de estratégia é registrada com um Workbox
workbox-routing.Route
, esse método é chamado automaticamente quando a rota corresponde.Como alternativa, esse método pode ser usado em um listener
FetchEvent
independente, transmitindo-o paraevent.respondWith()
.A função
handle
tem esta aparência:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
do modelo.
FetchEvent | HandlerCallbackOptions
Um
FetchEvent
ou um objeto com as propriedades listadas abaixo.
-
retorna
Promessa<Resposta>
-
-
handleAll
void
Semelhante a
workbox-strategies.Strategy~handle
, mas em vez de apenas retornar umPromise
que é resolvido para umResponse
, ele vai retornar uma tupla de promessas[response, done]
, em que a primeira (response
) é equivalente ao quehandle()
retorna, e a última é uma promessa que será resolvida quando todas as promessas que foram adicionadas aevent.waitUntil()
como parte da execução da estratégia forem concluídas.Aguarde a promessa
done
para garantir que qualquer trabalho extra realizado pela estratégia (geralmente respostas em cache) seja concluído com êxito.A função
handleAll
tem esta aparência:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
do modelo.
FetchEvent | HandlerCallbackOptions
Um
FetchEvent
ou um objeto com as propriedades listadas abaixo.
-
retorna
[Promise<Response>, Promise<void>]
Uma tupla de promessas [response,done] que pode ser usada para determinar quando a resposta é resolvida, bem como quando o gerenciador concluiu todo o trabalho.
-
CacheOnly
Uma implementação de uma estratégia de solicitação somente cache.
Essa classe é útil se você quiser aproveitar os plug-ins do Workbox.
Se não houver correspondência de cache, uma exceção WorkboxError
será gerada.
Propriedades
-
construtor
void
Cria uma nova instância da estratégia e define todas as propriedades da opção documentada como propriedades de instância pública.
Observação: se uma classe de estratégia personalizada estender a classe de base Strategy e não precisar de mais do que essas propriedades, ela não vai precisar definir o próprio construtor.
A função
constructor
tem esta aparência:(options?: StrategyOptions) => {...}
-
do modelo.
StrategyOptions opcional
-
retorna
-
-
cacheName
string
-
fetchOptions
RequestInit opcional
-
matchOptions
CacheQueryOptions opcional
-
plugins
-
_awaitComplete
void
A função
_awaitComplete
tem esta aparência:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promessa<Resposta>
-
handler
-
request
Solicitação
-
event
ExtendableEvent
-
retorna
Promise<void>
-
-
_getResponse
void
A função
_getResponse
tem esta aparência:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
request
Solicitação
-
event
ExtendableEvent
-
retorna
Promessa<Resposta>
-
-
identificador
void
Executa uma estratégia de solicitação e retorna um
Promise
que será resolvido com umResponse
, invocando todos os callbacks de plug-in relevantes.Quando uma instância de estratégia é registrada com um Workbox
workbox-routing.Route
, esse método é chamado automaticamente quando a rota corresponde.Como alternativa, esse método pode ser usado em um listener
FetchEvent
independente, transmitindo-o paraevent.respondWith()
.A função
handle
tem esta aparência:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
do modelo.
FetchEvent | HandlerCallbackOptions
Um
FetchEvent
ou um objeto com as propriedades listadas abaixo.
-
retorna
Promessa<Resposta>
-
-
handleAll
void
Semelhante a
workbox-strategies.Strategy~handle
, mas em vez de apenas retornar umPromise
que é resolvido para umResponse
, ele vai retornar uma tupla de promessas[response, done]
, em que a primeira (response
) é equivalente ao quehandle()
retorna, e a última é uma promessa que será resolvida quando todas as promessas que foram adicionadas aevent.waitUntil()
como parte da execução da estratégia forem concluídas.Aguarde a promessa
done
para garantir que qualquer trabalho extra realizado pela estratégia (geralmente respostas em cache) seja concluído com êxito.A função
handleAll
tem esta aparência:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
do modelo.
FetchEvent | HandlerCallbackOptions
Um
FetchEvent
ou um objeto com as propriedades listadas abaixo.
-
retorna
[Promise<Response>, Promise<void>]
Uma tupla de promessas [response,done] que pode ser usada para determinar quando a resposta é resolvida, bem como quando o gerenciador concluiu todo o trabalho.
-
NetworkFirst
Uma implementação de uma estratégia de solicitação de priorização da rede.
Por padrão, essa estratégia armazenará em cache as respostas com um código de status 200, bem como respostas opacas. Respostas opacas são solicitações de origem cruzada em que a resposta não é compatível com o CORS.
Se a solicitação de rede falhar e não houver correspondência de cache, uma exceção WorkboxError
será gerada.
Propriedades
-
construtor
void
A função
constructor
tem esta aparência:(options?: NetworkFirstOptions) => {...}
-
do modelo.
NetworkFirstOptions opcional
-
retorna
-
-
cacheName
string
-
fetchOptions
RequestInit opcional
-
matchOptions
CacheQueryOptions opcional
-
plugins
-
_awaitComplete
void
A função
_awaitComplete
tem esta aparência:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promessa<Resposta>
-
handler
-
request
Solicitação
-
event
ExtendableEvent
-
retorna
Promise<void>
-
-
_getResponse
void
A função
_getResponse
tem esta aparência:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
request
Solicitação
-
event
ExtendableEvent
-
retorna
Promessa<Resposta>
-
-
identificador
void
Executa uma estratégia de solicitação e retorna um
Promise
que será resolvido com umResponse
, invocando todos os callbacks de plug-in relevantes.Quando uma instância de estratégia é registrada com um Workbox
workbox-routing.Route
, esse método é chamado automaticamente quando a rota corresponde.Como alternativa, esse método pode ser usado em um listener
FetchEvent
independente, transmitindo-o paraevent.respondWith()
.A função
handle
tem esta aparência:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
do modelo.
FetchEvent | HandlerCallbackOptions
Um
FetchEvent
ou um objeto com as propriedades listadas abaixo.
-
retorna
Promessa<Resposta>
-
-
handleAll
void
Semelhante a
workbox-strategies.Strategy~handle
, mas em vez de apenas retornar umPromise
que é resolvido para umResponse
, ele vai retornar uma tupla de promessas[response, done]
, em que a primeira (response
) é equivalente ao quehandle()
retorna, e a última é uma promessa que será resolvida quando todas as promessas que foram adicionadas aevent.waitUntil()
como parte da execução da estratégia forem concluídas.Aguarde a promessa
done
para garantir que qualquer trabalho extra realizado pela estratégia (geralmente respostas em cache) seja concluído com êxito.A função
handleAll
tem esta aparência:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
do modelo.
FetchEvent | HandlerCallbackOptions
Um
FetchEvent
ou um objeto com as propriedades listadas abaixo.
-
retorna
[Promise<Response>, Promise<void>]
Uma tupla de promessas [response,done] que pode ser usada para determinar quando a resposta é resolvida, bem como quando o gerenciador concluiu todo o trabalho.
-
NetworkFirstOptions
Propriedades
-
cacheName
string opcional
-
fetchOptions
RequestInit opcional
-
matchOptions
CacheQueryOptions opcional
-
networkTimeoutSeconds
número opcional
-
plugins
WorkboxPlugin[] opcional
NetworkOnly
Uma implementação de uma estratégia de solicitação somente rede.
Essa classe é útil se você quiser aproveitar os plug-ins do Workbox.
Se a solicitação de rede falhar, uma exceção WorkboxError
será gerada.
Propriedades
-
construtor
void
A função
constructor
tem esta aparência:(options?: NetworkOnlyOptions) => {...}
-
do modelo.
NetworkOnlyOptions opcional
-
retorna
-
-
cacheName
string
-
fetchOptions
RequestInit opcional
-
matchOptions
CacheQueryOptions opcional
-
plugins
-
_awaitComplete
void
A função
_awaitComplete
tem esta aparência:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promessa<Resposta>
-
handler
-
request
Solicitação
-
event
ExtendableEvent
-
retorna
Promise<void>
-
-
_getResponse
void
A função
_getResponse
tem esta aparência:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
request
Solicitação
-
event
ExtendableEvent
-
retorna
Promessa<Resposta>
-
-
identificador
void
Executa uma estratégia de solicitação e retorna um
Promise
que será resolvido com umResponse
, invocando todos os callbacks de plug-in relevantes.Quando uma instância de estratégia é registrada com um Workbox
workbox-routing.Route
, esse método é chamado automaticamente quando a rota corresponde.Como alternativa, esse método pode ser usado em um listener
FetchEvent
independente, transmitindo-o paraevent.respondWith()
.A função
handle
tem esta aparência:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
do modelo.
FetchEvent | HandlerCallbackOptions
Um
FetchEvent
ou um objeto com as propriedades listadas abaixo.
-
retorna
Promessa<Resposta>
-
-
handleAll
void
Semelhante a
workbox-strategies.Strategy~handle
, mas em vez de apenas retornar umPromise
que é resolvido para umResponse
, ele vai retornar uma tupla de promessas[response, done]
, em que a primeira (response
) é equivalente ao quehandle()
retorna, e a última é uma promessa que será resolvida quando todas as promessas que foram adicionadas aevent.waitUntil()
como parte da execução da estratégia forem concluídas.Aguarde a promessa
done
para garantir que qualquer trabalho extra realizado pela estratégia (geralmente respostas em cache) seja concluído com êxito.A função
handleAll
tem esta aparência:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
do modelo.
FetchEvent | HandlerCallbackOptions
Um
FetchEvent
ou um objeto com as propriedades listadas abaixo.
-
retorna
[Promise<Response>, Promise<void>]
Uma tupla de promessas [response,done] que pode ser usada para determinar quando a resposta é resolvida, bem como quando o gerenciador concluiu todo o trabalho.
-
NetworkOnlyOptions
Propriedades
-
fetchOptions
RequestInit opcional
-
networkTimeoutSeconds
número opcional
-
plugins
WorkboxPlugin[] opcional
StaleWhileRevalidate
Uma implementação de uma estratégia de solicitação stale-while-revalidate.
Os recursos são solicitados do cache e da rede em paralelo. A estratégia vai responder com a versão em cache, se disponível. Caso contrário, aguarde a resposta da rede. O cache é atualizado com a resposta da rede a cada solicitação bem-sucedida.
Por padrão, essa estratégia armazenará em cache as respostas com um código de status 200, bem como respostas opacas. Respostas opacas são solicitações de origem cruzada em que a resposta não é compatível com o CORS.
Se a solicitação de rede falhar e não houver correspondência de cache, uma exceção WorkboxError
será gerada.
Propriedades
-
construtor
void
A função
constructor
tem esta aparência:(options?: StrategyOptions) => {...}
-
do modelo.
StrategyOptions opcional
-
retorna
-
-
cacheName
string
-
fetchOptions
RequestInit opcional
-
matchOptions
CacheQueryOptions opcional
-
plugins
-
_awaitComplete
void
A função
_awaitComplete
tem esta aparência:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promessa<Resposta>
-
handler
-
request
Solicitação
-
event
ExtendableEvent
-
retorna
Promise<void>
-
-
_getResponse
void
A função
_getResponse
tem esta aparência:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
request
Solicitação
-
event
ExtendableEvent
-
retorna
Promessa<Resposta>
-
-
identificador
void
Executa uma estratégia de solicitação e retorna um
Promise
que será resolvido com umResponse
, invocando todos os callbacks de plug-in relevantes.Quando uma instância de estratégia é registrada com um Workbox
workbox-routing.Route
, esse método é chamado automaticamente quando a rota corresponde.Como alternativa, esse método pode ser usado em um listener
FetchEvent
independente, transmitindo-o paraevent.respondWith()
.A função
handle
tem esta aparência:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
do modelo.
FetchEvent | HandlerCallbackOptions
Um
FetchEvent
ou um objeto com as propriedades listadas abaixo.
-
retorna
Promessa<Resposta>
-
-
handleAll
void
Semelhante a
workbox-strategies.Strategy~handle
, mas em vez de apenas retornar umPromise
que é resolvido para umResponse
, ele vai retornar uma tupla de promessas[response, done]
, em que a primeira (response
) é equivalente ao quehandle()
retorna, e a última é uma promessa que será resolvida quando todas as promessas que foram adicionadas aevent.waitUntil()
como parte da execução da estratégia forem concluídas.Aguarde a promessa
done
para garantir que qualquer trabalho extra realizado pela estratégia (geralmente respostas em cache) seja concluído com êxito.A função
handleAll
tem esta aparência:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
do modelo.
FetchEvent | HandlerCallbackOptions
Um
FetchEvent
ou um objeto com as propriedades listadas abaixo.
-
retorna
[Promise<Response>, Promise<void>]
Uma tupla de promessas [response,done] que pode ser usada para determinar quando a resposta é resolvida, bem como quando o gerenciador concluiu todo o trabalho.
-
Strategy
Uma classe base abstrata que precisa ser estendida por todas as outras classes de estratégia:
Propriedades
-
construtor
void
Cria uma nova instância da estratégia e define todas as propriedades da opção documentada como propriedades de instância pública.
Observação: se uma classe de estratégia personalizada estender a classe de base Strategy e não precisar de mais do que essas propriedades, ela não vai precisar definir o próprio construtor.
A função
constructor
tem esta aparência:(options?: StrategyOptions) => {...}
-
do modelo.
StrategyOptions opcional
-
retorna
-
-
cacheName
string
-
fetchOptions
RequestInit opcional
-
matchOptions
CacheQueryOptions opcional
-
plugins
-
_awaitComplete
void
A função
_awaitComplete
tem esta aparência:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promessa<Resposta>
-
handler
-
request
Solicitação
-
event
ExtendableEvent
-
retorna
Promise<void>
-
-
_getResponse
void
A função
_getResponse
tem esta aparência:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
request
Solicitação
-
event
ExtendableEvent
-
retorna
Promessa<Resposta>
-
-
_identificador
void
A função
_handle
tem esta aparência:(request: Request, handler: StrategyHandler) => {...}
-
request
Solicitação
-
handler
-
retorna
Promessa<Resposta>
-
-
identificador
void
Executa uma estratégia de solicitação e retorna um
Promise
que será resolvido com umResponse
, invocando todos os callbacks de plug-in relevantes.Quando uma instância de estratégia é registrada com um Workbox
workbox-routing.Route
, esse método é chamado automaticamente quando a rota corresponde.Como alternativa, esse método pode ser usado em um listener
FetchEvent
independente, transmitindo-o paraevent.respondWith()
.A função
handle
tem esta aparência:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
do modelo.
FetchEvent | HandlerCallbackOptions
Um
FetchEvent
ou um objeto com as propriedades listadas abaixo.
-
retorna
Promessa<Resposta>
-
-
handleAll
void
Semelhante a
workbox-strategies.Strategy~handle
, mas em vez de apenas retornar umPromise
que é resolvido para umResponse
, ele vai retornar uma tupla de promessas[response, done]
, em que a primeira (response
) é equivalente ao quehandle()
retorna, e a última é uma promessa que será resolvida quando todas as promessas que foram adicionadas aevent.waitUntil()
como parte da execução da estratégia forem concluídas.Aguarde a promessa
done
para garantir que qualquer trabalho extra realizado pela estratégia (geralmente respostas em cache) seja concluído com êxito.A função
handleAll
tem esta aparência:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
do modelo.
FetchEvent | HandlerCallbackOptions
Um
FetchEvent
ou um objeto com as propriedades listadas abaixo.
-
retorna
[Promise<Response>, Promise<void>]
Uma tupla de promessas [response,done] que pode ser usada para determinar quando a resposta é resolvida, bem como quando o gerenciador concluiu todo o trabalho.
-
StrategyHandler
Uma classe criada sempre que uma instância de instância de Strategy chama
workbox-strategies.Strategy~handle
ou
workbox-strategies.Strategy~handleAll
que une todas as ações de busca e
cache em callbacks do plug-in e monitora quando a estratégia
é "concluída" (ou seja, todas as promessas event.waitUntil()
adicionadas foram resolvidas).
Propriedades
-
construtor
void
Cria uma nova instância associada à estratégia e ao evento passados que está processando a solicitação.
O construtor também inicializa o estado que será transmitido para cada um dos plug-ins que processam essa solicitação.
A função
constructor
tem esta aparência:(strategy: Strategy, options: HandlerCallbackOptions) => {...}
-
de estratégia
-
do modelo.
-
retorna
-
-
event
ExtendableEvent
-
params
Qualquer opção opcional
-
request
Solicitação
-
url
URL opcional
-
cacheMatch
void
Corresponde a uma solicitação do cache (e invoca qualquer método de callback do plug-in aplicável) usando
cacheName
,matchOptions
eplugins
definidos no objeto de estratégia.Os seguintes métodos do ciclo de vida do plug-in são invocados ao usar esse método:
- cacheKeyWillByUsed()
- cachedResponseWillByUsed()
A função
cacheMatch
tem esta aparência:(key: RequestInfo) => {...}
-
chave
RequestInfo
A solicitação ou o URL a ser usado como chave de cache.
-
retorna
Promessa<Resposta>
Uma resposta correspondente, se encontrada.
-
cachePut
void
Coloca um par de solicitação/resposta no cache (e invoca os métodos de callback de plug-in aplicáveis) usando
cacheName
eplugins
definidos no objeto da estratégia.Os seguintes métodos do ciclo de vida do plug-in são invocados ao usar esse método:
- cacheKeyWillByUsed()
- cacheWillUpdate()
- cacheDidUpdate()
A função
cachePut
tem esta aparência:(key: RequestInfo, response: Response) => {...}
-
chave
RequestInfo
A solicitação ou o URL a ser usado como chave de cache.
-
resposta
Resposta
A resposta para o cache.
-
retorna
Promise<boolean>
false
se um cacheWillUpdate fez com que a resposta não fosse armazenada em cache. Caso contrário,true
.
-
destroy
void
Interrompe a execução da estratégia e resolve imediatamente todas as promessas de
waitUntil()
pendentes.A função
destroy
tem esta aparência:() => {...}
-
doneWaiting
void
Retorna uma promessa que é resolvida quando todas as promessas passadas para
workbox-strategies.StrategyHandler~waitUntil
forem resolvidas.Observação: qualquer trabalho feito após a resolução de
doneWaiting()
precisa ser transmitido manualmente para o métodowaitUntil()
de um evento (não para o métodowaitUntil()
desse gerenciador). Caso contrário, a linha de execução do service worker será encerrada antes da conclusão do trabalho.A função
doneWaiting
tem esta aparência:() => {...}
-
retorna
Promise<void>
-
-
fetch
void
Busca determinada solicitação (e invoca qualquer método de callback de plug-in aplicável) usando
fetchOptions
(para solicitações que não sejam de navegação) eplugins
definidos no objetoStrategy
.Os seguintes métodos do ciclo de vida do plug-in são invocados ao usar esse método:
requestWillFetch()
fetchDidSucceed()
fetchDidFail()
A função
fetch
tem esta aparência:(input: RequestInfo) => {...}
-
entrada
RequestInfo
O URL ou a solicitação a ser buscada.
-
retorna
Promessa<Resposta>
-
fetchAndCachePut
void
Chama
this.fetch()
e, em segundo plano, executathis.cachePut()
na resposta gerada porthis.fetch()
.A chamada para
this.cachePut()
invoca automaticamentethis.waitUntil()
, então você não precisa chamarwaitUntil()
manualmente no evento.A função
fetchAndCachePut
tem esta aparência:(input: RequestInfo) => {...}
-
entrada
RequestInfo
A solicitação ou o URL a ser buscado e armazenado em cache.
-
retorna
Promessa<Resposta>
-
-
getCacheKey
void
Verifica a lista de plug-ins para o callback
cacheKeyWillBeUsed
e executa qualquer um desses callbacks encontrados na sequência. O objetoRequest
final retornado pelo último plug-in é tratado como a chave de cache para leituras e/ou gravações em cache. Se nenhum callback de plug-incacheKeyWillBeUsed
tiver sido registrado, a solicitação transmitida será retornada sem modificações.A função
getCacheKey
tem esta aparência:(request: Request, mode: "read"
| "write"
) => {...}-
request
Solicitação
-
modo
-
retorna
Promessa<Solicitação>
-
-
hasCallback
void
Retorna verdadeiro se a estratégia tiver pelo menos um plug-in com o callback especificado.
A função
hasCallback
tem esta aparência:(name: C) => {...}
-
nome
C
O nome do callback a ser verificado.
-
retorna
boolean
-
-
iterateCallbacks
void
Aceita um callback e retorna um iterável de callbacks do plug-in correspondentes, em que cada callback é encapsulado com o estado atual do gerenciador (ou seja, quando você chama cada callback, qualquer parâmetro de objeto transmitido será mesclado com o estado atual do plug-in).
A função
iterateCallbacks
tem esta aparência:(name: C) => {...}
-
nome
C
O nome do callback a ser executado
-
retorna
Gerador<NonNullable<indexedAccess>anyunknown>
-
-
runCallbacks
void
Executa todos os callbacks de plug-in correspondentes ao nome informado, em ordem, transmitindo o objeto de parâmetro fornecido (mesclado com o estado atual do plug-in) como o único argumento.
Observação: como esse método executa todos os plug-ins, ele não é adequado para casos em que o valor de retorno de um callback precisa ser aplicado antes de chamar o próximo callback. Consulte
workbox-strategies.StrategyHandler#iterateCallbacks
abaixo para saber como lidar com esse caso.A função
runCallbacks
tem esta aparência:(name: C, param: Omit<indexedAccess"state"
>) => {...}-
nome
C
O nome do callback a ser executado em cada plug-in.
-
param
>
O objeto a ser transmitido como o primeiro (e único) parâmetro ao executar cada callback. Esse objeto será mesclado com o estado atual do plug-in antes da execução do callback.
-
retorna
Promise<void>
-
-
waitUntil
void
Adiciona uma promessa às [promessas de vida útil de extensão]
https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises
do evento de evento associado à solicitação que está sendo processada (geralmente umFetchEvent
).Observação: aguarde
workbox-strategies.StrategyHandler~doneWaiting
para saber quando todas as promessas adicionadas forem resolvidas.A função
waitUntil
tem esta aparência:(promise: Promise<T>) => {...}
-
prometo
Promise<T>
Uma promessa a ser adicionada às promessas de vida útil estendidas do evento que acionou a solicitação.
-
retorna
Promise<T>
-
StrategyOptions
Propriedades
-
cacheName
string opcional
-
fetchOptions
RequestInit opcional
-
matchOptions
CacheQueryOptions opcional
-
plugins
WorkboxPlugin[] opcional