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

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)

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)

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

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

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.

• workbox-background-sync
• workbox-broadcast-update
• workbox-cacheable-response
• workbox-expiration
• workbox-range-requests

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.

Observação:consulte a implementação de origem de StrategyHandler para conferir todos os parâmetros aceitos por cada ação

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

  • opções

    StrategyOptions opcional

  • retorna

    CacheFirst

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

  • opções

    StrategyOptions opcional

  • retorna

    CacheOnly

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

  • opções

    NetworkFirstOptions opcional

  • retorna

    NetworkFirst

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

  • opções

    NetworkOnlyOptions opcional

  • retorna

    NetworkOnly

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

  • opções

    StrategyOptions opcional

  • retorna

    StaleWhileRevalidate

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

  • opções

    StrategyOptions opcional

  • retorna

    Estratégia

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

  • solicitação

    Solicitação

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

  • estratégia

    Estratégia

  • opções

    HandlerCallbackOptions

  • retorna

    StrategyHandler

• 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