Tutti i browser impongono un limite massimo alla quantità di spazio di archiviazione che l'origine della tua app web può utilizzare. Puoi configurare Workbox in modo da ripulire automaticamente i dati memorizzati nella cache in fase di esecuzione per evitare di riscontrare limitazioni della quota di archiviazione che potrebbero influire sull'efficienza e sull'affidabilità della memorizzazione nella cache del tuo sito web.
Quali opzioni di configurazione sono supportate?
Quando imposti una strategia di memorizzazione nella cache di routing e di runtime, puoi aggiungere un'istanza di ExpirationPlugin da workbox-expiration configurata con impostazioni più adatte al tipo di asset di cui stai memorizzando la cache.
Ad esempio, la seguente configurazione potrebbe essere utilizzata per memorizzare nella cache le immagini in fase di esecuzione, con limiti espliciti e pulizia automatica in caso di superamento della quota:
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
})
]
})
);
Quando utilizzi ExpirationPlugin, devi impostare maxEntries, maxAgeSeconds o entrambi. Il valore purgeOnQuotaError è facoltativo.
maxEntries
Ciò impone un limite massimo al numero di voci (ovvero URL univoci) per una data cache.
In genere è buona norma impostare questo valore, a meno che tu non sappia che esiste solo un numero limitato di URL possibili che potrebbero essere gestiti da una determinata strategia.
maxAgeSeconds
Le voci aggiunte alla cache più di questo numero di secondi fa verranno considerate obsolete ed eliminate automaticamente alla successiva apertura della cache.
Questo metodo non è efficace quanto maxEntries per la gestione della quota di spazio di archiviazione, poiché le cache possono diventare arbitrariamente grandi purché le voci siano state aggiunte tutte in un breve periodo di tempo. È particolarmente utile quando sai che esiste un limite massimo di aggiornamento che vuoi imporre e mantenere le voci precedenti ha scarso valore per la tua app web.
purgeOnQuotaError
Questa opzione ti consente di contrassegnare una determinata cache come sicura per l'eliminazione automatica nel caso in cui la tua app web superi lo spazio di archiviazione disponibile.
Al momento, per impostazione predefinita, questo valore è false. In genere, le cache di runtime dovrebbero essere resilienti all'eliminazione, quindi impostare questa opzione su true è una buona prassi e contribuisce a garantire che la tua app web possa recuperare automaticamente in caso di vincoli di spazio di archiviazione.
Quanti dati puoi archiviare?
Ogni browser ha i propri limiti massimi di spazio di archiviazione, quindi non esiste una sola risposta. Inoltre, alcuni browser hanno un limite dinamico che varia in base alla quantità di spazio di archiviazione disponibile su un determinato dispositivo, quindi il limite superiore effettivo potrebbe cambiare senza preavviso.
Alcuni browser espongono un'interfaccia per eseguire query sulla quantità approssimativa di spazio di archiviazione utilizzata dalla tua origine, insieme al limite superiore, tramite navigator.storage.estimate(). L'articolo "Stimare lo spazio di archiviazione disponibile" contiene ulteriori informazioni su come utilizzarlo nelle tue app web.
Considerazioni speciali sulla modalità di navigazione in incognito di Chrome
L'apertura di un'app web nella modalità di navigazione in incognito di Chrome impone una limitazione speciale allo spazio di archiviazione che non si applica ai normali contesti di navigazione: esiste un limite di quota di circa 100 megabyte, indipendentemente dallo spazio libero disponibile sul dispositivo.
Fai attenzione alle risposte poco chiare.
Una causa comune di utilizzo inaspettatamente elevato della quota è dovuta alla memorizzazione nella cache di runtime di risposte opache, ovvero risposte multiorigine alle richieste effettuate senza CORS abilitato.
Per motivi di sicurezza, i browser gonfiano automaticamente l'impatto della quota di queste risposte opache. In Chrome, ad esempio, anche una risposta opaca di pochi kilobyte contribuirà con circa 7 megabyte all'utilizzo della quota.
Una volta che inizi a memorizzare nella cache le risposte opache, puoi utilizzare rapidamente una quota molto più elevata del previsto, quindi la best practice è utilizzare ExpirationPlugin con maxEntries e potenzialmente purgeOnQuotaError configurati in modo appropriato.