É bastante comum querer colocar restrições em um cache em termos de quanto tempo
ele permite que itens sejam armazenados em um cache ou quantos itens precisam ser
mantidos em um cache. O Workbox oferece essa funcionalidade usando o
plug-in workbox-expiration
, que permite limitar o número de
entradas em um cache e / ou remover entradas armazenadas em cache por um
longo período.
Restringir o número de entradas de cache
Para restringir o número de entradas armazenadas em um cache, use a
opção maxEntries
da seguinte maneira:
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({
maxEntries: 20,
}),
],
})
);
Com isso, o plug-in será adicionado a essa rota. Depois que uma resposta em cache é usada ou uma nova solicitação é adicionada ao cache, o plug-in verifica o cache configurado e garante que o número de entradas em cache não exceda o limite. Se for o caso, as entradas mais antigas serão removidas.
Restringir a idade das entradas em cache
Para restringir por quanto tempo uma solicitação é armazenada em cache, é possível definir uma idade máxima em
segundos usando a opção maxAgeSeconds
da seguinte maneira:
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({
maxAgeSeconds: 24 * 60 * 60,
}),
],
})
);
O plug-in verificará e removerá entradas após cada solicitação ou atualização de cache.
Uso avançado
Se você quiser usar a lógica de expiração separada de qualquer outro módulo do
Workbox, faça isso com a
classe
CacheExpiration
.
Para aplicar restrições a um cache, crie uma instância de CacheExpiration
para o cache que você quer controlar, da seguinte maneira:
import {CacheExpiration} from 'workbox-expiration';
const cacheName = 'my-cache';
const expirationManager = new CacheExpiration(cacheName, {
maxAgeSeconds: 24 * 60 * 60,
maxEntries: 20,
});
Sempre que você atualizar uma entrada armazenada em cache, será necessário chamar o método updateTimestamp()
para que a idade dela seja atualizada.
await openCache.put(request, response);
await expirationManager.updateTimestamp(request.url);
Em seguida, sempre que você quiser expirar um conjunto de entradas, chame o
método expireEntries()
, que vai aplicar a configuração maxAgeSeconds
e
maxEntries
.
await expirationManager.expireEntries();
Tipos
CacheExpiration
A classe CacheExpiration
permite definir uma expiração e / ou
limite para o número de respostas armazenadas em um
Cache
.
Propriedades
-
construtor
void
Para criar uma nova instância CacheExpiration, é preciso fornecer pelo menos uma das propriedades
config
.A função
constructor
tem esta aparência:(cacheName: string, config?: CacheExpirationConfig) => {...}
-
cacheName
string
Nome do cache ao qual as restrições serão aplicadas.
-
config
CacheExpirationConfig opcional
-
retorna
-
-
excluir
void
Remove o armazenamento de objetos IndexedDB usado para acompanhar os metadados de expiração do cache.
A função
delete
tem esta aparência:() => {...}
-
retorna
Promise<void>
-
-
expireEntries
void
Expira as entradas do cache e dos critérios fornecidos.
A função
expireEntries
tem esta aparência:() => {...}
-
retorna
Promise<void>
-
-
isURLExpired
void
Pode ser usado para verificar se um URL expirou ou não antes de ser usado.
Isso requer uma busca no IndexedDB, portanto, pode ser lento.
Observação: esse método não vai remover a entrada armazenada em cache. Chame
expireEntries()
para remover as entradas indexadasDB e do Cache.A função
isURLExpired
tem esta aparência:(url: string) => {...}
-
url
string
-
retorna
Promise<boolean>
-
-
updateTimestamp
void
Atualize o carimbo de data/hora do URL fornecido. Isso garante que, ao remover entradas com base no número máximo de entradas, usadas mais recentemente, seja preciso ou, ao expirar, o carimbo de data/hora esteja atualizado.
A função
updateTimestamp
tem esta aparência:(url: string) => {...}
-
url
string
-
retorna
Promise<void>
-
ExpirationPlugin
Este plug-in pode ser usado em um workbox-strategy
para impor regularmente um
limite na idade e / ou no número de solicitações armazenadas em cache.
Só pode ser usado com instâncias de workbox-strategy
que têm um
conjunto de propriedades cacheName
personalizadas.
Em outras palavras, ele não pode ser usado para expirar entradas em uma estratégia que usa o
nome do cache de tempo de execução padrão.
Sempre que uma resposta em cache for usada ou atualizada, esse plug-in vai examinar o cache associado e remover todas as respostas antigas ou extras.
Ao usar maxAgeSeconds
, as respostas podem ser usadas uma vez após a expiração,
porque a limpeza da expiração não vai ocorrer até depois que a
resposta armazenada em cache foi usada. Se a resposta tiver um cabeçalho "Date",
uma verificação leve de expiração será realizada e a resposta não será
usada imediatamente.
Ao usar maxEntries
, a entrada solicitada mais recentemente será removida do cache primeiro.
Propriedades
-
construtor
void
A função
constructor
tem esta aparência:(config?: ExpirationPluginOptions) => {...}
-
config
ExpirationPluginOptions opcional
-
retorna
-
-
deleteCacheAndMetadata
void
Este é um método auxiliar que executa duas operações:
- Exclui todas as instâncias de Cache associadas associadas a esta instância de plug-in chamando caches.delete() em seu nome.
- Exclui os metadados do IndexedDB usados para acompanhar os detalhes de expiração de cada instância do Cache.
Ao usar a expiração do cache, chamar esse método é preferível a chamar
caches.delete()
diretamente, porque isso vai garantir que os metadados do IndexedDB também sejam removidos de forma limpa e que as instâncias abertas do IndexedDB sejam excluídas.Se você não estiver usando a expiração para um determinado cache, chamar
caches.delete()
e transmitir o nome do cache será suficiente. Nesse caso, não é necessário um método específico do Workbox para fazer a limpeza.A função
deleteCacheAndMetadata
tem esta aparência:() => {...}
-
retorna
Promise<void>
ExpirationPluginOptions
Propriedades
-
matchOptions
CacheQueryOptions opcional
-
maxAgeSeconds
número opcional
-
maxEntries
número opcional
-
purgeOnQuotaError
booleano opcional