Cos'è la cache dell'applicazione in HTML5?

La cache delle applicazioni (Application Cache) in HTML5 è un meccanismo che consente a un'applicazione web di funzionare offline, fornendo un insieme di risorse (pagine HTML, CSS, JavaScript, immagini) che il browser memorizza nella cache localmente.

Per utilizzare la cache delle applicazioni, è necessario un file di manifesto con estensione .appcache, collegato alla pagina HTML tramite l'attributo manifest nel tag <html>:

<html manifest="manifest.appcache">
...
</html>

Il file di manifesto ha la seguente struttura:

CACHE MANIFEST
# Versione del manifesto (opzionale, per aggiornare la cache)
# v1.0

CACHE:
# Risorse esplicitamente in cache
/css/style.css
/js/script.js
/images/logo.png

FALLBACK:
# Risorse di riserva in caso di assenza di connessione
/offline.html /

NETWORK:
# Risorse che devono sempre essere richieste dalla rete
*

Le sezioni principali del file di manifesto sono:

CACHE:: Le risorse elencate in questa sezione saranno memorizzate nella cache dopo il primo caricamento della pagina con il manifesto specificato.
FALLBACK:: Definisce risorse di riserva. Se una richiesta di rete per una risorsa principale fallisce, il browser caricherà la risorsa di riserva indicata. Formato: risorsa_principale risorsa_di_riserva.
NETWORK:: Risorse elencate in questa sezione non saranno mai memorizzate nella cache e saranno sempre richieste dalla rete. Il simbolo * indica che tutte le risorse non elencate in altre sezioni saranno sempre richieste dalla rete.

L'aggiornamento della cache dell'applicazione avviene quando il file di manifesto cambia. Il browser scarica il manifesto aggiornato, lo confronta con quello attuale e scarica le risorse nuove o modificate. I nuovi file sono disponibili solo dopo il ricaricamento della pagina.

Eventi correlati alla cache dell'applicazione:

checking: Il browser verifica se è disponibile una nuova versione del manifesto.
downloading: Il browser scarica le risorse indicate nella nuova versione del manifesto.
progress: Progresso del download delle risorse.
updateready: La nuova versione della cache è pronta per essere utilizzata. È necessario ricaricare la pagina.
cached: Le risorse sono state memorizzate con successo nella cache alla prima volta.
noupdate: Il manifesto non è cambiato.
error: Si è verificato un errore durante il caricamento o l'aggiornamento della cache.

L'API della cache dell'applicazione è accessibile tramite window.applicationCache.

// Verifica dello stato della cache
console.log(window.applicationCache.status);

// Gestione dell'evento updateready
window.applicationCache.addEventListener('updateready', function() {
  if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
    // Applica la nuova versione della cache e ricarica la pagina
    window.applicationCache.swapCache();
    window.location.reload();
  }
}, false);

Sebbene la cache delle applicazioni fornisse funzionalità offline, il suo uso non è raccomandato nei nuovi progetti a causa della complessità di gestione, dei problemi di aggiornamento e della mancanza di flessibilità. Come approccio moderno per l'accesso offline e altre funzioni delle applicazioni web progressive (PWA), si utilizzano i Service Workers.