pré-armazenamento em cache da caixa de trabalho

Um recurso dos service workers é a capacidade de salvar um conjunto de arquivos no cache quando o service worker está sendo instalado. Isso é frequentemente chamado de "pré-cache", porque você armazena em cache o conteúdo antes do service worker ser usado.

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

O Workbox simplifica a API e garante que os recursos sejam transferidos por download de maneira eficiente, eliminando muito do trabalho pesado da pré-cacheação.

Como o workbox-precaching funciona

Quando um app da Web é carregado pela primeira vez, o workbox-precaching analisa todos os recursos que você quer fazer o download, remove as duplicações e conecta os eventos relevantes do worker de serviço para fazer o download e armazenar os recursos. Os URLs que já incluem informações de controle de versão (como um hash de conteúdo) são usados como chaves de cache sem nenhuma outra modificação. 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, representando um hash do conteúdo que o Workbox gera no momento do build.

O workbox-precaching faz tudo isso durante o evento install do worker de serviço.

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

Esse novo worker de serviço não será usado para responder a solicitações até que o evento activate seja acionado. É no evento activate que o workbox-precaching vai verificar se há recursos em cache que não estão mais presentes na lista de URLs atuais e removê-los do cache.

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

Como exibir respostas pré-armazenadas

Chamar precacheAndRoute() ou addRoute() cria uma rota que corresponde a solicitações de URLs pré-armazenados em cache.

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

A ordem em que você chama precacheAndRoute() ou addRoute() é importante. Normalmente, é recomendável chamar o método 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 de entrada, a estratégia definida nessa rota adicional será usada para responder, em vez da estratégia de cache-first usada por workbox-precaching.

Explicação da lista de pré-cache

workbox-precaching espera uma matriz de objetos com uma propriedade 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 informações de "revisão".

Para o segundo e o terceiro objeto no 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 interrompidos sempre que o conteúdo da página mudasse.

Ao transmitir uma propriedade de revisão para precacheAndRoute(), o Workbox pode saber quando o arquivo foi alterado e atualizá-lo de acordo.

O Workbox vem com ferramentas para ajudar a gerar essa lista:

  • workbox-build: é um pacote de nó que pode ser usado em uma tarefa do gulp ou como um script de execução do npm.
  • workbox-webpack-plugin: os usuários do webpack podem usar esse 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 de arquivos pré-armazenados em cache

Uma coisa que a workbox-precaching vai fazer é manipular as solicitações de rede recebidas para tentar corresponder aos arquivos pré-armazenados em cache. Isso aceita práticas comuns na Web.

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

Confira abaixo a lista de manipulações que o workbox-precaching executa por padrão e como 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.

É possível 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 / são associadas a entradas com um index.html anexado ao final. Isso significa que uma solicitação recebida para / pode ser processada automaticamente com a entrada /index.html pré-armazenada em cache.

É possível alterar esse valor 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,
  }
);

URLs limpos

Se uma solicitação não corresponder à pré-cache, vamos adicionar .html ao 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.

Para desativar esse comportamento, defina 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 pré-armazenados em cache, faça isso com a opção urlManipulation. Ele precisa ser 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 para você. Para desenvolvedores que conhecem os service workers, isso pode não ser desejável se você precisar de mais controle.

Em vez de usar a exportação padrão, use o PrecacheController diretamente para adicionar itens ao pré-cache, determinar quando esses recursos sã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(...));
});

Como ler recursos pré-armazenados em cache diretamente

Há momentos em que você pode precisar ler um recurso pré-armazenado em cache diretamente, fora do contexto do roteamento que o workbox-precaching pode executar automaticamente. Por exemplo, talvez você queira pré-cachear modelos HTML parciais que precisam ser recuperados e usados ao criar uma resposta completa.

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

Para receber a chave de cache correta, chame getCacheKeyForURL(), transmitindo o URL original e 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 tudo o que você 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 precaches 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 normalmente podem ser usados como estão por versões mais recentes. No entanto, raramente, há uma mudança de interrupção no armazenamento de pré-cache que exige que os usuários façam o download de tudo novamente e que torna os dados pré-armazenados obsoletos. Essa mudança ocorreu entre as versões v3 e v4 do Workbox.

Esses dados obsoletos não interferem nas operações normais, mas contribuem para o uso geral da cota de armazenamento e podem ser mais fáceis de excluir explicitamente para os usuários. Para fazer isso, adicione cleanupOutdatedCaches() ao service worker ou defina cleanupOutdatedCaches: true se você estiver usando uma das ferramentas de build do Workbox para gerar o service worker.

Como usar a integridade do subrecurso

Alguns desenvolvedores podem querer as garantias adicionais oferecidas pela aplicação da integridade de subrecursos ao recuperar URLs pré-armazenados na rede.

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

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

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 o pré-cache eficiente de recursos.

Propriedades

  • construtor

    void

    Crie um novo PrecacheController.

    A função constructor é semelhante a esta: 

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

    • opções

      PrecacheControllerOptions opcional

  • 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 do evento de ativação do worker do serviço.

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

    A função activate é semelhante a esta: 

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

    • evento

      ExtendableEvent

  • addToCacheList

    void

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

    A função addToCacheList é semelhante a esta: 

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

    • entries

      (string | PrecacheEntry)[]

      Matriz de entradas para pré-cache.

  • createHandlerBoundToURL

    void

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

    A função createHandlerBoundToURL é semelhante a esta: 

    (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 versão, como "/index.html", a chave do cache será o URL original com um parâmetro de pesquisa anexado.

    A função getCacheKeyForURL é semelhante a esta: 

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

    • url

      string

      Um URL com a chave de cache que você quer consultar.

    • retorna

      string

      O URL com versão que corresponde a uma chave de cache do URL original ou indefinido se o URL não estiver pré-armazenado em cache.

  • getCachedURLs

    void

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

    A função getCachedURLs é semelhante a esta: 

    () => {...}

    • retorna

      string[]

      Os URLs pré-armazenados em cache.

  • getIntegrityForCacheKey

    void

    A função getIntegrityForCacheKey é semelhante a esta: 

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

    • cacheKey

      string

    • retorna

      string

      A integridade da sub-recurso associada à chave de cache ou "undefined" se não estiver definida.

  • getURLsToCacheKeys

    void

    Retorna um 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 é semelhante a esta: 

    () => {...}

    • retorna

      Map<stringstring>

      Um mapeamento de URL para chave de cache.

  • instalar

    void

    Armazena em cache os recursos novos e atualizados. Chame esse método do evento de instalação do worker de serviço.

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

    A função install é semelhante a esta: 

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

    • evento

      ExtendableEvent

  • matchPrecache

    void

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

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

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

    A função matchPrecache é semelhante a esta: 

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

    • solicitação

      string | Request

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

    • retorna

      Promise<Response>

  • pré-cache

    void

    Adiciona itens à lista de pré-cache, removendo duplicatas e armazenando os arquivos no cache quando o worker do serviço é instalado.

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

    A função precache é semelhante a esta: 

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

PrecacheEntry

Propriedades

  • integridade

    string opcional

  • revisão

    string opcional

  • url

    string

PrecacheFallbackPlugin

PrecacheFallbackPlugin permite especificar uma resposta de "alternativa off-line" para ser usada quando uma determinada estratégia não conseguir gerar uma resposta.

Isso é feito 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. Em geral, a maioria dos desenvolvedores acaba usando o padrão.

Propriedades

  • construtor

    void

    Cria um novo PrecacheFallbackPlugin com o fallbackURL associado.

    A função constructor é semelhante a esta: 

    (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

        PrecacheController opcional

PrecacheRoute

Uma subclasse de workbox-routing.Route que recebe uma instância de workbox-precaching.PrecacheController e a usa para corresponder às solicitações recebidas e processar a busca de respostas 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 em cache e buscar recursos pré-armazenados em cache.

Observação: uma instância dessa classe é criada automaticamente ao criar um PrecacheController. Geralmente, não é necessário criar essa instância.

Propriedades

  • construtor

    void

    A função constructor é semelhante a esta: 

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

    • opções

      PrecacheStrategyOptions opcional

  • cacheName

    string

  • fetchOptions

    RequestInit opcional

  • matchOptions

    CacheQueryOptions opcional

  • plugins

    WorkboxPlugin[]

  • copyRedirectedCacheableResponsesPlugin

    WorkboxPlugin

  • defaultPrecacheCacheabilityPlugin

    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>

  • _handleFetch

    void

    A função _handleFetch é semelhante a esta: 

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

    • retorna

      Promise<Response>

  • _handleInstall

    void

    A função _handleInstall é semelhante a esta: 

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

    • retorna

      Promise<Response>

  • handle

    void

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

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

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

    A função handle é semelhante a esta: 

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

    • opções

      FetchEvent | HandlerCallbackOptions

      Um FetchEvent ou um objeto com as propriedades listadas abaixo.

    • retorna

      Promise<Response>

  • handleAll

    void

    Semelhante a workbox-strategies.Strategy~handle, mas, em vez de retornar apenas um Promise que é resolvido como um Response, ele vai retornar um conjunto de promessas [response, done], em que o primeiro (response) é equivalente ao que handle() retorna, e o último é 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, respostas de armazenamento em cache) 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.

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

Parâmetros

addRoute()

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

Adicione um listener fetch ao worker de serviço que vai 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 vai responder, permitindo que o evento seja encaminhado para outros listeners de evento fetch.

Parâmetros

cleanupOutdatedCaches()

workbox-precaching.cleanupOutdatedCaches()

Adiciona um listener de eventos activate, que limpa os 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 sua própria 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.

Retorna

getCacheKeyForURL()

workbox-precaching.getCacheKeyForURL(
  url: string,
)

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

Se um URL relativo for fornecido, o local do arquivo do service worker será usado como base.

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

Para entradas pré-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 da chave de cache a ser pesquisada.

Retorna

  • string | indefinido

    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 sua própria PrecacheController, chame PrecacheController#matchPrecache nessa instância, em vez de usar essa função.

Parâmetros

  • solicitação

    string | Request

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

Retorna

  • Promise<Response | undefined>

precache()

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

Adiciona itens à lista de pré-cache, removendo duplicatas e armazenando os arquivos no cache quando o worker do serviço é instalado.

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

Observação: esse método não vai exibir nenhum dos arquivos em cache. Ele só armazena arquivos em cache. Para responder a uma solicitação de rede, chame workbox-precaching.addRoute.

Se você tiver uma única matriz de arquivos para pré-cachear, 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 uma rota para responder a eventos de busca.

Este é um método prático que chama workbox-precaching.precache e workbox-precaching.addRoute em uma única chamada.

Parâmetros