Applicazioni offline con HTML5

Applicazioni offline con HTML5

HTML 5 ha portato con se molte novità.

Una delle più importanti, secondo me, è la navigazione offline; soprattutto nel caso di applicazioni web mobile.

Sostanzialmente si basa di un meccanismo di cache piuttosto semplice.

Prima di tutto dobbiamo creare un file MANIFEST con la lista dei files da tenere in cache; una cosa del genere:

CACHE MANIFEST
    index.html
    /images/logo.png
    /css/styles.css  
    /js/jquery.min.js  
    /js/script.js

Salvate il file chiamandolo offline.manifest.

A questo punto basterà richiamare il file come attributo del tag html:

<html manifest="offline.manifest">

Quando visitiamo la pagina, ci verrà chiesto se vogliamo usare la cache (quindi è richiesta l'autorizzazione dell'utente).

A questo dobbiamo dovremmo controllare che su Apache (o software affine) sia impostato il MIME type giusto:

text/cache-manifest

Senza questo il meccanismo non funzionerà.

Se non possiamo agire sulla configurazione globale, possiamo anche impostarlo localmente tramite .htccess:

AddType text/cache-manifest .manifest

Infine, dovremmo anche settare il web server per far si che il MANIFEST non sia main cache:

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

Da testare quanto prima!

Enjoy!