Una delle caratteristiche che rendono HTML5 il linguaggio delle web applications e che lo hanno reso il protagonista di questa rivoluzione nel mondo della programmazione web è la possibilità di creare applicazioni che funzionino anche anche non si è online. Questa qualità è particolarmente apprezzata nell'ambito del mobile web dove la connessione del nostro smartphone è spesso piuttosto ballerina e dunque avere accesso sempre ai dati e alle informazioni rende l'esperienza di navigazione molto meno frustrante.
jQuery offline è un plugin per jQuery che sfrutta la nuova tecnologia localStorage di HTML5 per rendere estremamente semplice la creazione di web apps che possano funzionare anche quando non si è online, aggiornandosi automaticamente con i dati più recenti nel momento in cui si torna online.
Il meccanismo è piuttosto semplice. Ipotizziamo di voler costruire una web app (cioè, a dirla come si diceva un volta, un sito web) con una sezione di news. Per fare in modo che questa sezione sia accessibile anche quando il nostro utente è offline (caso tipico l'utilizzatore da smartphone in assenza di copertura) non dovremo far altro che:
- creare la pagina che ci interessa utilizzando un "template" e il plugin jQuery jquery-templ (questo per garantire che l'aggiornamento dell'HTML avvenga correttamente, in caso contrario è più complesso gestire la creazione della pagina)
- aggiornare periodicamente la pagina (o meglio il nostro template) utilizzando la funzione jQuery.retrieveJSON che sa riconoscere se è online e offline e, nel caso in cui non ci fosse connessione, sa prendere i dati dalla cache
In questo caso il risultato che otterremmo è che la nostra pagina è sempre visibile: se siamo online, jQuery.retrieveJSON prende i dati più "freschi" e aggiornati, se non siamo online i dati vengono presi dalla cache e anche se sono "vecchi" sono comunque visualizzabili
Un po' di codice
Preso direttamente dalla pagina del progetto, vediamo un po' di codice. Prima di tutto creiamo la pagina HTML:
<html manifest="application.manifest">
<head>
<link rel="stylesheet" href="/stylesheets/application.css" />
<script src="/javascripts/jquery.js"></script>
<script src="/javascripts/template.jquery.js"></script>
<script src="/javascripts/jquery.offline.js"></script>
<script id="articleTemplate" type="text/html">
{{each(article) articles}}
<article>
<header>
<h1>${article.title}</h1>
<h2>By ${article.byline}</h2>
</header>
${article.body}
</article>
{{/each}}
</script>
</head>
<body>
<div id="loading"><img src="loading.png" /></div>
<header>
<img src="masthead.png" />
<nav><ul>
<li>Main List</li>
<li>Recommended</li>
</ul></nav>
</header>
<div id="articles">
</div>
<footer>
Copyright Me, Inc.
</footer>
</body>
</html>
Qui abbiamo creato la pagina con il "template" che utilizzeremo per mostrare la lista delle news. Vediamo ora il JavaScript
jQuery(document).ready(function($) {
// jQuery.retrieveJSON usa le funzioni Ajax di jQuery
// quindi possiamo associare funzioni agli eventi "normali"
$("#loading").ajaxStart(function() { $(this).show(); });
$("#loading").ajaxStop(function() { $(this).hide(); });
var updateArticles = function(callback) {
$.retrieveJSON("/article_list.json", function(json, status) {
var content = $("#articleTemplate").render( json );
$("#articles").empty().append(content);
// Se siamo online e dunque abbiamo recuperato i dati
// metti in coda un aggiornamento fra 5 minuti
if( status == "success" ) { setTimeout( callback, 300000 ); }
});
};
// Tra 5 minuti lancia una richiesta per aggiornare i dati.
// Se siamo online i dati saranno ricevuti e processati immediatamente
// In caso contrario verrà messa in cosa una richiesta appena
// torneremo online
setTimeout(function periodicUpdater() {
// passa la funzione "periodicUpdater" come callback a "updateArticles"
updateArticles(periodicUpdater);
}, 300000)
// Aggiorna i dati prendendoli dalla cache
//
// Se siamo online verràà eseguito un processo in background
// per aggiornare la cache. Sennò si mette in coda per quando
// saremo online
updateArticles();
});
Sembra piuttosto complesso ma in realtà non fa altro che
- richiamare la funzione "updateArticles()" che aggiorna la pagina HTML (usando il template) con i contenuti presi dalla cache
- se siamo online, attraverso $.retrieveJSON aggiorna la cache mentre se non siamo online "mette in coda" la richiesta di aggiornamento per quando saremo di nuovo collegati
- se siamo riusciti ad aggiornare la cache mette in esecuzione, dopo 5 minuti, un nuovo aggiornamento della cache
Semplice, pulito, efficace. E pronto per aiutarci a rendere le nostre web apps, mobili o no che siano, accessibili anche quando Internet non c'è.
