Siti web offline: come far usare pagine e funzioni senza collegamento Internet con Cache HTML5

Vediamo come visualizzare siti web offline grazie alla Cache HTML5. Codice ed esempi.

I contenuti di siti e applicazioni web possono essere visualizzati offline grazie all’uso della cache HTML5. Questo metodo di produzione è conosciuto anche come HTML5 caching o HTML5 Offline Application Caching. Come funzione il tutto? Le operazioni di recupero informativo sono gestite dall’attributo “manifest”. Attraverso “manifest” è possibile specificare un elenco di risorse che potranno essere navigate in locale anche in mancanza di una connessione Internet.

I dati specificati verranno incapsulati nel browser dopo la prima sessione di navigazione. La posa in essere di un’operazione simile è piuttosto semplice: si crea un file con i dati/file da memorizzare e il gioco è fatto.

Un file cache ha grossomodo questo aspetto:

CACHE MANIFESTindex.htmlfoglio-di-stile.cssimmagini/immagine.pngscripts/script-JS.js

L’importante è ricordarsi di mettere l’istruzione CACHE MANIFEST in cima all’elenco delle informazioni da registrare. Dopo questa prima indicazione, segnaliamo in colonna al documento tutte le risorse che vogliamo possano essere visualizzate offline.

Salviamo il file con un nome a piacere, come fileweb.manifest, e indichiamo all’HTML la presenza di un elemento “manifest” dedicato a memorizzare dati offline:

<html manifest="fileweb.manifest">

Ricordiamoci di indicare il nome dato al file salvato. Quando visiteremo un sito con queste impostazioni, se il browser supporta l’application cache, ci verrà richiesto se tali contenuti potranno essere conservati in locale.

I software di navigazione che supportano “manifest” sono i seguenti: Mozilla Firefox 3.5, Apple Safari 4.0, Google Chrome 2.0 e Opera 10.6. Internet Explorer al momento non è nell’elenco.

Ora creiamo il MIME Type più consono al file “manifest” elaborato. Se non effettuiamo questo processo, il browser non riconoscerà l’elemento “manifest” per la cache e tutto il lavoro sarà stato vano.

Le istruzioni variano da server a server: per Apache dovremo creare un file .htaccess nella cartella primaria del sito con la seguente istruzione:

AddType text/cache-manifest manifest