estratégias de caixa de trabalho

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

Diagrama 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)

Primeiro diagrama do cache

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)

Primeiro diagrama da rede

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

Diagrama 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

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

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 um Promise que será resolvido com um Response, invocando todos os callbacks de plug-in relevantes.
  • handleAll(): semelhante a handle(), mas retorna dois objetos Promise. A primeira é equivalente ao que handle() retorna, e a segunda é resolvida quando as promessas que foram adicionadas a event.waitUntil() na estratégia forem concluídas.

Ambas as estratégias de solicitação são invocadas com dois parâmetros:

  • request: a Request para a qual a estratégia vai retornar uma resposta.
  • handler: uma instância StrategyHandler 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-in requestWillFetch(), fetchDidSucceed() e fetchDidFail().
  • cacheMatch: faz a correspondência de uma solicitação do cache e invoca os métodos de ciclo de vida do plug-in cacheKeyWillBeUsed() e cachedResponseWillBeUsed().
  • cachePut: coloca um par de solicitação/resposta no cache e invoca os métodos de ciclo de vida do plug-in cacheKeyWillBeUsed(), cacheWillUpdate() e cacheDidUpdate().
  • fetchAndCachePut: chama fetch() e executa cachePut() em segundo plano na resposta gerada por fetch().
  • 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 um FetchEvent).
  • doneWaiting: retorna uma promessa que é resolvida quando todas as promessas passadas para waitUntil() são resolvidas.
  • destroy: interrompe a execução da estratégia e resolve imediatamente todas as promessas de waitUntil() 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)=> {...}

  • cacheName

    string

  • fetchOptions

    RequestInit opcional

  • matchOptions

    CacheQueryOptions opcional

  • plugins

    WorkboxPlugin[]

  • _awaitComplete

    void

    A função _awaitComplete tem esta aparência: 

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

    • responseDone

      Promessa<Resposta>

    • gerenciador

      StrategyHandler

    • request

      Solicitação

    • event

      ExtendableEvent

    • retorna

      Promise<void>

  • _getResponse

    void

    A função _getResponse tem esta aparência: 

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

    • retorna

      Promessa<Resposta>

  • identificador

    void

    Executa uma estratégia de solicitação e retorna um Promise que será resolvido com um Response, 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 para event.respondWith().

    A função handle tem esta aparência: 

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

    • retorna

      Promessa<Resposta>

  • handleAll

    void

    Semelhante a workbox-strategies.Strategy~handle, mas em vez de apenas retornar um Promise que é resolvido para um Response, ele vai retornar uma tupla de promessas [response, done], em que a primeira (response) é equivalente ao que handle() retorna, e a última é uma promessa que será resolvida quando todas as promessas que foram adicionadas a event.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)=> {...}

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

  • cacheName

    string

  • fetchOptions

    RequestInit opcional

  • matchOptions

    CacheQueryOptions opcional

  • plugins

    WorkboxPlugin[]

  • _awaitComplete

    void

    A função _awaitComplete tem esta aparência: 

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

    • responseDone

      Promessa<Resposta>

    • gerenciador

      StrategyHandler

    • request

      Solicitação

    • event

      ExtendableEvent

    • retorna

      Promise<void>

  • _getResponse

    void

    A função _getResponse tem esta aparência: 

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

    • retorna

      Promessa<Resposta>

  • identificador

    void

    Executa uma estratégia de solicitação e retorna um Promise que será resolvido com um Response, 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 para event.respondWith().

    A função handle tem esta aparência: 

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

    • retorna

      Promessa<Resposta>

  • handleAll

    void

    Semelhante a workbox-strategies.Strategy~handle, mas em vez de apenas retornar um Promise que é resolvido para um Response, ele vai retornar uma tupla de promessas [response, done], em que a primeira (response) é equivalente ao que handle() retorna, e a última é uma promessa que será resolvida quando todas as promessas que foram adicionadas a event.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)=> {...}

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

  • cacheName

    string

  • fetchOptions

    RequestInit opcional

  • matchOptions

    CacheQueryOptions opcional

  • plugins

    WorkboxPlugin[]

  • _awaitComplete

    void

    A função _awaitComplete tem esta aparência: 

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

    • responseDone

      Promessa<Resposta>

    • gerenciador

      StrategyHandler

    • request

      Solicitação

    • event

      ExtendableEvent

    • retorna

      Promise<void>

  • _getResponse

    void

    A função _getResponse tem esta aparência: 

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

    • retorna

      Promessa<Resposta>

  • identificador

    void

    Executa uma estratégia de solicitação e retorna um Promise que será resolvido com um Response, 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 para event.respondWith().

    A função handle tem esta aparência: 

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

    • retorna

      Promessa<Resposta>

  • handleAll

    void

    Semelhante a workbox-strategies.Strategy~handle, mas em vez de apenas retornar um Promise que é resolvido para um Response, ele vai retornar uma tupla de promessas [response, done], em que a primeira (response) é equivalente ao que handle() retorna, e a última é uma promessa que será resolvida quando todas as promessas que foram adicionadas a event.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)=> {...}

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

  • cacheName

    string

  • fetchOptions

    RequestInit opcional

  • matchOptions

    CacheQueryOptions opcional

  • plugins

    WorkboxPlugin[]

  • _awaitComplete

    void

    A função _awaitComplete tem esta aparência: 

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

    • responseDone

      Promessa<Resposta>

    • gerenciador

      StrategyHandler

    • request

      Solicitação

    • event

      ExtendableEvent

    • retorna

      Promise<void>

  • _getResponse

    void

    A função _getResponse tem esta aparência: 

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

    • retorna

      Promessa<Resposta>

  • identificador

    void

    Executa uma estratégia de solicitação e retorna um Promise que será resolvido com um Response, 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 para event.respondWith().

    A função handle tem esta aparência: 

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

    • retorna

      Promessa<Resposta>

  • handleAll

    void

    Semelhante a workbox-strategies.Strategy~handle, mas em vez de apenas retornar um Promise que é resolvido para um Response, ele vai retornar uma tupla de promessas [response, done], em que a primeira (response) é equivalente ao que handle() retorna, e a última é uma promessa que será resolvida quando todas as promessas que foram adicionadas a event.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)=> {...}

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

  • cacheName

    string

  • fetchOptions

    RequestInit opcional

  • matchOptions

    CacheQueryOptions opcional

  • plugins

    WorkboxPlugin[]

  • _awaitComplete

    void

    A função _awaitComplete tem esta aparência: 

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

    • responseDone

      Promessa<Resposta>

    • gerenciador

      StrategyHandler

    • request

      Solicitação

    • event

      ExtendableEvent

    • retorna

      Promise<void>

  • _getResponse

    void

    A função _getResponse tem esta aparência: 

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

    • retorna

      Promessa<Resposta>

  • identificador

    void

    Executa uma estratégia de solicitação e retorna um Promise que será resolvido com um Response, 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 para event.respondWith().

    A função handle tem esta aparência: 

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

    • retorna

      Promessa<Resposta>

  • handleAll

    void

    Semelhante a workbox-strategies.Strategy~handle, mas em vez de apenas retornar um Promise que é resolvido para um Response, ele vai retornar uma tupla de promessas [response, done], em que a primeira (response) é equivalente ao que handle() retorna, e a última é uma promessa que será resolvida quando todas as promessas que foram adicionadas a event.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)=> {...}

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

  • cacheName

    string

  • fetchOptions

    RequestInit opcional

  • matchOptions

    CacheQueryOptions opcional

  • plugins

    WorkboxPlugin[]

  • _awaitComplete

    void

    A função _awaitComplete tem esta aparência: 

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

    • responseDone

      Promessa<Resposta>

    • gerenciador

      StrategyHandler

    • request

      Solicitação

    • event

      ExtendableEvent

    • retorna

      Promise<void>

  • _getResponse

    void

    A função _getResponse tem esta aparência: 

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

    • retorna

      Promessa<Resposta>

  • _identificador

    void

    A função _handle tem esta aparência: 

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

    • retorna

      Promessa<Resposta>

  • identificador

    void

    Executa uma estratégia de solicitação e retorna um Promise que será resolvido com um Response, 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 para event.respondWith().

    A função handle tem esta aparência: 

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

    • retorna

      Promessa<Resposta>

  • handleAll

    void

    Semelhante a workbox-strategies.Strategy~handle, mas em vez de apenas retornar um Promise que é resolvido para um Response, ele vai retornar uma tupla de promessas [response, done], em que a primeira (response) é equivalente ao que handle() retorna, e a última é uma promessa que será resolvida quando todas as promessas que foram adicionadas a event.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)=> {...}

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

  • 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 e plugins 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 e plugins 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étodo waitUntil() de um evento (não para o método waitUntil() 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) e plugins definidos no objeto Strategy.

    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, executa this.cachePut() na resposta gerada por this.fetch().

    A chamada para this.cachePut() invoca automaticamente this.waitUntil(), então você não precisa chamar waitUntil() 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 objeto Request 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-in cacheKeyWillBeUsed 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

      "read"
      |"write"

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

    • name

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

    • name

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

    • name

      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 um FetchEvent).

    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