estratégias de caixa de trabalho

Quando os service workers foram introduzidos pela primeira vez, um conjunto de estratégias comuns de armazenamento em cache 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 facilitar e aplicá-las no seu service worker.

Não entraremos em muitos detalhes além das estratégias com suporte no Workbox, mas você pode aprender mais no Manual off-line.

Como usar estratégias

Nos exemplos a seguir, vamos mostrar como usar o armazenamento em cache do Workbox estratégias com workbox-routing. Existem algumas opções que você pode definir com cada estratégia que são abordadas nos Seção "Como configurar estratégias" deste documento.

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

Válido durante a revalidação

A operação stale-while-revalidate permite que você responda à solicitação o mais rápido possível com uma resposta em cache, se disponível, recorrendo à solicitação de rede não armazenados em cache. Depois, a solicitação de rede é usada para atualizar o cache. Em oposição a algumas implementações de obsoleto durante a revalidação, essa estratégia sempre fará uma solicitação de revalidação, independentemente da idade da resposta armazenada em cache.

Essa é uma estratégia bastante comum, na qual é necessário 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()
);

Priorização do cache (que retorna o cache para a rede)

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

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

Priorizar a rede (rede voltando ao cache)

Para solicitações que são atualizadas com frequência, o priorizar a rede estratégia é a solução ideal. Por padrão, ele tenta buscar a versão mais recente resposta da rede. Se a solicitação for bem-sucedida, ele colocará a resposta no cache. Se a rede não retornar uma resposta, a resposta armazenada em cache será usado.

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

registerRoute(
  ({url}) => url.pathname.startsWith('/social-timeline/'),
  new NetworkFirst()
);

Somente rede

Se você precisa que solicitações específicas sejam atendidas pela rede, apenas na rede é a estratégia a ser usada.

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

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

Somente cache

O 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());

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 para usar na estratégia.
• Uma matriz de plug-ins que terão seus métodos de ciclo de vida chamados quando busca e armazenamento em cache de uma solicitação.

Alteração do cache usado por uma estratégia

É possível alterar o cache que uma estratégia usou 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 (link em inglês)
• workbox-cacheable-response
• workbox-expiration
• workbox-range-requests

Para usar qualquer um desses plug-ins (ou um plug-in personalizado), basta transmitir instâncias à 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, a caixa de trabalho permite que você crie 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() é usada 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. invocar todos os callbacks relevantes do plug-in.
• handleAll(): semelhante a handle(), mas retorna dois objetos Promise. A primeira é equivalente ao que handle() retorna, e o segundo será resolvido quando as promessas que foram retornadas adicionados a event.waitUntil() na estratégia foram concluídos.

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

• request: o Request para o qual a estratégia retornará uma resposta.
• handler: uma instância StrategyHandler criada automaticamente para a estratégia atual.

Criação de uma nova estratégia

Veja 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 o handler.fetch() é chamado em vez do método fetch nativo. O StrategyHandler fornece uma série de ações de busca e cache que podem ser usadas sempre que handle() ou handleAll() é usado:

• fetch: busca uma determinada solicitação e invoca o requestWillFetch(), o fetchDidSucceed() e fetchDidFail() métodos do ciclo de vida do plug-in
• cacheMatch: corresponde a uma solicitação do cache e invoca o cacheKeyWillBeUsed() e cachedResponseWillBeUsed() métodos do ciclo de vida do plug-in
• cachePut: coloca um par de solicitação/resposta no cache e invoca o cacheKeyWillBeUsed(), cacheWillUpdate() e cacheDidUpdate() dos métodos de ciclo de vida do plug-in
• fetchAndCachePut: chama fetch() e executa cachePut() em segundo plano na resposta. gerado por fetch().
• hasCallback: recebe um callback como entrada e retorna "true" se a estratégia tiver pelo menos um plug-in. com o retorno de chamada em questão.
• runCallbacks: executa todos os callbacks do plug-in que correspondem a um determinado nome, em ordem, transmitindo um parâmetro específico. (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-ins correspondentes, em que cada callback é unido ao 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 de extensão do evento associado ao solicitação sendo processada (geralmente um FetchEvent).
• doneWaiting: retorna uma promessa que é resolvida quando todas as promessas passadas para waitUntil() forem concluídas. se instalou.
• destroy: interrompe a execução da estratégia e resolve imediatamente qualquer promessa waitUntil() pendente.

.

Observação: consulte a fonte implementação de StrategyHandler para ver todos os parâmetros aceitos pelo cada ação

Estratégia de corrida da rede de cache personalizado

O exemplo a seguir é baseado cache-network-race do Manual off-line (não fornecido pelo Workbox), mas que vai além e atualiza sempre o após uma solicitação de rede bem-sucedida. Isso está em 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 eventos de busca, usar as classes de estratégia para executar uma solicitação por meio de uma estratégia específica.

Por exemplo, para usar a estratégia "descontinuar enquanto revalidar", 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}));
  }
});

Consulte a lista de turmas disponíveis na documentos de referência sobre workbox-strategies.

Tipos

CacheFirst

Uma implementação de uma estratégia que prioriza o cache estratégia de solicitação.

Uma estratégia de priorização de 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, isso gerará uma exceção WorkboxError.

Propriedades

• construtor

  void

  Cria uma nova instância da estratégia e define todas as opções documentadas como propriedades de instância pública.

  Observação: se uma classe de estratégia personalizada estender a classe básica de estratégia e precisa de mais do que essas propriedades, ele não precisa definir seu próprio construtor.

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

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

  • opções

    StrategyOptions opcional

  • retorna

    CacheFirst

• 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

    Promise<Response>

  • handler

    StrategyHandler

  • solicitação

    Solicitação

  • evento

    ExtendableEvent

  • retorna

    Promessa<void>

• _getResponse

  void

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

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

  • handler

    StrategyHandler

  • solicitação

    Solicitação

  • evento

    ExtendableEvent

  • retorna

    Promise&lt;Response&gt;

• 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-ins relevantes.

  Quando uma instância de estratégia é registrada com uma caixa de trabalho workbox-routing.Route, esse método é automaticamente chamado quando a rota corresponde.

  Como alternativa, esse método pode ser usado em uma FetchEvent independente listener passando-o para event.respondWith().

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

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

  • opções

    FetchEvent | HandlerCallbackOptions

    Um FetchEvent ou um objeto com a propriedades listadas abaixo.

  • retorna

    Promise&lt;Response&gt;

• handleAll

  void

  Semelhante a workbox-strategies.Strategy~handle, mas em vez de apenas retornar uma Promise que é resolvida como Response, ele vai retornar uma tupla de promessas [response, done], em que a primeira (response) é equivalente ao que handle() retorna, e o último é um Promessa que será resolvida quando houver promessas adicionadas à event.waitUntil() como parte da execução da estratégia foram concluídas.

  Aguarde a promessa done para garantir que qualquer trabalho extra realizado pela a estratégia (geralmente armazenar as respostas em cache) for concluída com êxito.

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

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

  • opções

    FetchEvent | HandlerCallbackOptions

    Um FetchEvent ou um objeto com a propriedades listadas abaixo.

  • retorna

    [Promessa<Resposta>, Promessa<void>]

    Uma tupla de [resposta, concluída] que podem ser usadas para determinar quando a resposta é resolvida conforme bem como quando o manipulador tiver concluído todo o trabalho.

CacheOnly

Uma implementação de uma função somente cache estratégia de solicitação.

Esta aula é útil se você quiser aproveitar 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 opções documentadas como propriedades de instância pública.

  Observação: se uma classe de estratégia personalizada estender a classe básica de estratégia e precisa de mais do que essas propriedades, ele não precisa definir seu próprio construtor.

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

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

  • opções

    StrategyOptions opcional

  • retorna

    CacheOnly

• 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

    Promise&lt;Response&gt;

  • handler

    StrategyHandler

  • solicitação

    Solicitação

  • evento

    ExtendableEvent

  • retorna

    Promessa<void>

• _getResponse

  void

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

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

  • handler

    StrategyHandler

  • solicitação

    Solicitação

  • evento

    ExtendableEvent

  • retorna

    Promise&lt;Response&gt;

• 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-ins relevantes.

  Quando uma instância de estratégia é registrada com uma caixa de trabalho workbox-routing.Route, esse método é automaticamente chamado quando a rota corresponde.

  Como alternativa, esse método pode ser usado em uma FetchEvent independente listener passando-o para event.respondWith().

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

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

  • opções

    FetchEvent | HandlerCallbackOptions

    Um FetchEvent ou um objeto com a propriedades listadas abaixo.

  • retorna

    Promise&lt;Response&gt;

• handleAll

  void

  Semelhante a workbox-strategies.Strategy~handle, mas em vez de apenas retornar uma Promise que é resolvida como Response, ele vai retornar uma tupla de promessas [response, done], em que a primeira (response) é equivalente ao que handle() retorna, e o último é um Promessa que será resolvida quando houver promessas adicionadas à event.waitUntil() como parte da execução da estratégia foram concluídas.

  Aguarde a promessa done para garantir que qualquer trabalho extra realizado pela a estratégia (geralmente armazenar as respostas em cache) for concluída com êxito.

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

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

  • opções

    FetchEvent | HandlerCallbackOptions

    Um FetchEvent ou um objeto com a propriedades listadas abaixo.

  • retorna

    [Promessa<Resposta>, Promessa<void>]

    Uma tupla de [resposta, concluída] que podem ser usadas para determinar quando a resposta é resolvida conforme bem como quando o manipulador tiver concluído todo o trabalho.

NetworkFirst

Uma implementação de um priorizar a rede estratégia de solicitação.

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

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

Propriedades

• construtor

  void

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

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

  • opções

    NetworkFirstOptions opcional

  • retorna

    NetworkFirst

• 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

    Promise&lt;Response&gt;

  • handler

    StrategyHandler

  • solicitação

    Solicitação

  • evento

    ExtendableEvent

  • retorna

    Promessa<void>

• _getResponse

  void

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

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

  • handler

    StrategyHandler

  • solicitação

    Solicitação

  • evento

    ExtendableEvent

  • retorna

    Promise&lt;Response&gt;

• 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-ins relevantes.

  Quando uma instância de estratégia é registrada com uma caixa de trabalho workbox-routing.Route, esse método é automaticamente chamado quando a rota corresponde.

  Como alternativa, esse método pode ser usado em uma FetchEvent independente listener passando-o para event.respondWith().

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

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

  • opções

    FetchEvent | HandlerCallbackOptions

    Um FetchEvent ou um objeto com a propriedades listadas abaixo.

  • retorna

    Promise&lt;Response&gt;

• handleAll

  void

  Semelhante a workbox-strategies.Strategy~handle, mas em vez de apenas retornar uma Promise que é resolvida como Response, ele vai retornar uma tupla de promessas [response, done], em que a primeira (response) é equivalente ao que handle() retorna, e o último é um Promessa que será resolvida quando houver promessas adicionadas à event.waitUntil() como parte da execução da estratégia foram concluídas.

  Aguarde a promessa done para garantir que qualquer trabalho extra realizado pela a estratégia (geralmente armazenar as respostas em cache) for concluída com êxito.

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

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

  • opções

    FetchEvent | HandlerCallbackOptions

    Um FetchEvent ou um objeto com a propriedades listadas abaixo.

  • retorna

    [Promessa<Resposta>, Promessa<void>]

    Uma tupla de [resposta, concluída] que podem ser usadas para determinar quando a resposta é resolvida conforme bem como quando o manipulador tiver concluído 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 um apenas rede estratégia de solicitação.

Esta aula é útil se você quiser aproveitar 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) => {...}

  • opções

    NetworkOnlyOptions opcional

  • retorna

    NetworkOnly

• 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

    Promise&lt;Response&gt;

  • handler

    StrategyHandler

  • solicitação

    Solicitação

  • evento

    ExtendableEvent

  • retorna

    Promessa<void>

• _getResponse

  void

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

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

  • handler

    StrategyHandler

  • solicitação

    Solicitação

  • evento

    ExtendableEvent

  • retorna

    Promise&lt;Response&gt;

• 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-ins relevantes.

  Quando uma instância de estratégia é registrada com uma caixa de trabalho workbox-routing.Route, esse método é automaticamente chamado quando a rota corresponde.

  Como alternativa, esse método pode ser usado em uma FetchEvent independente listener passando-o para event.respondWith().

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

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

  • opções

    FetchEvent | HandlerCallbackOptions

    Um FetchEvent ou um objeto com a propriedades listadas abaixo.

  • retorna

    Promise&lt;Response&gt;

• handleAll

  void

  Semelhante a workbox-strategies.Strategy~handle, mas em vez de apenas retornar uma Promise que é resolvida como Response, ele vai retornar uma tupla de promessas [response, done], em que a primeira (response) é equivalente ao que handle() retorna, e o último é um Promessa que será resolvida quando houver promessas adicionadas à event.waitUntil() como parte da execução da estratégia foram concluídas.

  Aguarde a promessa done para garantir que qualquer trabalho extra realizado pela a estratégia (geralmente armazenar as respostas em cache) for concluída com êxito.

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

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

  • opções

    FetchEvent | HandlerCallbackOptions

    Um FetchEvent ou um objeto com a propriedades listadas abaixo.

  • retorna

    [Promessa<Resposta>, Promessa<void>]

    Uma tupla de [resposta, concluída] que podem ser usadas para determinar quando a resposta é resolvida conforme bem como quando o manipulador tiver concluído todo o trabalho.

NetworkOnlyOptions

Propriedades

• fetchOptions

  RequestInit opcional

• networkTimeoutSeconds

  número opcional

• plugins

  WorkboxPlugin[] opcional

StaleWhileRevalidate

Uma implementação de um stale-while-revalidate (em inglês) estratégia de solicitação.

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 como bem como respostas opacas. Respostas opacas são solicitações de origem cruzada em que a resposta não oferecem suporte ao CORS;

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

Propriedades

• construtor

  void

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

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

  • opções

    StrategyOptions opcional

  • retorna

    StaleWhileRevalidate

• 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

    Promise&lt;Response&gt;

  • handler

    StrategyHandler

  • solicitação

    Solicitação

  • evento

    ExtendableEvent

  • retorna

    Promessa<void>

• _getResponse

  void

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

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

  • handler

    StrategyHandler

  • solicitação

    Solicitação

  • evento

    ExtendableEvent

  • retorna

    Promise&lt;Response&gt;

• 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-ins relevantes.

  Quando uma instância de estratégia é registrada com uma caixa de trabalho workbox-routing.Route, esse método é automaticamente chamado quando a rota corresponde.

  Como alternativa, esse método pode ser usado em uma FetchEvent independente listener passando-o para event.respondWith().

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

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

  • opções

    FetchEvent | HandlerCallbackOptions

    Um FetchEvent ou um objeto com a propriedades listadas abaixo.

  • retorna

    Promise&lt;Response&gt;

• handleAll

  void

  Semelhante a workbox-strategies.Strategy~handle, mas em vez de apenas retornar uma Promise que é resolvida como Response, ele vai retornar uma tupla de promessas [response, done], em que a primeira (response) é equivalente ao que handle() retorna, e o último é um Promessa que será resolvida quando houver promessas adicionadas à event.waitUntil() como parte da execução da estratégia foram concluídas.

  Aguarde a promessa done para garantir que qualquer trabalho extra realizado pela a estratégia (geralmente armazenar as respostas em cache) for concluída com êxito.

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

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

  • opções

    FetchEvent | HandlerCallbackOptions

    Um FetchEvent ou um objeto com a propriedades listadas abaixo.

  • retorna

    [Promessa<Resposta>, Promessa<void>]

    Uma tupla de [resposta, concluída] que podem ser usadas para determinar quando a resposta é resolvida conforme bem como quando o manipulador tiver concluído todo o trabalho.

Strategy

Uma classe de base abstrata da qual todas as outras classes de estratégia precisam se estender:

Propriedades

• construtor

  void

  Cria uma nova instância da estratégia e define todas as opções documentadas como propriedades de instância pública.

  Observação: se uma classe de estratégia personalizada estender a classe básica de estratégia e precisa de mais do que essas propriedades, ele não precisa definir seu próprio construtor.

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

  (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 tem esta aparência:

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

  • responseDone

    Promise&lt;Response&gt;

  • handler

    StrategyHandler

  • solicitação

    Solicitação

  • evento

    ExtendableEvent

  • retorna

    Promessa<void>

• _getResponse

  void

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

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

  • handler

    StrategyHandler

  • solicitação

    Solicitação

  • evento

    ExtendableEvent

  • retorna

    Promise&lt;Response&gt;

• _handle

  void

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

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

  • solicitação

    Solicitação

  • handler

    StrategyHandler

  • retorna

    Promise&lt;Response&gt;

• 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-ins relevantes.

  Quando uma instância de estratégia é registrada com uma caixa de trabalho workbox-routing.Route, esse método é automaticamente chamado quando a rota corresponde.

  Como alternativa, esse método pode ser usado em uma FetchEvent independente listener passando-o para event.respondWith().

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

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

  • opções

    FetchEvent | HandlerCallbackOptions

    Um FetchEvent ou um objeto com a propriedades listadas abaixo.

  • retorna

    Promise&lt;Response&gt;

• handleAll

  void

  Semelhante a workbox-strategies.Strategy~handle, mas em vez de apenas retornar uma Promise que é resolvida como Response, ele vai retornar uma tupla de promessas [response, done], em que a primeira (response) é equivalente ao que handle() retorna, e o último é um Promessa que será resolvida quando houver promessas adicionadas à event.waitUntil() como parte da execução da estratégia foram concluídas.

  Aguarde a promessa done para garantir que qualquer trabalho extra realizado pela a estratégia (geralmente armazenar as respostas em cache) for concluída com êxito.

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

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

  • opções

    FetchEvent | HandlerCallbackOptions

    Um FetchEvent ou um objeto com a propriedades listadas abaixo.

  • retorna

    [Promessa<Resposta>, Promessa<void>]

    Uma tupla de [resposta, concluída] que podem ser usadas para determinar quando a resposta é resolvida conforme bem como quando o manipulador tiver concluído 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 envolve todas as buscas e armazenar em cache ações em torno dos callbacks do plug-in e acompanhar quando a estratégia está "concluído" 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 processa a solicitação.

  O construtor também inicializa o estado que será passado para cada um plug-ins que estão lidando com essa solicitação.

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

  (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

  Corresponde a uma solicitação do cache (e invoca qualquer plug-in aplicável métodos de callback) usando cacheName, matchOptions 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()
  • cachedResponseWillByUsed()

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

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

  • chave

    RequestInfo

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

  • retorna

    Promise&lt;Response&gt;

    Uma resposta correspondente, se encontrada.

• cachePut

  void

  Coloca um par de solicitação/resposta no cache (e invoca qualquer callback do plug-in) usando o cacheName e o plugins definidos na o 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 URL a ser usado como chave de cache.

  • resposta

    Resposta

    A resposta ao cache.

  • retorna

    Promise&lt;boolean&gt;

    false se um cacheWillUpdate causou a resposta não será armazenado em cache. Caso contrário, será true.

• destruir

  void

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

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

  () => {...}

• doneWaiting

  void

  Retorna uma promessa que é resolvida depois que todas as promessas forem passadas para workbox-strategies.StrategyHandler~waitUntil se estabeleceram.

  Observação: qualquer trabalho feito após a liquidação de doneWaiting() precisa ser feito manualmente passado para o método waitUntil() de um evento (não o método método waitUntil()). Caso contrário, a linha de execução do service worker pode ser eliminada antes de concluir seu trabalho.

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

  () => {...}

  • retorna

    Promessa<void>

• fetch

  void

  Busca uma determinada solicitação (e invoca qualquer retorno de chamada de plug-in aplicável métodos) usando fetchOptions (para solicitações que não são de navegação) e plugins definido 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

    Promise&lt;Response&gt;

• fetchAndCachePut

  void

  Chamar this.fetch() e executar this.cachePut() em segundo plano a resposta gerada por this.fetch().

  A chamada para this.cachePut() invoca automaticamente this.waitUntil(), Assim, 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

    Promise&lt;Response&gt;

• getCacheKey

  void

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

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

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

  • solicitação

    Solicitação

  • modo

    "ler"
     | "write"
    

  • retorna

    Promise&lt;Request&gt;

• hasCallback

  void

  Retorna "true" se a estratégia tem pelo menos um plug-in com o valor o retorno de chamada.

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

  (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-ins correspondentes, em que cada callback é unido ao estado atual do gerenciador (ou seja, quando você chamar cada callback, o parâmetro de objeto transmitido vai ser mesclada com o estado atual do plug-in).

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

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

  • nome

    C

    O nome do callback que será executado

  • retorna

    Gerador<NonNullable<indexedAccess>anyunknown>

• runCallbacks

  void

  Executa todos os callbacks do plug-in que correspondem ao nome determinado, em ordem, transmitindo o objeto de parâmetro fornecido (combinou com o estado atual do plug-in) como o único .

  Observação: como este método executa todos os plug-ins, ele não é adequado para casos em que o valor de retorno de um callback precisa ser aplicado antes de chamar o próximo callback. Consulte workbox-strategies.StrategyHandler#iterateCallbacks abaixo para saber como lidar com esse caso.

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

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

  • nome

    C

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

  • param

    Omitir<indexedAccess"state"
    >

    O objeto a ser transmitido como o primeiro (e único) parâmetro ao executar cada callback. Este objeto será mesclado com o estado atual do plug-in antes da execução do retorno de chamada.

  • retorna

    Promessa<void>

• waitUntil

  void

  Adiciona uma promessa ao [estender promessas de vida útil]https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises do 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 foram resolvidas.

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

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

  • promete

    Promessa<T>

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

  • retorna

    Promessa<T>

StrategyOptions

Propriedades

• cacheName

  string opcional

• fetchOptions

  RequestInit opcional

• matchOptions

  CacheQueryOptions opcional

• plugins

  WorkboxPlugin[] opcional