Tutti i browser imponeno un limite massimo alla quantità di spazio di archiviazione che l'origine della tua app web può utilizzare. Puoi configurare Workbox in modo che ripulisca automaticamente i dati memorizzati nella cache in fase di runtime per evitare 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 tipo route e runtime, puoi aggiungere un'istanza di ExpirationPlugin da workbox-expiration configurata con impostazioni appropriate per il tipo di asset di cui stai memorizzando nella cache.
Ad esempio, la seguente configurazione potrebbe essere utilizzata per la memorizzazione nella cache delle immagini in fase di runtime, 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
})
]
})
);
Devi impostare maxEntries, maxAgeSeconds o entrambi quando utilizzi ExpirationPlugin. Il campo purgeOnQuotaError è facoltativo.
maxEntries
Questo impone un limite massimo al numero di voci (ossia URL univoci) per una determinata cache.
Impostare questa opzione è in genere una buona idea, 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 da più di questo numero di secondi verranno considerate inattive e verranno pulite automaticamente al successivo accesso alla cache.
Questo metodo non è così efficace nella gestione della quota di archiviazione come maxEntries, poiché le tue cache possono aumentare in modo arbitrario di dimensioni se le voci sono state aggiunte entro un breve periodo di tempo. È particolarmente utile quando sai che esiste un limite massimo di aggiornamento che vuoi imporre e mantenere le voci meno recenti ha poco valore per la tua app web.
purgeOnQuotaError
Questa opzione ti consente di contrassegnare una determinata cache come sicura da eliminare automaticamente nel caso in cui l'applicazione web superi lo spazio di archiviazione disponibile.
Al momento l'impostazione predefinita di questa opzione è false. In generale, le cache di runtime dovrebbero essere resilienti nonostante l'eliminazione. È consigliabile quindi impostare questa opzione su true e contribuire a garantire che la tua app web possa ripristinarsi automaticamente a causa dei vincoli dello spazio di archiviazione.
Quanti dati puoi archiviare?
Ogni browser ha i propri limiti massimi di spazio di archiviazione, quindi non esiste una risposta unica. Inoltre, alcuni browser hanno un limite dinamico che varia in base alla quantità di spazio di archiviazione libero su un determinato dispositivo, pertanto il limite massimo effettivo potrebbe cambiare senza preavviso.
Alcuni browser espongono un'interfaccia per eseguire query sulla quantità approssimativa di spazio di archiviazione utilizzata dall'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 in 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 opache.
Una causa comune di un utilizzo inaspettatamente elevato della quota è dovuta alla memorizzazione nella cache di runtime delle risposte opache, ovvero di 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 può contribuire a circa 7 megabyte sull'utilizzo della quota.
Puoi utilizzare rapidamente molta più quota di quella prevista una volta avviata la memorizzazione nella cache di risposte opache, quindi la best practice consiste nell'utilizzare ExpirationPlugin con maxEntries e potenzialmente purgeOnQuotaError, configurato in modo appropriato.