Una web app può essere accessibile offline se si utilizza una caratteristica molto potente di HTML5: la cache offline ed un file .manifest. Il principio è molto semplice: il file in questione, unito all'attributo manifest posto nell'elemento html, istruisce il browser a scaricare i file specificati in tale file e a metterli in cache. Il risultato più interessante si ha nei dispositivi mobile: sull'iPad ad esempio è possibile disconnettersi ed usare direttamente l'icona della app aggiunta all'home screen. Vediamo insieme i dettagli.
Specificare il corretto MIME Type per il file .manifest
Come prima cosa dovete far riconoscere al vostro server il MIME Type corretto, che è text/cache-manifest. In Apache potete aggiungere il seguente codice al file di configurazione principale o ad un file .htaccess:
AddType text/cache-manifest .manifest
Aggiungere il riferimento al file .manifest
A questo punto occorre inserire nell'elemento html l'attributo manifest con il percorso del vostro file .manifest:
<!DOCTYPE html>
<html manifest="cache.manifest">
Specificare i file da mettere in cache
Un file .manifest è sostanzialmente un elenco di file divisi in sezioni. Il file inizia con la stringa maiuscola CACHE MANIFEST, seguita dalla sezione CACHE. In questa sezione vanno specificati i percorsi dei file da mettere in cache. Da tenere presente che se vi sono immagini o altri file collegati al vostro file CSS o JavaScript, anche quelli vanno specificati nell'elenco. In altre parole, i browser seguono alla lettera l'elenco di file presenti nel file .manifest. Ecco un esempio:
Se il numero di file è elevato ed il loro peso supera una certa quota stabilita dal browser, potreste essere avvisati di tale limite. Nel caso di Safari Mobile per iPad, il browser vi avvisa che avete superato la quota consentita e vi chiede se volete aumentare lo spazio a disposizione riservato alla cache (che è di circa 5 Mb).
Nel file .manifest esiste anche la sezione NETWORK. In questa sezione potete specificare i file che non andranno presi dalla cache ma direttamente dalla rete: