pré-armazenamento em cache da caixa de trabalho

Um recurso dos service workers é a capacidade de salvar um conjunto de arquivos no cache durante a instalação. Isso geralmente é chamado de "pré-armazenamento em cache", já que o conteúdo é armazenado em cache antes do service worker que está sendo usado.

O principal motivo para fazer isso é que isso dá aos desenvolvedores controle sobre o cache, o que significa que eles podem determinar quando e por quanto tempo um arquivo é armazenado em cache, além de disponibilizá-lo no navegador sem acessar a rede. Isso significa que ele pode ser usado para criar apps da Web que funcionam off-line.

O Workbox elimina grande parte do trabalho pesado do armazenamento prévio em cache simplificando a API e garantindo o download eficiente dos recursos.

Como funciona o pré-armazenamento em cache da caixa de trabalho

Quando um app da Web é carregado pela primeira vez, o workbox-precaching analisa todos os recursos que você quer transferir por download, remove as cópias e vincula os eventos relevantes do service worker para fazer o download e armazenar os recursos. Os URLs que já incluem informações de versão (como um hash de conteúdo) são usados como chaves de cache sem qualquer modificação adicional. Os URLs que não incluem informações de controle de versão têm um parâmetro de consulta de URL extra anexado à chave de cache que representa um hash do conteúdo gerado pelo Workbox no tempo de build.

workbox-precaching faz tudo isso durante o evento install do service worker.

Quando um usuário acessar novamente seu app da Web e você tiver um novo service worker com recursos pré-armazenados em cache diferentes, o workbox-precaching vai analisar a nova lista e determinar quais recursos são completamente novos e quais dos recursos atuais precisam ser atualizados com base na revisão. Novos recursos ou atualizações de revisões serão adicionados ao cache durante o evento install do novo service worker.

Esse novo service worker não será usado para responder a solicitações até que o evento activate seja acionado. No evento activate, workbox-precaching verifica se há recursos armazenados em cache que não estejam mais na lista de URLs atuais e os remove do cache.

O workbox-precaching executará essas etapas sempre que o service worker estiver instalado e ativado, garantindo que o usuário tenha os recursos mais recentes e fazendo o download apenas dos arquivos que foram alterados.

Exibição de respostas pré-armazenadas em cache

Chamar precacheAndRoute() ou addRoute() cria uma rota que corresponde às solicitações de URLs armazenados em cache.

A estratégia de resposta utilizada nessa rota é cache-first: a resposta pré-armazenada em cache será usada, a menos que a resposta armazenada em cache não esteja presente (devido a algum erro inesperado). Nesse caso, uma resposta de rede será usada.

A ordem em que você chama precacheAndRoute() ou addRoute() é importante. Normalmente, é melhor chamá-lo no início do arquivo do service worker, antes de registrar outras rotas com registerRoute(). Se você chamou registerRoute() primeiro e essa rota correspondeu a uma solicitação recebida, qualquer estratégia definida nessa rota adicional será usada para responder, em vez da estratégia que prioriza o cache usada por workbox-precaching.

Explicação da lista de pré-cache

O workbox-precaching espera uma matriz de objetos com as propriedades url e revision. Essa matriz às vezes é chamada de manifesto de pré-cache:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute([
  {url: '/index.html', revision: '383676'},
  {url: '/styles/app.0c9a31.css', revision: null},
  {url: '/scripts/app.0d5770.js', revision: null},
  // ... other entries ...
]);

Essa lista faz referência a um conjunto de URLs, cada um com as próprias informações de "revisão".

Para o segundo e o terceiro objetos do exemplo acima, a propriedade revision é definida como null. Isso ocorre porque as informações de revisão estão no próprio URL, o que geralmente é uma prática recomendada para recursos estáticos.

O primeiro objeto (/index.html) define explicitamente uma propriedade de revisão, que é um hash gerado automaticamente do conteúdo do arquivo. Ao contrário dos recursos JavaScript e CSS, os arquivos HTML geralmente não podem incluir informações de revisão nos URLs. Caso contrário, os links para esses arquivos na Web seriam corrompidos sempre que o conteúdo da página fosse alterado.

Ao transmitir uma propriedade de revisão para precacheAndRoute(), o Workbox pode saber quando o arquivo mudou e fazer as atualizações necessárias.

O Workbox inclui ferramentas que ajudam a gerar essa lista:

  • workbox-build: é um pacote de nós que pode ser usado em uma tarefa gulp ou como um script de execução de npm.
  • workbox-webpack-plugin: os usuários do webpack podem usar este plug-in.
  • workbox-cli: nossa CLI também pode ser usada para gerar a lista de recursos e adicioná-los ao service worker.

Solicitações recebidas para arquivos pré-armazenados em cache

Uma coisa que workbox-precaching faz imediatamente é manipular as solicitações de rede recebidas para tentar corresponder arquivos pré-armazenados em cache. Isso se adapta às práticas comuns na Web.

Por exemplo, uma solicitação para / geralmente pode ser atendida pelo arquivo em /index.html.

Abaixo está a lista de manipulações que workbox-precaching executa por padrão e como é possível alterar esse comportamento.

Ignorar parâmetros de URL

As solicitações com parâmetros de pesquisa podem ser alteradas para remover valores específicos ou todos os valores.

Por padrão, os parâmetros de pesquisa que começam com utm_ ou correspondem exatamente a fbclid são removidos, o que significa que uma solicitação de /about.html?utm_campaign=abcd será atendida com uma entrada pré-armazenada em cache para /about.html.

Você pode ignorar um conjunto diferente de parâmetros de pesquisa usando ignoreURLParametersMatching:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(
  [
    {url: '/index.html', revision: '383676'},
    {url: '/styles/app.0c9a31.css', revision: null},
    {url: '/scripts/app.0d5770.js', revision: null},
  ],
  {
    // Ignore all URL parameters.
    ignoreURLParametersMatching: [/.*/],
  }
);

Índice do diretório

Por padrão, as solicitações que terminam em / vão ser correspondidas com entradas com um index.html anexado ao final. Isso significa que uma solicitação de entrada para / pode ser processada automaticamente com a entrada /index.html armazenada em cache.

É possível alterar isso para outra coisa ou desativá-lo completamente, definindo directoryIndex:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(
  [
    {url: '/index.html', revision: '383676'},
    {url: '/styles/app.0c9a31.css', revision: null},
    {url: '/scripts/app.0d5770.js', revision: null},
  ],
  {
    directoryIndex: null,
  }
);

Limpar URLs

Se uma solicitação não corresponder ao pré-cache, vamos adicionar .html no final para oferecer suporte a URLs "limpos" (também conhecidos como URLs "bonitos"). Isso significa que uma solicitação como /about será processada pela entrada pré-armazenada em cache para /about.html.

Você pode desativar esse comportamento definindo cleanUrls:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute([{url: '/about.html', revision: 'b79cd4'}], {
  cleanUrls: false,
});

Manipulações personalizadas

Se você quiser definir correspondências personalizadas de solicitações recebidas para recursos armazenados previamente em cache, poderá fazer isso com a opção urlManipulation. É um callback que retorna uma matriz de possíveis correspondências.

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(
  [
    {url: '/index.html', revision: '383676'},
    {url: '/styles/app.0c9a31.css', revision: null},
    {url: '/scripts/app.0d5770.js', revision: null},
  ],
  {
    urlManipulation: ({url}) => {
      // Your logic goes here...
      return [alteredUrlOption1, alteredUrlOption2];
    },
  }
);

Uso avançado

Como usar o PrecacheController diretamente

Por padrão, o workbox-precaching configura os listeners install e activate automaticamente. Para desenvolvedores familiarizados com service workers, isso pode não ser a opção ideal se você precisa de mais controle.

Em vez de usar a exportação padrão, é possível usar o PrecacheController diretamente para adicionar itens ao pré-cache, determinar quando esses recursos serão instalados e quando a limpeza precisa ocorrer.

import {PrecacheController} from 'workbox-precaching';

const precacheController = new PrecacheController();
precacheController.addToCacheList([
  {url: '/styles/example-1.abcd.css', revision: null},
  {url: '/styles/example-2.1234.css', revision: null},
  {url: '/scripts/example-1.abcd.js', revision: null},
  {url: '/scripts/example-2.1234.js', revision: null},
]);

precacheController.addToCacheList([{
  url: '/index.html',
  revision: 'abcd',
}, {
  url: '/about.html',
  revision: '1234',
}]);

self.addEventListener('install', (event) => {
  // Passing in event is required in Workbox v6+
  event.waitUntil(precacheController.install(event));
});

self.addEventListener('activate', (event) => {
  // Passing in event is required in Workbox v6+
  event.waitUntil(precacheController.activate(event));
});

self.addEventListener('fetch', (event) => {
  const cacheKey = precacheController.getCacheKeyForURL(event.request.url);
  event.respondWith(caches.match(cacheKey).then(...));
});

Leitura direta de recursos pré-armazenados em cache

Há momentos em que talvez seja necessário ler um recurso pré-armazenado em cache diretamente, fora do contexto do roteamento que workbox-precaching pode executar automaticamente. Por exemplo, é possível pré-armazenar em cache modelos HTML parciais que precisam ser recuperados e usados na criação de uma resposta completa.

Em geral, é possível usar a API Cache Storage para acessar os objetos Response pré-armazenados em cache, mas há uma quebra: a chave de cache do URL que precisa ser usada ao chamar cache.match() pode conter um parâmetro de controle de versão que workbox-precaching cria e mantém automaticamente.

Para conseguir a chave de cache correta, chame getCacheKeyForURL(), transmitindo o URL original e, em seguida, use o resultado para executar um cache.match() no cache apropriado.

import {cacheNames} from 'workbox-core';
import {getCacheKeyForURL} from 'workbox-precaching';

const cache = await caches.open(cacheNames.precache);
const response = await cache.match(getCacheKeyForURL('/precached-file.html'));

Como alternativa, se você só precisa do objeto Response pré-armazenado em cache, chame matchPrecache(), que vai usar automaticamente a chave de cache correta e pesquisar no cache correto:

import {matchPrecache} from 'workbox-precaching';

const response = await matchPrecache('/precached-file.html');

Limpar pré-caches antigos

A maioria das versões do Workbox mantém o mesmo formato para armazenar dados pré-armazenados em cache, e os pré-caches criados por versões mais antigas do Workbox geralmente podem ser usados no estado em que se encontram em versões mais recentes. No entanto, raramente ocorre uma alteração interruptiva no armazenamento de pré-armazenamento em cache que exija que os usuários façam o download de tudo novamente, o que torna obsoletos os dados pré-armazenados em cache anteriormente. Essa mudança ocorreu entre as versões do Workbox v3 e v4.

Esses dados obsoletos não interferem nas operações normais, mas contribuem para o uso geral da cota de armazenamento. Além disso, pode ser mais fácil para os usuários excluí-los explicitamente. É possível fazer isso adicionando cleanupOutdatedCaches() ao service worker ou definindo cleanupOutdatedCaches: true se você estiver usando uma das ferramentas de build do Workbox para gerar o service worker.

Como usar a integridade de recursos secundários

Alguns desenvolvedores podem querer as garantias extras oferecidas pela aplicação da integridade de sub-recursos ao recuperar URLs pré-armazenados em cache da rede.

Uma outra propriedade opcional chamada integrity pode ser adicionada a qualquer entrada no manifesto de pré-cache. Se fornecido, ele será usado como o valor integrity ao construir o Request usado para preencher o cache. Se houver uma incompatibilidade, o processo de pré-armazenamento em cache falhará.

Determinar quais entradas de manifesto de pré-cache precisam ter propriedades integrity e descobrir os valores apropriados a serem usados está fora do escopo das ferramentas de build do Workbox. Em vez disso, os desenvolvedores que quiserem ativar essa funcionalidade precisarão modificar o manifesto de pré-cache gerado pelo Workbox para adicionar as informações apropriadas. A opção manifestTransform na configuração de ferramentas de build do Workbox pode ajudar a:

const ssri = require('ssri');

const integrityManifestTransform = (originalManifest, compilation) => {
  const warnings = [];
  const manifest = originalManifest.map(entry => {
    // If some criteria match:
    if (entry.url.startsWith('...')) {
      // This has to be a synchronous function call, for example:
      // compilation will be set when using workbox-webpack-plugin.
      // When using workbox-build directly, you can read the file's
      // contents from disk using, e.g., the fs module.
      const asset = compilation.getAsset(entry.url);
      entry.integrity = ssri.fromData(asset.source.source()).toString();

      // Push a message to warnings if needed.
    }
    return entry;
  });

  return {warnings, manifest};
};

// Then add manifestTransform: [integrityManifestTransform]
// to your Workbox build configuration.

Tipos

CleanupResult

Propriedades

  • deletedCacheRequests

    string[]

InstallResult

Propriedades

  • notUpdatedURLs

    string[]

  • updatedURLs

    string[]

PrecacheController

Realiza armazenamento prévio em cache eficiente de recursos.

Propriedades

  • construtor

    void

    Crie um novo PrecacheController.

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

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

    • do modelo.

      PrecacheControllerOptions opcional

  • de estratégia

    Estratégia

  • ativar

    void

    Exclui recursos que não estão mais presentes no manifesto de pré-cache atual. Chame esse método no evento de ativação do service worker.

    Observação: esse método chama event.waitUntil() para que você não precise chamá-lo nos manipuladores de eventos.

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

    (event: ExtendableEvent) => {...}

    • event

      ExtendableEvent

  • addToCacheList

    void

    Esse método adicionará itens à lista de pré-cache, removendo duplicatas e garantindo que as informações sejam válidas.

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

    (entries: (string | PrecacheEntry)[]) => {...}

    • entries

      (string | PrecacheEntry)[]

      Matriz de entradas para pré-armazenar em cache.

  • createHandlerBoundToURL

    void

    Retorna uma função que pesquisa url no pré-cache (considerando as informações de revisão da conta) e retorna o Response correspondente.

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

    (url: string) => {...}

    • url

      string

      O URL pré-armazenado em cache que será usado para procurar o Response.

  • getCacheKeyForURL

    void

    Retorna a chave de cache usada para armazenar um determinado URL. Se esse URL não tiver controle de versão, como "/index.html", a chave de cache será o URL original com um parâmetro de pesquisa anexado a ela.

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

    (url: string) => {...}

    • url

      string

      Um URL cuja chave de cache você quer procurar.

    • retorna

      string

      O URL com controle de versão que corresponde a uma chave de cache para o URL original ou "undefined" se esse URL não está armazenado em cache.

  • getCachedURLs

    void

    Retorna uma lista de todos os URLs que foram armazenados previamente em cache pelo service worker atual.

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

    () => {...}

    • retorna

      string[]

      Os URLs armazenados previamente em cache.

  • getIntegrityForCacheKey

    void

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

    (cacheKey: string) => {...}

    • cacheKey

      string

    • retorna

      string

      A integridade do sub-recurso associada à chave de cache ou indefinida se ela não estiver definida.

  • getURLsToCacheKeys

    void

    Retorna o mapeamento de um URL pré-armazenado em cache para a chave de cache correspondente, considerando as informações de revisão do URL.

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

    () => {...}

    • retorna

      Mapa<string>

      Um URL para armazenar em cache o mapeamento de chave.

  • instalar

    void

    Faz o pré-armazenamento de recursos novos e atualizados. Chame esse método no evento de instalação do service worker.

    Observação: esse método chama event.waitUntil() para que você não precise chamá-lo nos manipuladores de eventos.

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

    (event: ExtendableEvent) => {...}

    • event

      ExtendableEvent

  • matchPrecache

    void

    Ele funciona como uma substituição simples para cache.match() com as seguintes diferenças:

    • Ele sabe o nome do pré-cache e só verifica esse cache.
    • Ele permite que você transmita um URL "original" sem parâmetros de controle de versão e procura automaticamente a chave de cache correta para a revisão ativa no momento desse URL.

    Por exemplo: matchPrecache('index.html') encontrará a resposta pré-armazenada em cache correta para o service worker ativo no momento, mesmo que a chave de cache real seja '/index.html?__WB_REVISION__=1234abcd'.

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

    (request: string | Request) => {...}

    • request

      string | Solicitação

      A chave (sem parâmetros de revisão) a ser pesquisada no pré-cache.

    • retorna

      Promessa<Resposta>

  • pré-armazenar em cache

    void

    Adiciona itens à lista de pré-cache, removendo quaisquer duplicatas e armazena os arquivos no cache" quando o service worker é instalado.

    Esse método pode ser chamado várias vezes.

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

    (entries: (string | PrecacheEntry)[]) => {...}

PrecacheEntry

Propriedades

  • integridade

    string opcional

  • revisão

    string opcional

  • url

    string

PrecacheFallbackPlugin

PrecacheFallbackPlugin permite especificar uma resposta de "substituto off-line" a ser usada quando determinada estratégia não consegue gerar uma resposta.

Ele faz isso interceptando o callback do plug-in handlerDidError e retornando uma resposta pré-armazenada em cache, considerando automaticamente o parâmetro de revisão esperado.

A menos que você transmita explicitamente uma instância PrecacheController para o construtor, a instância padrão será usada. De modo geral, a maioria dos desenvolvedores acaba usando o padrão.

Propriedades

  • construtor

    void

    Constrói um novo PrecacheFallbackPlugin com o fallbackURL associado.

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

    (config: object) => {...}

    • config

      objeto

      • fallbackURL

        string

        Um URL pré-armazenado em cache para usar como substituto se a estratégia associada não conseguir gerar uma resposta.

      • precacheController

PrecacheRoute

Uma subclasse de workbox-routing.Route que usa uma instância de workbox-precaching.PrecacheController para corresponder às solicitações recebidas e processar as respostas de busca do pré-cache.

Propriedades

PrecacheRouteOptions

Propriedades

  • cleanURLs

    booleano opcional

  • directoryIndex

    string opcional

  • ignoreURLParametersMatching

    RegExp[] opcional

  • urlManipulation

    urlManipulation opcional

PrecacheStrategy

Uma implementação de workbox-strategies.Strategy projetada especificamente para funcionar com workbox-precaching.PrecacheController para armazenar recursos em cache e buscar recursos pré-armazenados em cache.

Observação: uma instância dessa classe é criada automaticamente ao criar uma PrecacheController. Geralmente, não é necessário criá-la por conta própria.

Propriedades

  • construtor

    void

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

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

    • do modelo.

      PrecacheStrategyOptions opcional

  • cacheName

    string

  • fetchOptions

    RequestInit opcional

  • matchOptions

    CacheQueryOptions opcional

  • plugins
  • copyRedirectedCacheableResponsesPlugin
  • defaultPrecacheCacheabilityPlugin
  • _awaitComplete

    void

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

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

    • responseDone

      Promessa<Resposta>

    • handler
    • request

      Solicitação

    • event

      ExtendableEvent

    • retorna

      Promise<void>

  • _getResponse

    void

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

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

    • retorna

      Promessa<Resposta>

  • _handleFetch

    void

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

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

    • retorna

      Promessa<Resposta>

  • _handleInstall

    void

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

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

    • retorna

      Promessa<Resposta>

  • identificador

    void

    Executa uma estratégia de solicitação e retorna um Promise que será resolvido com um Response, invocando todos os callbacks de plug-in relevantes.

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

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

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

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

    • do modelo.

      FetchEvent | HandlerCallbackOptions

      Um FetchEvent ou um objeto com as propriedades listadas abaixo.

    • retorna

      Promessa<Resposta>

  • handleAll

    void

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

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

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

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

    • do modelo.

      FetchEvent | HandlerCallbackOptions

      Um FetchEvent ou um objeto com as propriedades listadas abaixo.

    • retorna

      [Promise<Response>, Promise<void>]

      Uma tupla de promessas [response,done] que pode ser usada para determinar quando a resposta é resolvida, bem como quando o gerenciador concluiu todo o trabalho.

urlManipulation()

workbox-precaching.urlManipulation(
  { url }: object,
)

Tipo

função

Parâmetros

  • { URL }

    objeto

    • url

      URL

Retorna

  • URL[]

Métodos

addPlugins()

workbox-precaching.addPlugins(
  plugins: WorkboxPlugin[],
)

Adiciona plug-ins à estratégia de pré-armazenamento em cache.

Parâmetros

addRoute()

workbox-precaching.addRoute(
  options?: PrecacheRouteOptions,
)

Adicione um listener fetch ao service worker que responderá a [solicitações de rede]https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers#Custom_responses_to_requests com recursos pré-armazenados em cache.

Para solicitações de recursos que não são pré-armazenados em cache, o FetchEvent não é respondido, permitindo que o evento passe para outros listeners de eventos fetch.

Parâmetros

cleanupOutdatedCaches()

workbox-precaching.cleanupOutdatedCaches()

Adição de um listener de eventos activate, que limpa pré-caches incompatíveis criados por versões mais antigas do Workbox.

createHandlerBoundToURL()

workbox-precaching.createHandlerBoundToURL(
  url: string,
)

Função auxiliar que chama PrecacheController#createHandlerBoundToURL na instância PrecacheController padrão.

Se você estiver criando seu próprio PrecacheController, chame o PrecacheController#createHandlerBoundToURL nessa instância, em vez de usar essa função.

Parâmetros

  • url

    string

    O URL pré-armazenado em cache que será usado para procurar o Response.

getCacheKeyForURL()

workbox-precaching.getCacheKeyForURL(
  url: string,
)

Recebe um URL e retorna o URL correspondente que pode ser usado para pesquisar a entrada no pré-cache.

Se um URL relativo for fornecido, a localização do arquivo do service worker será usada como base.

Para entradas armazenadas previamente em cache sem informações de revisão, a chave de cache será a mesma do URL original.

Para entradas armazenadas em cache com informações de revisão, a chave de cache será o URL original com a adição de um parâmetro de consulta usado para acompanhar as informações de revisão.

Parâmetros

  • url

    string

    O URL cuja chave de cache será pesquisada.

Retorna

  • string | indefinida

    A chave de cache que corresponde a esse URL.

matchPrecache()

workbox-precaching.matchPrecache(
  request: string | Request,
)

Função auxiliar que chama PrecacheController#matchPrecache na instância PrecacheController padrão.

Se você estiver criando seu próprio PrecacheController, chame PrecacheController#matchPrecache nessa instância, em vez de usar essa função.

Parâmetros

  • request

    string | Solicitação

    A chave (sem parâmetros de revisão) a ser pesquisada no pré-cache.

Retorna

  • Promise<Response | undefined>

precache()

workbox-precaching.precache(
  entries: (string | PrecacheEntry)[],
)

Adiciona itens à lista de pré-cache, removendo quaisquer duplicatas e armazena os arquivos no cache" quando o service worker é instalado.

Esse método pode ser chamado várias vezes.

Observação: esse método não veicula nenhum dos arquivos armazenados em cache para você. Ela apenas armazena arquivos previamente em cache. Para responder a uma solicitação de rede, chame workbox-precaching.addRoute.

Se você tiver uma única matriz de arquivos para pré-armazenar em cache, basta chamar workbox-precaching.precacheAndRoute.

Parâmetros

precacheAndRoute()

workbox-precaching.precacheAndRoute(
  entries: (string | PrecacheEntry)[],
  options?: PrecacheRouteOptions,
)

Esse método vai adicionar entradas à lista de pré-cache e adicionar uma rota para responder aos eventos de busca.

Esse é um método conveniente que vai chamar workbox-precaching.precache e workbox-precaching.addRoute em uma única chamada.

Parâmetros