Skip to main content

HTML 5: Offline Application Cache

Tra le novità più interessanti di HTML 5 c’è una gestione avanzata della cache per un utilizzo offline dei nostri siti / applicativi web.

L’argomento si divide in due parti:

  • la gestione di un file detto cache manifest con l’elenco dei file da salvare in locale
  • l’interazione via JavaScript con la cache

Cache manifest

1. Configurazione di Apache

Il file manifest può essere avere come estensione .manifest o .appcache: la prima versione era nelle specifiche originali, la seconda è stata introdotta in seguito e sembra essere destinata a diventare quella ufficiale.

In entrambi i casi dobbiamo dire al nostro web server di fornire tali file.

Creare quindi nella configurazione di Apache, o nel virtual host, o nel file .htaccess, la direttiva:

AddType text/cache-manifest .manifest .appcache

2. File manifest

Il file vero e proprio va creato nella root del nostro sito e può essere chiamato a piacere, ad esempio cache.manifest:

Di seguito riportiamo un esempio di tale file:

CACHE MANIFEST
# v1 2012-11-26 19:13:00Z
CACHE:
cache.html
cache.css
img/spooning.jpg
img/art.jpg
img/dream.jpg
img/cheeseburger.jpg
img/firefox.jpg
NETWORK:
*

Il file è diviso in varie parti che hanno un diverso significato.

La parte “CACHE” indica i file che – una volta scaricati – verranno sempre presi dalla cache locale, a meno che:

  • venga aggiornato il file cache.manifest;
  • venga cancellata la cache locale;
  • venga forzato un aggiornamento via JavaScript.

La parte “NETWORK” indica i file che verranno presi online se disponibili: l’asterisco indica di prendere online tutti i file tranne quelli indicati nella sezione CACHE, e quindi è un ottimo default.

3. Inserire il file manifest

Modificare la propria home page (o comunque la pagina che deve attivare lo scarico della cache) da:

<html lang="it">

a

<html lang="it" manifest="cache.manifest">

In questo modo, al caricamento della home page vengono automaticamente scaricati, e depositati nella cache locale, tutti i file contenuti nell’elenco.

In altre parole, possiamo far scaricare l’intero sito (o una buona parte) mentre l’utente sta guardando la home page.

Da quel momento in poi potremo navigare il resto del sito pescandoi file da locale, quindi senza bisogno di essere online o comunque molto più velocemente.

JavaScript

In aggiunta alla gestione della cache tramite file manifest, esiste una nuova libreria JavaScript che ci permette di intervenire sulla cache.

1. Update

Cominciamo dall’operazione fondamentale che è quella di forzare l’aggiornamento di tutta la cache.

L’oggetto si crea con

cache = window.applicationCache;

e la funzione di aggiornamento si avvia con

cache.update();

mentre l’attivazione della nuova cache si ottiene con

cache.swapCache();

2. Stati

Sono previsti una serie di stati per la cache e – di conseguenza – una serie di eventi scatenati automaticamente dal browser mentre controlla ed eventualmente aggiorna la cache locale:

  • error: quando il controllo o l’aggiornamento non vanno a buon fine
  • cached: quando viene avviato lo scaricamento del file manifest
  • checking: quando è stato avviato il controllo per eventuali aggiornamenti
  • noupdate: quando non sono stati trovati aggiornamenti
  • downloading: quando sono stati trovati aggiornamenti ed è stato avviato lo scaricamento
  • updateready: quando la cache è stata aggiornata ed è pronta all’uso
  • obsolete: quando il file manifest non esiste più e quindi la cache locale va rimossa
Può far comodo inoltre sapere che per l’oggetto window sono stati introdotti due nuovi eventi online e offline quando viene avvertita o meno la presenza di una connessione a Internet.

Supporto browser

La “solita” nota stonata: la gestione della offline cache tramite file manifest è supportata in tutti i principali browser tranne Internet Explorer (sarà disponibile da I.E. 10).

Tuttavia, il suggerimento è di cominciare a usare ugualmente questa funzionalità, per due motivi:

  • Internet Explorer non predomina più il mercato, quindi possiamo comunque velocizzare una ampia fetta di utenti;
  • in ogni caso, la presenza del file non impedisce il corretto funzionamento dell’applicazione.

Commenti (2)

I commenti sono chiusi.