Nello scorso script abbiamo introdotto la cache come ulteriore strumento per salvare informazioni non sensibili lato client. Questa ci permette prestazioni migliori sia in termini di risparmio risorse che in situzioni dove la connettività può essere un problema.

const cache = await caches.open('mia-cache');

await cache.add(new Request('/mio-file.json'));
cache.put('/altro-file.json', new Response('{"name": "Morgan","lastName":"Pizzini"}'));

In questo codice, che riassume ciò che abbiamo visto precedentemente, abbiamo inizializzato la cache e salvato due informazioni: la prima è il risultato di una chiamata verso un url che restituirà un file json; nella seconda, invece di effettuare realmente la chiamata, inseriremo un elemento creato a runtime. In entrambi i casi la cache sarà popolata e toccherà a noi leggerla.

const response = await cache.match(request);

Usando il metodo match è possibile, come per l'inserimento, fornire una request, sia essa stringa o oggetto request, ed ottenere come valore di ritorno il dato precedentemente salvato.

La request ha però delle particolarità, a partire dalla scelta del metodo GET/POST/PUT/DELETE, dall'esistenza delle querystring o diversi headers. Due request con metodi diversi verranno salvate separatamente sulla cache.

Per ignorare queste differenze possiamo fornire delle opzioni di ricerca.

const options = {
  // ignora il metodo: anche se la request è in GET/POST/.. restituirà sempre lo stesso valore
  ignoreMethod: true
};
const response = await cache.match(request, options);

const options = {
  // ignora query string
  ignoreSearch: true,
  ignoreMethod: true,
  // ignora headers
  ignoreVary: true
};
const response = await cache.match(request, options);