Todos os navegadores impõem um limite máximo de armazenamento que a origem do seu app da Web pode usar. É possível configurar o Workbox para limpar automaticamente os dados armazenados em cache no momento da execução, evitando limitações de cota de armazenamento que possam afetar a eficiência e a confiabilidade do 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 de execução, é possível adicionar uma instância de ExpirationPlugin de workbox-expiration configurada com as configurações mais adequadas para o tipo de recursos que você está armazenando em cache.
Por exemplo, a configuração a seguir pode ser usada para armazenar imagens em cache no momento da 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
})
]
})
);
É necessário definir maxEntries, maxAgeSeconds ou ambos ao usar ExpirationPlugin. purgeOnQuotaError é opcional.
maxEntries
Isso impõe um limite máximo ao número de entradas (ou seja, URLs exclusivos) para um determinado cache.
Normalmente, é uma boa ideia definir isso, a menos que você saiba que há apenas um pequeno número de URLs possíveis que podem ser processados por uma determinada estratégia.
maxAgeSeconds
Entradas adicionadas ao cache há mais tempo do que esse número serão consideradas desatualizadas e limpas automaticamente na próxima vez que o cache for acessado.
Isso não é tão eficaz no gerenciamento da cota de armazenamento quanto maxEntries, já que os caches podem crescer de forma arbitrária, desde que as entradas tenham sido adicionadas em um curto período. É mais útil quando você sabe que há um limite máximo de atualização que quer impor e manter entradas mais antigas tem pouco valor para seu app 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, o padrão dessa opção é false. Em geral, os caches do ambiente de execução precisam ser resilientes diante da exclusão. Portanto, definir essa opção como true é uma prática recomendada e ajuda a garantir que seu app da Web possa se recuperar automaticamente diante de restrições de armazenamento.
Quantos dados você pode armazenar?
Cada navegador tem seus próprios limites máximos de armazenamento, então não há uma única resposta. Além disso, alguns navegadores têm um limite dinâmico que varia de acordo com a quantidade de armazenamento disponível em um determinado dispositivo. Portanto, o limite máximo efetivo pode mudar sem aviso prévio.
Alguns navegadores expõem uma interface para consultar a quantidade aproximada de armazenamento que sua origem está usando, junto com o limite máximo, usando navigator.storage.estimate(). O artigo Como estimar o espaço de armazenamento disponível tem mais informações sobre como usar esse recurso nos seus apps da Web.
Considerações especiais sobre a navegação anônima do Chrome
Abrir um aplicativo 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 normais de navegação: 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 cota é devido ao armazenamento em cache do ambiente de execução de respostas opacas, ou seja, respostas entre origens para solicitações feitas sem o CORS ativado.
Os navegadores aumentam 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 acaba contribuindo com cerca de 7 megabytes para o uso da cota.
Quando começar a armazenar respostas opacas em cache, é possível usar muito mais cota rapidamente do que o previsto. Portanto, a prática recomendada é usar ExpirationPlugin com maxEntries e, possivelmente, purgeOnQuotaError, configurados corretamente.