JavaScript Academy · Lezione

L'API Cache

Salvi e fornisca risposte dalla cache.

L'API Cache è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.

Che cos'è la Cache API?

La Cache API memorizza coppie di richieste e risposte in cache denominate. I service worker la usano per fornire risorse senza accedere alla rete, costituendo la base del supporto offline.

L'oggetto caches

L'oggetto globale caches (un CacheStorage) gestisce tutte le cache denominate. È disponibile sia nelle pagine sia nei service worker.

// Available globally:
// caches.open(name)
// caches.match(request)
// caches.delete(name)
// caches.keys()

Aprire una cache

caches.open(name) restituisce una Promise per una cache con quel nome e la crea se non esiste. I nomi consentono di gestire le versioni delle cache.

caches.open('static-v1').then(cache => {
  console.log('cache ready');
});

Precaricare con addAll

Durante install, cache.addAll(urls) recupera e memorizza un elenco di risorse con un'unica chiamata. Se un recupero non riesce, l'intera operazione viene rifiutata.

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('static-v1').then(cache =>
      cache.addAll(['/', '/styles.css', '/app.js'])
    )
  );
});

waitUntil

event.waitUntil(promise) indica al browser di mantenere attivo il worker finché la Promise non si risolve o viene rifiutata. Inserisca al suo interno la configurazione della cache, così l'installazione non termina troppo presto.

self.addEventListener('install', (event) => {
  event.waitUntil(setupCache());
});

Aggiungere una voce

cache.put(request, response) memorizza una singola risposta, mentre cache.add(url) recupera e memorizza un URL. Utilizzi put quando dispone già di una risposta da salvare.

const cache = await caches.open('static-v1');
const response = await fetch('/logo.png');
await cache.put('/logo.png', response);

Cercare nella cache

cache.match(request) cerca una risposta memorizzata. Restituisce la risposta oppure undefined se non trova corrispondenze.

const cache = await caches.open('static-v1');
const hit = await cache.match('/styles.css');
if (hit) console.log('served from cache');

Scorciatoia caches.match

caches.match(request) cerca contemporaneamente in tutte le cache, una soluzione pratica in un gestore fetch quando non è importante quale cache contenga la risorsa.

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then(hit =>
      hit || fetch(event.request)
    )
  );
});

respondWith

All'interno di un evento fetch, event.respondWith(promise) fornisce la risposta che il browser utilizzerà. La Promise deve risolversi in una Response memorizzata nella cache o appena recuperata.

self.addEventListener('fetch', (event) => {
  event.respondWith(handleRequest(event.request));
});

Clonare le risposte

Il corpo di una risposta può essere letto una sola volta. Per restituire una risposta e memorizzarla, la cloni prima.

const response = await fetch(request);
cache.put(request, response.clone()); // store a copy
return response; // return the original

Eliminare le voci della cache

cache.delete(request) rimuove una voce; caches.delete(name) elimina un'intera cache denominata. Utilizzi questi metodi per eliminare le risorse obsolete.

await cache.delete('/old-asset.js');
await caches.delete('static-v0'); // remove old cache version

Verifica rapida

Metta alla prova la Sua comprensione della Cache API.

Riepilogo

Ha imparato a usare la Cache API:

caches.open(name) recupera o crea una cache denominata.
addAll precarica le risorse; put/add memorizzano le voci.
match recupera le risorse; caches.match cerca in tutte le cache.
respondWith fornisce la risposta durante l'evento fetch.
Cloni le risposte prima di memorizzarle nella cache e restituirle.

Ora vediamo le strategie di caching.

Domande Frequenti

La lezione «L'API Cache» è gratuita?

Sì — il testo completo di «L'API Cache» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.

Cosa imparerò in «L'API Cache»?

Salvi e fornisca risposte dalla cache. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «L'API Cache»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?

Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a JavaScript Academy