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
-
retorna
-
-
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
-
retorna
Promise<CleanupResult>
-
-
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 oResponse
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
.
-
retorna
-
-
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
-
retorna
Promise<InstallResult>
-
-
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)[]) => {...}
-
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
PrecacheController opcional
-
-
retorna
-
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
-
construtor
void
A função
constructor
tem esta aparência:(precacheController: PrecacheController, options?: PrecacheRouteOptions) => {...}
-
precacheController
Uma instância
PrecacheController
usada para corresponder solicitações e responder a eventos de busca. -
do modelo.
PrecacheRouteOptions opcional
-
retorna
-
-
catchHandler
RouteHandlerObject opcional
-
handler
-
correspondência
-
method
HTTPMethod
-
setCatchHandler
void
A função
setCatchHandler
tem esta aparência:(handler: RouteHandler) => {...}
-
handler
Função de callback que retorna uma promessa que é resolvida em uma resposta.
-
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
-
retorna
-
-
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) => {...}
-
handler
-
request
Solicitação
-
event
ExtendableEvent
-
retorna
Promessa<Resposta>
-
-
_handleFetch
void
A função
_handleFetch
tem esta aparência:(request: Request, handler: StrategyHandler) => {...}
-
request
Solicitação
-
handler
-
retorna
Promessa<Resposta>
-
-
_handleInstall
void
A função
_handleInstall
tem esta aparência:(request: Request, handler: StrategyHandler) => {...}
-
request
Solicitação
-
handler
-
retorna
Promessa<Resposta>
-
-
identificador
void
Executa uma estratégia de solicitação e retorna um
Promise
que será resolvido com umResponse
, 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 paraevent.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 umPromise
que é resolvido para umResponse
, ele vai retornar uma tupla de promessas[response, done]
, em que a primeira (response
) é equivalente ao quehandle()
retorna, e a última é uma promessa que será resolvida quando todas as promessas que foram adicionadas aevent.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
-
plugins
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
-
do modelo.
PrecacheRouteOptions opcional
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
.
Retorna
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
-
entries
(string | PrecacheEntry)[]
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
-
entries
(string | PrecacheEntry)[]
Matriz de entradas para pré-armazenar em cache.
-
do modelo.
PrecacheRouteOptions opcional