estratégias de caixa de trabalho

Quando os service workers foram introduzidos pela primeira vez, um conjunto de estratégias de armazenamento em cache comuns surgiu. Uma estratégia de armazenamento em cache é um padrão que determina como um service worker gera uma resposta após receber um evento de busca.

O workbox-strategies fornece as estratégias de armazenamento em cache mais comuns para que seja fácil aplicá-las ao seu worker de serviço.

Não vamos entrar em muitos detalhes além das estratégias com suporte do Workbox, mas você pode aprender mais no guia de receitas off-line.

Usar estratégias

Nos exemplos a seguir, vamos mostrar como usar as estratégias de armazenamento em cache do Workbox com workbox-routing. Há algumas opções que você pode definir com cada estratégia que são abordadas na seção "Configurar estratégias" deste documento.

Na seção de uso avançado, vamos abordar como usar as estratégias de armazenamento em cache diretamente sem workbox-routing.

Stale-while-revalidate

Diagrama de conteúdo desatualizado durante a revalidação

O padrão desatualizado-enquanto-revalidado permite que você responda à solicitação o mais rápido possível com uma resposta em cache, se disponível, ou retorne à solicitação de rede se ela não estiver em cache. A solicitação de rede é usada para atualizar o cache. Ao contrário de algumas implementações de "válido enquanto revalidado", essa estratégia sempre faz uma solicitação de revalidação, independentemente 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 em primeiro lugar (cache de fallback para rede)

Diagrama de cache

Os apps da Web off-line dependem muito do cache, mas, para recursos não críticos que podem ser armazenados em cache gradualmente, o cache em primeiro lugar é a melhor opção.

Se houver uma resposta no cache, a solicitação será atendida usando a resposta em cache, e a rede não será usada. Se não houver uma resposta em cache, ela 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());

Rede em primeiro lugar (rede com fallback para cache)

Diagrama de 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 vai tentar buscar a resposta mais recente da rede. Se a solicitação for bem-sucedida, ela vai colocar a resposta no cache. Se a rede não conseguir 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 de rede

Se você precisar que solicitações específicas sejam atendidas pela rede, a estratégia somente rede é a que você precisa usar.

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

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

Somente cache

Diagrama de cache

A estratégia somente cache garante que as respostas sejam obtidas de um cache. Isso é menos comum na workbox, mas pode ser útil se você tiver sua própria etapa de pré-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 configurar:

  • 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 extrair e armazenar em cache uma solicitação.

Como mudar o cache usado por uma estratégia

É possível mudar a estratégia de cache usada fornecendo um nome de 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',
  })
);

Uso 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 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 estratégias personalizadas. Para isso, importe e estenda 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. Há duas estratégias de solicitação que podem ser usadas:

  • handle(): executa uma estratégia de solicitação e retorna um Promise que será resolvido com um Response, invocando todos os callbacks relevantes do plug-in.
  • handleAll(): semelhante a handle(), mas retorna dois objetos Promise. O primeiro é equivalente ao que handle() retorna, e o segundo será resolvido quando as promessas que foram adicionadas a event.waitUntil() na estratégia forem concluídas.

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

  • request: o Request para o 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

Confira a seguir 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 nativo fetch. A classe StrategyHandler oferece várias ações de busca e armazenamento em cache que podem ser usadas sempre que handle() ou handleAll() são usados:

  • fetch: busca uma solicitação e invoca os métodos de ciclo de vida do plug-in requestWillFetch(), fetchDidSucceed() e fetchDidFail().
  • cacheMatch: corresponde a 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 verdadeiro se a estratégia tiver pelo menos um plug-in com o callback fornecido.
  • runCallbacks: executa todos os callbacks de plug-in que correspondem 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 de plug-in correspondentes, em que cada callback é agrupado com o estado atual do gerenciador. Ou seja, quando você chama cada callback, qualquer parâmetro de objeto transmitido é mesclado com o estado atual do plug-in.
  • waitUntil: adiciona uma promessa às promessas de ciclo de vida estendidas do evento associado à solicitação que está sendo processada (geralmente um FetchEvent).
  • doneWaiting: retorna uma promessa que é resolvida quando todas as promessas transmitidas para waitUntil() são liquidadas.
  • destroy: interrompe a execução da estratégia e resolve imediatamente todas as promessas waitUntil() pendentes.

Estratégia de corrida de rede de cache personalizada

O exemplo a seguir é baseado em cache-network-race do Cookbook off-line (que o Workbox não fornece), mas vai além e sempre atualiza o cache após uma solicitação de rede bem-sucedida. Este é um exemplo de 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 na sua própria lógica de busca de eventos, use as classes de estratégia para executar uma solicitação usando uma estratégia específica.

Por exemplo, para usar a estratégia de revalidação de dados desaturados, faça 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 nas documentações de referência de estratégias de workbox.

Tipos

CacheFirst

Uma implementação de uma estratégia de solicitação cache-first.

Uma estratégia que prioriza o cache é útil para recursos 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 no cache, uma exceção WorkboxError será gerada.

Propriedades

  • construtor

    void

    Cria uma nova instância da estratégia e define todas as propriedades de opção documentadas como propriedades de instância públicas.

    Observação: se uma classe de estratégia personalizada estende a classe Strategy base e não precisa de mais do que essas propriedades, ela não precisa definir o próprio construtor.

    A função constructor é semelhante a esta: 

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

  • cacheName

    string

  • fetchOptions

    RequestInit opcional

  • matchOptions

    CacheQueryOptions opcional

  • plugins

    WorkboxPlugin[]

  • _awaitComplete

    void

    A função _awaitComplete é semelhante a esta: 

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

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • solicitação

      Solicitação

    • evento

      ExtendableEvent

    • retorna

      Promise<void>

  • _getResponse

    void

    A função _getResponse é semelhante a esta: 

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

    • handler

      StrategyHandler

    • solicitação

      Solicitação

    • evento

      ExtendableEvent

    • retorna

      Promise<Response>

  • handle

    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-routing.Route do Workbox, 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 é semelhante a esta: 

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

    • opções

      FetchEvent | HandlerCallbackOptions

      Um FetchEvent ou um objeto com as propriedades listadas abaixo.

    • retorna

      Promise<Response>

  • handleAll

    void

    Semelhante a workbox-strategies.Strategy~handle, mas, em vez de retornar apenas um Promise que é resolvido como um Response, ele vai retornar um conjunto de promessas [response, done], em que o primeiro (response) é equivalente ao que handle() retorna, e o segundo é uma promessa que será resolvida quando todas as promessas 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, armazenamento em cache de respostas) seja concluído.

    A função handleAll é semelhante a esta: 

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

    • opções

      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 de cache.

Essa classe é útil se você quiser aproveitar os plug-ins do Workbox.

Se não houver correspondência no cache, será gerada uma exceção WorkboxError.

Propriedades

  • construtor

    void

    Cria uma nova instância da estratégia e define todas as propriedades de opção documentadas como propriedades de instância públicas.

    Observação: se uma classe de estratégia personalizada estende a classe Strategy base e não precisa de mais do que essas propriedades, ela não precisa definir o próprio construtor.

    A função constructor é semelhante a esta: 

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

  • cacheName

    string

  • fetchOptions

    RequestInit opcional

  • matchOptions

    CacheQueryOptions opcional

  • plugins

    WorkboxPlugin[]

  • _awaitComplete

    void

    A função _awaitComplete é semelhante a esta: 

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

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • solicitação

      Solicitação

    • evento

      ExtendableEvent

    • retorna

      Promise<void>

  • _getResponse

    void

    A função _getResponse é semelhante a esta: 

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

    • handler

      StrategyHandler

    • solicitação

      Solicitação

    • evento

      ExtendableEvent

    • retorna

      Promise<Response>

  • handle

    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-routing.Route do Workbox, 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 é semelhante a esta: 

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

    • opções

      FetchEvent | HandlerCallbackOptions

      Um FetchEvent ou um objeto com as propriedades listadas abaixo.

    • retorna

      Promise<Response>

  • handleAll

    void

    Semelhante a workbox-strategies.Strategy~handle, mas, em vez de retornar apenas um Promise que é resolvido como um Response, ele vai retornar um conjunto de promessas [response, done], em que o primeiro (response) é equivalente ao que handle() retorna, e o segundo é uma promessa que será resolvida quando todas as promessas 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, armazenamento em cache de respostas) seja concluído.

    A função handleAll é semelhante a esta: 

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

    • opções

      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 e quando o gerenciador concluiu todo o trabalho.

NetworkFirst

Uma implementação de uma estratégia de solicitação de rede em primeiro lugar.

Por padrão, essa estratégia armazena em cache as respostas com um código de status 200, bem como as respostas opacas. Respostas opacas são solicitações de origem cruzada em que a resposta não oferece suporte a CORS.

Se a solicitação de rede falhar e não houver correspondência no cache, uma exceção WorkboxError será gerada.

Propriedades

  • construtor

    void

    A função constructor é semelhante a esta: 

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

  • cacheName

    string

  • fetchOptions

    RequestInit opcional

  • matchOptions

    CacheQueryOptions opcional

  • plugins

    WorkboxPlugin[]

  • _awaitComplete

    void

    A função _awaitComplete é semelhante a esta: 

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

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • solicitação

      Solicitação

    • evento

      ExtendableEvent

    • retorna

      Promise<void>

  • _getResponse

    void

    A função _getResponse é semelhante a esta: 

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

    • handler

      StrategyHandler

    • solicitação

      Solicitação

    • evento

      ExtendableEvent

    • retorna

      Promise<Response>

  • handle

    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-routing.Route do Workbox, 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 é semelhante a esta: 

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

    • opções

      FetchEvent | HandlerCallbackOptions

      Um FetchEvent ou um objeto com as propriedades listadas abaixo.

    • retorna

      Promise<Response>

  • handleAll

    void

    Semelhante a workbox-strategies.Strategy~handle, mas, em vez de retornar apenas um Promise que é resolvido como um Response, ele vai retornar um conjunto de promessas [response, done], em que o primeiro (response) é equivalente ao que handle() retorna, e o segundo é uma promessa que será resolvida quando todas as promessas 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, armazenamento em cache de respostas) seja concluído.

    A função handleAll é semelhante a esta: 

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

    • opções

      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 de rede.

Essa classe é útil se você quiser aproveitar os plug-ins do Workbox.

Se a solicitação de rede falhar, isso vai gerar uma exceção WorkboxError.

Propriedades

  • construtor

    void

    A função constructor é semelhante a esta: 

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

  • cacheName

    string

  • fetchOptions

    RequestInit opcional

  • matchOptions

    CacheQueryOptions opcional

  • plugins

    WorkboxPlugin[]

  • _awaitComplete

    void

    A função _awaitComplete é semelhante a esta: 

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

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • solicitação

      Solicitação

    • evento

      ExtendableEvent

    • retorna

      Promise<void>

  • _getResponse

    void

    A função _getResponse é semelhante a esta: 

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

    • handler

      StrategyHandler

    • solicitação

      Solicitação

    • evento

      ExtendableEvent

    • retorna

      Promise<Response>

  • handle

    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-routing.Route do Workbox, 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 é semelhante a esta: 

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

    • opções

      FetchEvent | HandlerCallbackOptions

      Um FetchEvent ou um objeto com as propriedades listadas abaixo.

    • retorna

      Promise<Response>

  • handleAll

    void

    Semelhante a workbox-strategies.Strategy~handle, mas, em vez de retornar apenas um Promise que é resolvido como um Response, ele vai retornar um conjunto de promessas [response, done], em que o primeiro (response) é equivalente ao que handle() retorna, e o segundo é uma promessa que será resolvida quando todas as promessas 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, armazenamento em cache de respostas) seja concluído.

    A função handleAll é semelhante a esta: 

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

    • opções

      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, espere a resposta da rede. O cache é atualizado com a resposta da rede a cada solicitação bem-sucedida.

Por padrão, essa estratégia armazena em cache as respostas com um código de status 200, bem como as respostas opacas. Respostas opacas são solicitações de origem cruzada em que a resposta não oferece suporte a CORS.

Se a solicitação de rede falhar e não houver correspondência no cache, uma exceção WorkboxError será gerada.

Propriedades

  • construtor

    void

    A função constructor é semelhante a esta: 

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

  • cacheName

    string

  • fetchOptions

    RequestInit opcional

  • matchOptions

    CacheQueryOptions opcional

  • plugins

    WorkboxPlugin[]

  • _awaitComplete

    void

    A função _awaitComplete é semelhante a esta: 

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

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • solicitação

      Solicitação

    • evento

      ExtendableEvent

    • retorna

      Promise<void>

  • _getResponse

    void

    A função _getResponse é semelhante a esta: 

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

    • handler

      StrategyHandler

    • solicitação

      Solicitação

    • evento

      ExtendableEvent

    • retorna

      Promise<Response>

  • handle

    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-routing.Route do Workbox, 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 é semelhante a esta: 

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

    • opções

      FetchEvent | HandlerCallbackOptions

      Um FetchEvent ou um objeto com as propriedades listadas abaixo.

    • retorna

      Promise<Response>

  • handleAll

    void

    Semelhante a workbox-strategies.Strategy~handle, mas, em vez de retornar apenas um Promise que é resolvido como um Response, ele vai retornar um conjunto de promessas [response, done], em que o primeiro (response) é equivalente ao que handle() retorna, e o segundo é uma promessa que será resolvida quando todas as promessas 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, armazenamento em cache de respostas) seja concluído.

    A função handleAll é semelhante a esta: 

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

    • opções

      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 todas as outras classes de estratégia precisam estender:

Propriedades

  • construtor

    void

    Cria uma nova instância da estratégia e define todas as propriedades de opção documentadas como propriedades de instância públicas.

    Observação: se uma classe de estratégia personalizada estende a classe Strategy base e não precisa de mais do que essas propriedades, ela não precisa definir o próprio construtor.

    A função constructor é semelhante a esta: 

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

  • cacheName

    string

  • fetchOptions

    RequestInit opcional

  • matchOptions

    CacheQueryOptions opcional

  • plugins

    WorkboxPlugin[]

  • _awaitComplete

    void

    A função _awaitComplete é semelhante a esta: 

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

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • solicitação

      Solicitação

    • evento

      ExtendableEvent

    • retorna

      Promise<void>

  • _getResponse

    void

    A função _getResponse é semelhante a esta: 

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

    • handler

      StrategyHandler

    • solicitação

      Solicitação

    • evento

      ExtendableEvent

    • retorna

      Promise<Response>

  • _handle

    void

    A função _handle é semelhante a esta: 

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

    • retorna

      Promise<Response>

  • handle

    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-routing.Route do Workbox, 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 é semelhante a esta: 

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

    • opções

      FetchEvent | HandlerCallbackOptions

      Um FetchEvent ou um objeto com as propriedades listadas abaixo.

    • retorna

      Promise<Response>

  • handleAll

    void

    Semelhante a workbox-strategies.Strategy~handle, mas, em vez de retornar apenas um Promise que é resolvido como um Response, ele vai retornar um conjunto de promessas [response, done], em que o primeiro (response) é equivalente ao que handle() retorna, e o segundo é uma promessa que será resolvida quando todas as promessas 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, armazenamento em cache de respostas) seja concluído.

    A função handleAll é semelhante a esta: 

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

    • opções

      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 e quando o gerenciador concluiu todo o trabalho.

StrategyHandler

Uma classe criada sempre que uma instância de estratégia chama workbox-strategies.Strategy~handle ou workbox-strategies.Strategy~handleAll, que envolve todas as ações de busca e cache em torno de callbacks de plug-in e acompanha quando a estratégia está "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 transmitidos que processa a solicitação.

    O construtor também inicializa o estado que será transmitido a cada um dos plug-ins que processam essa solicitação.

    A função constructor é semelhante a esta: 

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

  • evento

    ExtendableEvent

  • params

    qualquer opcional

  • solicitação

    Solicitação

  • url

    URL opcional

  • cacheMatch

    void

    Faz a correspondência de uma solicitação do cache (e invoca todos os métodos de callback de plug-in aplicáveis) usando cacheName, matchOptions e plugins definidos no objeto de estratégia.

    Os seguintes métodos de ciclo de vida do plug-in são invocados quando esse método é usado:

    • cacheKeyWillBeUsed()
    • cachedResponseWillBeUsed()

    A função cacheMatch é semelhante a esta: 

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

    • chave

      RequestInfo

      A solicitação ou o URL a ser usado como chave de cache.

    • retorna

      Promise<Response>

      Uma resposta correspondente, se encontrada.

  • cachePut

    void

    Coloca um par de solicitação/resposta no cache (e invoca todos os métodos de callback de plug-in aplicáveis) usando o cacheName e o plugins definidos no objeto de estratégia.

    Os seguintes métodos de ciclo de vida do plug-in são invocados quando esse método é usado:

    • cacheKeyWillBeUsed()
    • cacheWillUpdate()
    • cacheDidUpdate()

    A função cachePut é semelhante a esta: 

    (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&lt;boolean&gt;

      false se uma cacheWillUpdate fez com que a resposta não fosse armazenada em cache, e true, caso contrário.

  • destruir

    void

    Interrompe a execução da estratégia e resolve imediatamente todas as promessas waitUntil() pendentes.

    A função destroy é semelhante a esta: 

    () => {...}

  • doneWaiting

    void

    Retorna uma promessa que é resolvida quando todas as promessas transmitidas para workbox-strategies.StrategyHandler~waitUntil foram 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 o método waitUntil() do gerenciador), caso contrário, a linha de execução do worker do serviço será encerrada antes da conclusão do trabalho.

    A função doneWaiting é semelhante a esta: 

    () => {...}

    • retorna

      Promise<void>

  • fetch

    void

    Busca uma solicitação específica (e invoca todos os métodos de callback de plug-in aplicáveis) usando o fetchOptions (para solicitações que não são de navegação) e plugins definido no objeto Strategy.

    Os seguintes métodos de ciclo de vida do plug-in são invocados quando esse método é usado:

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

    A função fetch é semelhante a esta: 

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

    • entrada

      RequestInfo

      O URL ou a solicitação a ser buscada.

    • retorna

      Promise<Response>

  • 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(), para que você não precise chamar waitUntil() manualmente no evento.

    A função fetchAndCachePut é semelhante a esta: 

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

    • entrada

      RequestInfo

      A solicitação ou o URL a ser buscado e armazenado em cache.

    • retorna

      Promise<Response>

  • getCacheKey

    void

    Verifica a lista de plug-ins do callback cacheKeyWillBeUsed e executa qualquer um desses callbacks encontrados em sequência. O objeto Request final retornado pelo último plug-in é tratado como a chave de cache para leituras e/ou gravações de cache. Se nenhum callback de plug-in cacheKeyWillBeUsed tiver sido registrado, a solicitação transmitida será retornada sem modificações.

    A função getCacheKey é semelhante a esta: 

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

    • solicitação

      Solicitação

    • modo

      "read"
       | "write"

    • retorna

      Promise<Request>

  • hasCallback

    void

    Retorna "true" se a estratégia tiver pelo menos um plug-in com o callback indicado.

    A função hasCallback é semelhante a esta: 

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

    • nome

      C

      O nome do callback a ser verificado.

    • retorna

      booleano

  • iterateCallbacks

    void

    Aceita um callback e retorna um iterável de callbacks de plug-in correspondentes, em que cada callback é agrupado com o estado atual do gerenciador. Ou seja, quando você chama cada callback, qualquer parâmetro de objeto transmitido é mesclado com o estado atual do plug-in.

    A função iterateCallbacks é semelhante a esta: 

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

    • nome

      C

      O nome do callback a ser executado

    • retorna

      Generator<NonNullable<indexedAccess>anyunknown>

  • runCallbacks

    void

    Executa todos os callbacks de plug-in que correspondem ao nome fornecido, 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 é semelhante a esta: 

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

    • nome

      C

      O nome do callback a ser executado em cada plug-in.

    • param

      Omit<indexedAccess"state"
      >

      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 a [promessas de vida útil estendida]https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises do evento associado à solicitação que está sendo processada (geralmente um FetchEvent).

    Observação: você pode aguardar workbox-strategies.StrategyHandler~doneWaiting para saber quando todas as promessas adicionadas forem resolvidas.

    A função waitUntil é semelhante a esta: 

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

    • promessa

      Promise<T>

      Uma promessa para adicionar às promessas de vida útil estendida do evento que acionou a solicitação.

    • retorna

      Promise<T>

StrategyOptions

Propriedades

  • cacheName

    string opcional

  • fetchOptions

    RequestInit opcional

  • matchOptions

    CacheQueryOptions opcional

  • plugins

    WorkboxPlugin[] opcional