Paolo De Feo
a- a+

Navigare offline sui siti web con HTML5, file manifest e cache

Vediamo cosa sono Application cache e Offline Application Caching, ovvero come navigare anche quando non si è connessi alla rete.

Application cache e Offline Application Caching sono due denominazioni che indicano una delle numerose novità di HTML5: la possibilità di navigare agevolmente (o nel modo più agevole possibile) anche quando non si è connessi alla Rete. Application cache e Offline Application Caching funzionano quindi in un modo abbastanza semplice: si crea un file che indica al browser quali file memorizzare e mostrare quando non si è connessi, un’operazione dalla semplice implementazione.

Vediamo come funziona il tutto. In un qualsiasi editor creiamo il nostro file con i documenti che andranno salvati, come nell’esempio seguente:

CACHE MANIFEST
index.html
stylesheet.css
images/logo-sito-web.png
scripts/misc.js

NETWORK:
search.php
login.php
/api

FALLBACK:
images/dynamic.php static_image.png

Nota bene: bisogna ricordarsi di inserire sempre il testo CACHE MANIFEST in cima al nostro elenco. Una volta inserite tutte le informazioni salviamolo come

nome-a-piacere.manifest

L’implementazione all’interno della pagina web avviene in questo modo, tramite un semplice richiamo:

<!DOCTYPE HTML>
<html manifest="nome-a-piacere.manifest"> 

I settaggi del web server

Ora, dobbiamo assicurarci che il nostro web server possa elaborare quanto codificato in precedenza, altrimenti il lavoro svolto sarà stato del tutto inutile. Il MYME Type da utilizzare è:

text/cache-manifest

Apriamo il file .htaccess e aggiungiamo questa stringa:

# Apache mimetype configuration
    AddType text/cache-manifest .manifest

Se si ha accesso al file http.conf aggiungeremo invece questa codifica:

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

Ultima operazione: specifichiamo ad Apache di non includere il file .manifest in cache:

# Cache settings for the manifest file
    <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>

Tutti i maggiori browser supportano Application cache/Offline Application Caching ad eccezione di Internet Explorer (versione 9 inclusa).



Ti potrebbe interessare anche

commenta la notizia

Ci sono 2 commenti
Riccio
Ottima guida!
Ho fatto una piccola applicazione web offline. L' ho testata sul PC con diversi browser e funziona correttamente, mentre nel mio HTC ricevo sempre l' evento error subito dopo il checking. Ho controllato il log dell' apache e ho visto che consegna bene anche il file .manifest.
Le altre applicazioni scaricate dal market funzionano anche se offline.

Vi viene in mente qualcosa?