Utilizzando i browser moderni è possibile salvare i più svariati dati per renderli disponibili offline. In altri script abbiamo trattato argomenti come IndexedDB o l'utilizzo di LocalStorage e SessionStorage. A questi andiamo ad integrare le Cache API.
Come si può intuire dal nome, il loro compito è molto basilare: fornendo un url o un oggetto request salveranno la risposta. La disponibilità di spazio è praticamente illimitata: si parla di svariate centinaia di Mb, a seconda del browser e del disco disponibile. Prima di poterla utilizzare, la cache, va inizializzata:
const cache = await caches.open('mia-cache');
Per inserire informazioni abbiamo a disposizione tre diversi metodi: add, addAll e put. In tutti e tre i casi verranno restituite delle promise che saranno risolte solo dopo che la risposta è stata inserita in cache, e rigettate in caso di errore.
Con il metodo add salveremo le risposte solo se il loro status code è 200.
// Creiamo una richiesta fornendo l'url o la posizione di un file await cache.add(new Request('https://mio-servizio.com/mia-api')); await cache.add(new Request('/mio-file.json')); // Fornendo una stringa creerà automaticamente la richiesta await cache.add('https://mio-servizio.com/mia-api'); await cache.add('/mio-file.json');
Analogamente il metodo addAll permetterà di salvare più richieste alla volta, la promise verrà rigettata al fallimento di una richiesta.
const urls = ['/mio-file.json', '/mio-file-2.json']; await cache.addAll(urls);
Infine, il metodo put, ci permetterà di salvare qualsiasi risposta da un servizio, non obbligatoriamente con status code 200, o crearne una manualmente
cache.put('/mio-file.json'); cache.put('/mio-file.json', new Response('{"name": "Morgan","lastName":"Pizzini"}')); cache.put('https://mio-sito.com/mio-file.json');
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Eseguire attività pianificate con Azure Container Jobs
Eseguire attività basate su eventi con Azure Container Jobs
Creare gruppi di client per Event Grid MQTT
Gestione dei nomi con le regole @layer in CSS
Eseguire i worklow di GitHub su runner potenziati
Come EF 8 ha ottimizzato le query che usano il metodo Contains
Sfruttare al massimo i topic space di Event Grid MQTT
Configurare dependabot per aggiornare le dipendenze di terze parti con GitHub Actions
Utilizzare Azure Cosmos DB con i vettori
Aprire una finestra di dialogo per selezionare una directory in WPF e .NET 8
Utilizzare QuickGrid di Blazor con Entity Framework
Migrare una service connection a workload identity federation in Azure DevOps