Todos os navegadores impõem um limite máximo para o uso de armazenamento de origin do seu app da Web. É possível configurar o Workbox para limpar automaticamente os dados armazenados em cache no momento da execução. Isso evita limitações de cota de armazenamento que podem afetar a eficiência e a confiabilidade do armazenamento em cache do seu site.
Quais opções de configuração são compatíveis?
Ao configurar uma estratégia de armazenamento em cache de rota e ambiente de execução, é possível adicionar uma instância de ExpirationPlugin do workbox-expiration, com configurações adequadas para o tipo de recurso armazenado em cache.
Por exemplo, a configuração a seguir pode ser usada para armazenar imagens em cache no tempo de execução, com limites explícitos e limpeza automática se a cota for excedida:
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {ExpirationPlugin} from 'workbox-expiration';
registerRoute(
({request}) => request.destination === 'image',
// Use a cache-first strategy with the following config:
new CacheFirst({
// You need to provide a cache name when using expiration.
cacheName: 'images',
plugins: [
new ExpirationPlugin({
// Keep at most 50 entries.
maxEntries: 50,
// Don't keep any entries for more than 30 days.
maxAgeSeconds: 30 * 24 * 60 * 60,
// Automatically cleanup if quota is exceeded.
purgeOnQuotaError: true
})
]
})
);
Você precisa definir maxEntries, maxAgeSeconds ou ambos ao usar ExpirationPlugin. purgeOnQuotaError é opcional.
maxEntries
Isso impõe um limite superior ao número de entradas (ou seja, URLs exclusivos) para um determinado cache.
Normalmente, é uma boa ideia configurar isso, a menos que você saiba que há apenas um pequeno número de URLs possíveis que podem ser gerenciados por uma determinada estratégia.
maxAgeSeconds
Entradas adicionadas ao cache há mais de tempo são consideradas desatualizadas e limpas automaticamente na próxima vez que o cache é acessado.
Isso não é tão eficaz no gerenciamento da cota de armazenamento quanto maxEntries, já que seus caches podem crescer arbitrariamente grandes, desde que todas as entradas sejam adicionadas dentro de um pequeno período de tempo. Ela é mais útil quando você sabe que há um limite máximo de atualização que quer impor e que manter entradas mais antigas tem pouco valor para seu aplicativo da Web.
purgeOnQuotaError
Essa opção permite que você marque um determinado cache como seguro para exclusão automática caso seu aplicativo da Web exceda o armazenamento disponível.
No momento, essa opção é definida como false por padrão. Em geral, os caches de tempo de execução precisam ser resilientes à exclusão. Portanto, definir essa opção como true é uma prática recomendada e ajuda a garantir que o app da Web possa se recuperar automaticamente devido às restrições de armazenamento.
Quantos dados você pode armazenar?
Cada navegador tem seus próprios limites de armazenamento, portanto, nenhuma resposta é única. Além disso, alguns navegadores têm um limite dinâmico que varia de acordo com a quantidade de armazenamento sem custo financeiro em um determinado dispositivo. Por isso, o limite máximo efetivo pode ser alterado sem aviso prévio.
Alguns navegadores expõem uma interface para consultar a quantidade aproximada de armazenamento que sua origem está usando, além do limite máximo, via navigator.storage.estimate(). O artigo Como estimar o espaço de armazenamento disponível contém mais informações sobre como você pode usá-lo nos seus aplicativos da Web.
Considerações especiais sobre a navegação anônima do Chrome
Abrir um app da Web no modo de navegação anônima do Chrome impõe uma restrição especial ao armazenamento que não se aplica a contextos de navegação normais. Há um limite de cota de cerca de 100 megabytes, independentemente do espaço livre disponível no dispositivo.
Cuidado com respostas opacas!
Uma fonte comum de uso inesperado de cotas altas é o armazenamento em cache de respostas opacas no momento da execução, ou seja, respostas de origem cruzada a solicitações feitas sem o CORS ativado.
Os navegadores inflam automaticamente o impacto da cota dessas respostas opacas como uma consideração de segurança. No Chrome, por exemplo, até mesmo uma resposta opaca de alguns kilobytes acabará contribuindo com cerca de 7 megabytes para o seu uso da cota.
Você pode usar muito mais cota do que o previsto ao começar a armazenar respostas opacas em cache. Portanto, a prática recomendada é usar ExpirationPlugin com maxEntries e, possivelmente, purgeOnQuotaError, configurados adequadamente.