L'API Cache: guida rapida

Scopri come utilizzare l'API Cache per rendere disponibili i dati dell'applicazione offline.

Pete LePage

L'API Cache è un sistema per archiviare e recuperare le richieste di rete e le relative risposte. Potrebbero trattarsi di richieste e risposte normali create durante l'esecuzione dell'applicazione oppure essere create esclusivamente allo scopo di archiviare i dati per un uso successivo.

L'API Cache è stata creata per consentire ai service worker di memorizzare nella cache le richieste di rete in modo da poter fornire risposte rapide, indipendentemente dalla velocità o dalla disponibilezza della rete. Tuttavia, l'API può essere utilizzata anche come meccanismo di archiviazione generale.

Dove è disponibile?

L'API Cache è disponibile in tutti i browser moderni. È esposta tramite la proprietà caches globale, quindi puoi verificare la presenza dell'API con un semplice rilevamento delle funzionalità:

const cacheAvailable = 'caches' in self;

È possibile accedere all'API Cache da una finestra, un iframe, un worker o un service worker.

Che cosa è possibile archiviare

Le cache memorizzano solo coppie di oggetti Request e Response, che rappresentano rispettivamente le richieste e le risposte HTTP. Tuttavia, le richieste e le risposte possono contenere qualsiasi tipo di dato che può essere trasferito tramite HTTP.

Quanto è possibile memorizzare?

In breve, molto, almeno un paio di centinaia di megabyte e potenzialmente anche centinaia di gigabyte o più. Le implementazioni dei browser variano, ma la quantità di spazio di archiviazione disponibile si basa in genere sulla quantità di spazio di archiviazione disponibile sul dispositivo.

Creazione e apertura di una cache

Per aprire una cache, utilizza il metodo caches.open(name), passando il nome della cache come singolo parametro. Se la cache denominata non esiste, viene creata. Questo metodo restituisce un Promise che si risolve con l'oggetto Cache.

const cache = await caches.open('my-cache');
// do something with cache...

Aggiunta a una cache

Esistono tre modi per aggiungere un elemento a una cache: add, addAll e put. Tutti e tre i metodi restituiscono un Promise.

cache.add

Innanzitutto, c'è cache.add(). Richiede un parametro, Request o un URL (string). Invia una richiesta alla rete e memorizza la risposta nella cache. Se il recupero non va a buon fine o se il codice di stato della risposta non rientra nell'intervallo 200, non viene memorizzato nulla e Promise viene rifiutato. Tieni presente che le richieste cross-origin non in modalità CORS non possono essere memorizzate perché restituiscono un status di 0. Queste richieste possono essere archiviate solo con put.

// Retreive data.json from the server and store the response.
cache.add(new Request('/data.json'));

// Retreive data.json from the server and store the response.
cache.add('/data.json');

cache.addAll

Poi c'è cache.addAll(). Funziona in modo simile a add(), ma accetta un array di oggetti o URL Request (string). Il funzionamento è simile alla chiamata di cache.add per ogni singola richiesta, tranne per il fatto che Promise rifiuta se una singola richiesta non viene memorizzata nella cache.

const urls = ['/weather/today.json', '/weather/tomorrow.json'];
cache.addAll(urls);

In ciascuno di questi casi, una nuova voce sovrascrive qualsiasi voce esistente corrispondente. Vengono utilizzate le stesse regole di corrispondenza descritte nella sezione sul recupero.

cache.put

Infine, c'è cache.put(), che ti consente di memorizzare una risposta della rete o di creare e memorizzare il tuo cache.put().Response Richiede due parametri. Il primo può essere un oggetto Request o un URL (string). Il secondo deve essere un Response, della rete o generato dal tuo codice.

// Retrieve data.json from the server and store the response.
cache.put('/data.json');

// Create a new entry for test.json and store the newly created response.
cache.put('/test.json', new Response('{"foo": "bar"}'));

// Retrieve data.json from the 3rd party site and store the response.
cache.put('https://example.com/data.json');

Il metodo put() è più permissivo di add() o addAll() e consente di memorizzare risposte non CORS o altre risposte in cui il codice di stato della risposta non rientra nell'intervallo 200. Sostituirà eventuali risposte precedenti per la stessa richiesta.

Creazione di oggetti Request

Crea l'oggetto Request utilizzando un URL per la cosa da archiviare:

const request = new Request('/my-data-store/item-id');

Utilizzo degli oggetti Response

Il costruttore dell'oggetto Response accetta molti tipi di dati, tra cui Blob, ArrayBuffer, oggetti FormData e stringhe.

const imageBlob = new Blob([data], {type: 'image/jpeg'});
const imageResponse = new Response(imageBlob);
const stringResponse = new Response('Hello world');

Puoi impostare il tipo MIME di un Response impostando l'intestazione appropriata.

  const options = {
    headers: {
      'Content-Type': 'application/json'
    }
  }
  const jsonResponse = new Response('{}', options);

Se hai recuperato un Response e vuoi accedere al relativo corpo, esistono diversi metodi di assistenza che puoi utilizzare. Ognuno restituisce un Promise che si risolve con un valore di tipo diverso.