Una delle tante novità di HTML5 è la cosiddetta "application cache" o "offline web applications": attraverso questo strumento è possibile dire al browser quali file salvare (non nella cache "normale" ma in un cache apposita, definita per l'appunto "application cache") così da consentire una navigazione il più possibile completa di un sito anche quando si è offline.

Il funzionamento di base

Il funzionamento dell'application cache è piuttosto semplice: sostanzialmente, si crea un file all'interno del quale si specifica la lista di file che il browser deve salvare nella sua "memoria" e che deve mostrare anche quando si è offline.

Il file ha questo formato:

CACHE MANIFEST<br />    index.html<br />    /images/logo.png<br />    /css/styles.css  <br />    /js/jquery-1.4.min.js  <br />    /js/offline.js

L'unica cosa da ricordare e inserire come prima riga il testo "CACHE MANIFEST". Una volta salvato questo file (chiamiamolo "offline.manifest") diremo al browser di utilizzarlo specificandolo come attributo del tag html nella nostra pagina, così:

<html manifest="offline.manifest">

e questo è quanto.

Quando visiteremo il sito in questione il browser (se supporta l'application cache) ci chiederà se autorizziamo l'utilizzo della cache:

Una volta autorizzato l'utilizzo i contenuti che abbiamo specificato nel file MANIFEST (quindi pagine HTML, immagini, CSS e script) verranno salvati sul nostro computer così da permetterci una navigazione completa del sito anche quando siamo offline (ad esempio in aereo)

Il MIME type giusto per il file manifest

Un elemento piuttosto importante a cui prestare attenzione è che il file manifest che abbiamo appena creato deve essere "servito" dal server web (ad esempio Apache) al browser con il MIME type giusto, ovvero

text/cache-manifest

In caso contrario il browser non lo riconoscerà come manifest per la cache e il giochino non funzionerà.

Per settare il MIME type su Apache è possibile utilizzare due metodi: se si ha accesso al file httpd.conf si può associare il MIME type che desideriamo ad una specifica estensione:

# Apache mimetype configuration<br />    # APACHE_HOME/conf/mime.types<br />    text/cache-manifest manifest

mentre se invece preferiamo agire "localmente" possiamo specificarlo nel file .htaccess:

# Apache mimetype configuration<br />    AddType text/cache-manifest .manifest

Da già che stiamo modificando il file di configurazione di Apache ricordiamoci anche di settare il server web in modo che il file manifest non sia mai in cache:

  # Cache settings for the manifest file<br />    <IfModule mod_expires.c><br />    Header set cache-control: public<br />    ExpiresActive on<br />    # Prevent receiving a cached manifest<br />    ExpiresByType text/cache-manifest "access plus 0 seconds"<br />    </IfModule>

Aggiornamento della cache

Uno degli aspetti meno pratici dell'application cache è che il semplice aggiornamento di un file incluso nel manifest non comporta l'aggiornamento della versione in cache. Se insomma noi cambiamo una pagina (o immagine o script o css) incluso nel file manifest questo non verrà mai "visto" perchè il browser, per verificare che ci sono stati aggiornamenti, controllerà i contenuti del file manifest e dato che questi non sono cambiati (i file sono sempre gli stessi, è solo il contenuto dei file ad essere stato cambiato) riterrà non modificati i file in cache e dunque non li scaricherà.

Per ovviare a questo inconveniente ogni volta che cambiamo un file della cache è necessario cambiare anche il file manifest, il nostro consiglio è di farlo aggiungendo un commento di versione, quindi qualcosa tipo

CACHE MANIFEST
# versione 1.0.2 del 19 gennaio 2011<br />    index.html<br />    /images/logo.png<br />    /css/styles.css  <br />    /js/jquery-1.4.min.js  <br />    /js/offline.js

I browser che supportano l'application cache

I browser che al momento attuale (Gennaio 2011) supportano in maniera pressochè completa l'application cache sono:

  • Firefox: dalla versione 3.5
  • Safari: dalla versione 4.0
  • Chrome: dalla versione 4.0
  • Opera: dalla versione 10.6

Purtroppo invece Internet Explorer non supporta questa estensione (neanche la versione 9.0)

Vantaggi rispetto alla cache tradizionale

Il vantaggio principale della application cache rispetto a quella tradizionale è il controllo: mentre nella cache "normale" è il browser a decidere (più o meno) quali sono i file da salvare e tenere in cache, con lo strumento offerto da HTML5 possiamo dire noi con precisione quali risorse tenere in memoria così da offrire agli utenti un'esperienza di navigazione offline piacevole e completa.

Oltre a questo, con l'application cache è possibile salvare anche script così da consentire un utilizzo totale delle funzionalità HTML5 e non solo anche offline.

Un ulteriore vantaggio rispetto alla cache tradizionale, infine, è che l'application cache consente di salvare anche file che non si sono visitati (ma che potrebbero essere utili per una navigazione completa del sito) mentre nella normale cache del browser una pagina per essere memorizzata deve essere stata visitata almeno una volta.

Conclusioni

Le offline web applications sono uno strumento molto potente che, combinato con il local storage, consente di creare delle vere e proprie applicazioni indipendenti dalla effettiva connessione ad Internet o meno. Speriamo solo in una rapida adozione di questa funzionalità anche da parte di Internet Explorer così da rendere le applicazioni HTML5 sempre più una realtà diffusa.

L'attuale utilizzo più valido è sui siti web pensati per i telefonini, consentendo agli sviluppatori di creare di fatto delle vere a proprie applicazioni funzionanti anche quando non è presente una connessione di rete.


)