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');