API di archiviazione persistente: comprensione e gestione della quota di archiviazione per le applicazioni web

L'API di archiviazione persistente offre agli sviluppatori web un modo standardizzato per richiedere e gestire la quota di archiviazione all'interno del browser di un utente. A differenza dei meccanismi di archiviazione tradizionali come i cookie o localStorage, che sono spesso limitati in dimensioni e soggetti a rimozione automatica, l'API di archiviazione persistente consente alle applicazioni di richiedere quantità maggiori di archiviazione e, soprattutto, di richiedere che l'archiviazione sia persistente, il che significa che il browser non la cancellerà automaticamente, anche sotto pressione di archiviazione.

Perché l'archiviazione persistente è importante

Nel web di oggi, dove le Progressive Web App (PWA) sono sempre più comuni e gli utenti si aspettano esperienze offline ricche, l'archiviazione affidabile è essenziale. Considera questi scenari:

• Accesso offline ai documenti: un'applicazione di editing di documenti (come Google Docs) deve archiviare i documenti localmente in modo che gli utenti possano continuare a lavorare anche senza una connessione Internet.
• Riproduzione di contenuti multimediali: servizi di streaming come Spotify o Netflix consentono agli utenti di scaricare contenuti per la riproduzione offline, richiedendo spazio di archiviazione significativo.
• Dati di gioco: i giochi online spesso archiviano i progressi, i livelli e le risorse dell'utente localmente per fornire un'esperienza fluida e reattiva.
• Caching di set di dati di grandi dimensioni: le applicazioni che gestiscono set di dati di grandi dimensioni, come le applicazioni di mappatura (ad es. Google Maps, app basate su OpenStreetMap), traggono vantaggio dalla memorizzazione nella cache dei dati in locale per ridurre le richieste di rete e migliorare le prestazioni.
• Elaborazione dati locale: le applicazioni Web che eseguono un'elaborazione dati pesante (ad es. editing di immagini, editing video) possono archiviare i risultati intermedi localmente per evitare calcoli ripetuti.

Senza l'archiviazione persistente, il browser potrebbe cancellare automaticamente l'archiviazione utilizzata da queste applicazioni quando il dispositivo ha poco spazio, portando a un'esperienza utente frustrante e alla potenziale perdita di dati. L'API di archiviazione persistente affronta questo problema fornendo un meccanismo per le applicazioni per richiedere l'archiviazione persistente e tenere traccia dell'utilizzo dell'archiviazione.

Comprensione della quota di archiviazione

Ogni browser alloca una certa quantità di spazio di archiviazione a ciascuna origine (dominio). Questa quota di archiviazione non è fissa e può variare a seconda di fattori quali la capacità di archiviazione totale del dispositivo, la quantità di spazio libero disponibile e le impostazioni del browser dell'utente. L'API di archiviazione fornisce metodi per interrogare la quota di archiviazione disponibile e la quantità di archiviazione già utilizzata.

Interrogazione della quota di archiviazione

L'interfaccia navigator.storage fornisce l'accesso alle informazioni relative all'archiviazione. Puoi utilizzare il metodo estimate() per ottenere una stima della quota di archiviazione disponibile e della quantità di archiviazione utilizzata dalla tua applicazione. L'oggetto restituito contiene le proprietà usage e quota, entrambe misurate in byte.

            
async function getStorageEstimate() {
  if (navigator.storage && navigator.storage.estimate) {
    const estimate = await navigator.storage.estimate();
    console.log(`Usage: ${estimate.usage}`);
    console.log(`Quota: ${estimate.quota}`);
    console.log(`Percentage used: ${(estimate.usage / estimate.quota * 100).toFixed(2)}%`);
  } else {
    console.warn("Storage estimate API not supported.");
  }
}

getStorageEstimate();

            

              
                Copy
              
            
          

Esempio: supponiamo che estimate.usage restituisca 10485760 (10 MB) e estimate.quota restituisca 1073741824 (1 GB). Ciò indica che la tua applicazione ha utilizzato 10 MB della sua quota di 1 GB, che è circa l'1% dell'archiviazione disponibile.

Interpretazione dei valori di quota

Il valore quota rappresenta la quantità massima di spazio di archiviazione che la tua applicazione *può* utilizzare. Tuttavia, è importante capire che questa quota non è garantita. Il browser può ridurre la quota se il dispositivo ha poco spazio di archiviazione o se l'utente cancella i dati del browser. Pertanto, la tua applicazione dovrebbe essere progettata per gestire situazioni in cui l'archiviazione disponibile è inferiore alla quota segnalata.

Best practice: implementa un meccanismo per monitorare l'utilizzo dell'archiviazione e informare in modo proattivo l'utente se l'applicazione si sta avvicinando al limite di archiviazione. Fornisci opzioni per l'utente per cancellare i dati non necessari o aggiornare il proprio piano di archiviazione (se applicabile).

Richiesta di archiviazione persistente

Anche se la tua applicazione ha una quota di archiviazione sufficiente, il browser potrebbe comunque cancellare automaticamente i dati della tua applicazione sotto pressione di archiviazione. Per evitare ciò, puoi richiedere l'archiviazione persistente utilizzando il metodo navigator.storage.persist().

            
async function requestPersistentStorage() {
  if (navigator.storage && navigator.storage.persist) {
    const isPersistent = await navigator.storage.persist();
    console.log(`Persistent storage granted: ${isPersistent}`);

    if (isPersistent) {
      console.log("Storage will not be cleared automatically.");
    } else {
      console.warn("Persistent storage not granted.");
      // Provide guidance to the user on how to enable persistent storage in their browser.
    }
  } else {
    console.warn("Persistent storage API not supported.");
  }
}

requestPersistentStorage();

            

              
                Copy
              
            
          

Il metodo persist() restituisce un valore booleano che indica se la richiesta di archiviazione persistente è stata concessa. Il browser può richiedere all'utente l'autorizzazione prima di concedere l'archiviazione persistente. Il prompt esatto varierà a seconda del browser e delle impostazioni dell'utente.

Interazione utente e autorizzazione

La decisione del browser di concedere l'archiviazione persistente dipende da diversi fattori, tra cui:

• Coinvolgimento dell'utente: i browser hanno maggiori probabilità di concedere l'archiviazione persistente alle applicazioni con cui l'utente interagisce frequentemente.
• Impostazioni utente: gli utenti possono configurare le impostazioni del browser per controllare la gestione delle richieste di archiviazione persistente. Possono scegliere di concedere automaticamente tutte le richieste, negare tutte le richieste o ricevere un prompt per ogni richiesta.
• Archiviazione disponibile: se il dispositivo ha un livello di archiviazione estremamente basso, il browser può negare la richiesta di archiviazione persistente, indipendentemente dal coinvolgimento o dalle impostazioni dell'utente.
• Affidabilità dell'origine: i contesti sicuri (HTTPS) sono generalmente richiesti per l'archiviazione persistente.

Importante: non dare per scontato che la richiesta di archiviazione persistente verrà sempre concessa. La tua applicazione dovrebbe essere resiliente alle situazioni in cui l'archiviazione non è persistente. Implementa strategie per il backup dei dati su un server o la gestione corretta della perdita di dati.

Verifica della persistenza esistente

Puoi utilizzare il metodo navigator.storage.persisted() per verificare se la tua applicazione ha già ottenuto l'archiviazione persistente.

            
async function checkPersistentStorage() {
  if (navigator.storage && navigator.storage.persisted) {
    const isPersistent = await navigator.storage.persisted();
    console.log(`Persistent storage already granted: ${isPersistent}`);
  } else {
    console.warn("Persistent storage API not supported.");
  }
}

checkPersistentStorage();

            

              
                Copy
              
            
          

Tecnologie di archiviazione e quota

• IndexedDB: un potente database NoSQL per l'archiviazione di dati strutturati lato client. IndexedDB è soggetto a limitazioni della quota di archiviazione e può trarre vantaggio in modo significativo dall'archiviazione persistente.
• API Cache: utilizzata dai service worker per memorizzare nella cache le richieste di rete, consentendo l'accesso offline e prestazioni migliorate. Anche le cache create tramite l'API Cache contribuiscono alla quota di archiviazione complessiva.
• localStorage & sessionStorage: semplici archivi chiave-valore per quantità minori di dati. Sebbene localStorage sia persistente per impostazione predefinita (a meno che l'utente non cancelli i dati del browser), è limitato in dimensioni e non beneficia delle garanzie di persistenza fornite dall'API di archiviazione persistente tanto quanto IndexedDB o l'API Cache. Tuttavia, il loro utilizzo contribuisce comunque alla quota complessiva.
• Cookie: sebbene tecnicamente un meccanismo di archiviazione, i cookie vengono in genere utilizzati per la gestione delle sessioni e il tracciamento piuttosto che per l'archiviazione di grandi quantità di dati. I cookie hanno i propri limiti di dimensione e sono distinti dalla quota di archiviazione gestita dall'API di archiviazione.

Esempio: una PWA utilizza IndexedDB per archiviare profili utente e dati offline e l'API Cache per memorizzare nella cache risorse statiche come immagini e file JavaScript. La richiesta di archiviazione persistente garantisce che questi dati memorizzati nella cache abbiano meno probabilità di essere rimossi, fornendo un'esperienza offline coerente.

Best practice per la gestione della quota di archiviazione

Un'efficace gestione della quota di archiviazione è essenziale per la creazione di applicazioni web robuste e di facile utilizzo. Ecco alcune best practice da seguire:

1. Monitorare regolarmente l'utilizzo dell'archiviazione

Implementa un meccanismo per monitorare periodicamente l'utilizzo dell'archiviazione della tua applicazione utilizzando navigator.storage.estimate(). Ciò ti consente di identificare in modo proattivo potenziali problemi di archiviazione e intraprendere azioni correttive prima che influiscano sull'esperienza dell'utente.

2. Implementare un'interfaccia utente di gestione dell'archiviazione

Fornisci agli utenti un'interfaccia chiara e intuitiva per la gestione della propria archiviazione. Questa interfaccia utente dovrebbe consentire agli utenti di:

• Visualizzare l'utilizzo corrente dell'archiviazione.
• Identificare i dati che consumano più spazio di archiviazione.
• Eliminare i dati non necessari (ad es. file memorizzati nella cache, contenuti scaricati).

Esempio: un'applicazione di editing fotografico potrebbe fornire un'interfaccia utente che mostri agli utenti una ripartizione dell'archiviazione utilizzata da singole foto e album, consentendo loro di eliminare facilmente le foto di cui non hanno più bisogno.

3. Ottimizzare l'archiviazione dei dati

Ottimizza l'archiviazione dei dati della tua applicazione per ridurre al minimo il suo impatto sull'archiviazione. Ciò include:

• Compressione dei dati prima di archiviarli.
• Utilizzo di formati di dati efficienti (ad es. Protocol Buffers, MessagePack).
• Evitare di archiviare dati ridondanti.
• Implementazione di criteri di scadenza dei dati per eliminare automaticamente i dati vecchi o inutilizzati.

4. Implementare una strategia di degradazione graduale

Progetta la tua applicazione per gestire correttamente le situazioni in cui l'archiviazione è limitata o l'archiviazione persistente non viene concessa. Ciò potrebbe comportare:

• Disattivazione di determinate funzionalità che richiedono un'archiviazione significativa.
• Visualizzazione di un messaggio di avviso all'utente.
• Fornire un'opzione per il backup dei dati su un server.

5. Informare gli utenti sull'archiviazione persistente

Se la tua applicazione si basa fortemente sull'archiviazione persistente, informa gli utenti sui vantaggi della concessione dell'autorizzazione all'archiviazione persistente. Spiega come l'archiviazione persistente migliora le prestazioni dell'applicazione e garantisce che i loro dati non vengano cancellati automaticamente.

6. Gestire gli errori di archiviazione in modo corretto

Preparati a gestire gli errori di archiviazione, come QuotaExceededError, che possono verificarsi quando la tua applicazione supera la sua quota di archiviazione. Fornisci messaggi di errore informativi all'utente e suggerisci possibili soluzioni (ad es. cancellare l'archiviazione, aggiornare il piano di archiviazione).

7. Prendi in considerazione l'utilizzo dei service worker

I service worker possono migliorare significativamente le funzionalità offline della tua applicazione web memorizzando nella cache risorse statiche e risposte API. Quando si utilizzano i service worker, tenere presente la quota di archiviazione e implementare strategie per la gestione efficace della cache.

Considerazioni sull'internazionalizzazione

Quando progetti l'interfaccia utente di gestione dell'archiviazione della tua applicazione, considera i seguenti aspetti di internazionalizzazione (i18n):

• Formattazione dei numeri: utilizza una formattazione dei numeri appropriata per diverse impostazioni locali quando visualizzi i valori di utilizzo dell'archiviazione. Ad esempio, in alcune impostazioni locali le virgole vengono utilizzate come separatori decimali, mentre in altre vengono utilizzati i punti. Utilizza il metodo toLocaleString() di JavaScript per formattare i numeri in base alle impostazioni locali dell'utente.
• Formattazione di data e ora: se la tua applicazione archivia date e ore, formattale in base alle impostazioni locali dell'utente quando le visualizzi nell'interfaccia utente di gestione dell'archiviazione. Utilizza i metodi toLocaleDateString() e toLocaleTimeString() di JavaScript per la formattazione di data e ora in base alle impostazioni locali.
• Localizzazione delle unità: prendi in considerazione la localizzazione delle unità di archiviazione (ad es. KB, MB, GB) in modo che corrispondano alle convenzioni utilizzate in diverse regioni. Sebbene le unità standard siano ampiamente comprese, fornire alternative localizzate può migliorare l'esperienza dell'utente.
• Direzione del testo: assicurati che l'interfaccia utente di gestione dell'archiviazione supporti sia la direzione del testo da sinistra a destra (LTR) che da destra a sinistra (RTL). Utilizza proprietà CSS come direction e unicode-bidi per gestire correttamente la direzione del testo.

Considerazioni sulla sicurezza

Quando si ha a che fare con l'archiviazione persistente, la sicurezza è fondamentale. Segui queste best practice di sicurezza:

• Utilizza HTTPS: pubblica sempre la tua applicazione tramite HTTPS per proteggere i dati in transito e prevenire attacchi man-in-the-middle. HTTPS è anche un requisito per l'archiviazione persistente in molti browser.
• Sanifica l'input dell'utente: sanifica tutto l'input dell'utente prima di archiviarlo per prevenire vulnerabilità cross-site scripting (XSS).
• Crittografa i dati sensibili: crittografa i dati sensibili prima di archiviarli localmente per proteggerli da accessi non autorizzati. Prendi in considerazione l'utilizzo dell'API Web Crypto per la crittografia.
• Implementa pratiche di gestione dei dati sicure: segui pratiche di codifica sicure per prevenire perdite di dati e garantire l'integrità dei dati archiviati.
• Rivedi e aggiorna regolarmente il tuo codice: tieniti aggiornato sulle ultime minacce e vulnerabilità alla sicurezza e rivedi e aggiorna regolarmente il tuo codice per affrontarle.

Esempi tra diverse regioni

Consideriamo come la gestione della quota di archiviazione potrebbe differire tra diverse regioni:

• Regioni con larghezza di banda limitata: nelle regioni con larghezza di banda Internet limitata o costosa, gli utenti possono fare più affidamento sull'accesso offline e sulla memorizzazione nella cache. Pertanto, le applicazioni dovrebbero dare la priorità a un utilizzo efficiente dell'archiviazione e fornire indicazioni chiare sulla gestione dei dati memorizzati nella cache. Ad esempio, in alcune parti dell'Africa o del sud-est asiatico, i costi dei dati sono una preoccupazione significativa.
• Regioni con normative sulla privacy dei dati: nelle regioni con rigide normative sulla privacy dei dati, come l'Unione Europea (GDPR), le applicazioni devono essere trasparenti su come utilizzano l'archiviazione e ottenere il consenso esplicito degli utenti prima di archiviare i dati personali. Devono inoltre fornire agli utenti la possibilità di accedere, rettificare ed eliminare i propri dati.
• Regioni con dispositivi meno recenti: nelle regioni in cui gli utenti hanno maggiori probabilità di utilizzare dispositivi meno recenti o meno potenti, le applicazioni devono prestare particolare attenzione all'utilizzo dell'archiviazione e ottimizzare l'archiviazione dei dati per ridurre al minimo l'impatto sulle prestazioni del dispositivo.
• Regioni con requisiti linguistici specifici: le interfacce utente di gestione dell'archiviazione devono essere completamente localizzate, tenendo conto dei formati dei numeri (ad es. utilizzando virgole o punti per i separatori decimali), dei formati di data/ora e della corretta direzione del testo.

Esempio: un'applicazione di notizie rivolta agli utenti in India potrebbe consentire agli utenti di scaricare articoli di notizie per la lettura offline, riconoscendo il potenziale per la connettività Internet intermittente. L'applicazione fornirebbe anche un'interfaccia utente di gestione dell'archiviazione chiara in più lingue indiane, consentendo agli utenti di eliminare facilmente gli articoli scaricati per liberare spazio.

Il futuro delle API di archiviazione

L'API di archiviazione persistente è in continua evoluzione e vengono aggiunte nuove funzionalità e capacità per soddisfare le crescenti esigenze delle moderne applicazioni web. Alcuni potenziali sviluppi futuri includono:

• Gestione della quota di archiviazione migliorata: controllo più granulare sulla quota di archiviazione, che consente alle applicazioni di allocare quantità specifiche di archiviazione a diversi tipi di dati.
• Integrazione con l'archiviazione cloud: integrazione perfetta con i servizi di archiviazione cloud, che consente alle applicazioni di archiviare in modo trasparente i dati nel cloud quando l'archiviazione locale è limitata.
• Sincronizzazione avanzata dei dati: meccanismi di sincronizzazione dei dati più sofisticati, che consentono alle applicazioni di sincronizzare in modo efficiente i dati tra l'archiviazione locale e il cloud.
• Crittografia di archiviazione standardizzata: un'API standardizzata per la crittografia dei dati archiviati nell'archiviazione locale, semplificando il processo di protezione dei dati sensibili.

Conclusione

L'API di archiviazione persistente è uno strumento potente per gli sviluppatori web che desiderano creare applicazioni web robuste e di facile utilizzo in grado di fornire esperienze offline ricche. Comprendendo la gestione della quota di archiviazione, richiedendo l'archiviazione persistente e seguendo le best practice per l'archiviazione e la sicurezza dei dati, puoi creare applicazioni affidabili, performanti e rispettose della privacy degli utenti. Man mano che il web continua a evolversi, l'API di archiviazione persistente svolgerà un ruolo sempre più importante nel consentire la prossima generazione di applicazioni web.

Ulteriori letture

• Documenti Web MDN: API di archiviazione
• web.dev: Archiviazione per il web
• WICG: API della quota di archiviazione