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:

  1. 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)
  2. 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"><br />      <head><br />        <link rel="stylesheet" href="/stylesheets/application.css" /><br />        <script src="/javascripts/jquery.js"></script><br />        <script src="/javascripts/template.jquery.js"></script><br />        <script src="/javascripts/jquery.offline.js"></script><br />        <script id="articleTemplate" type="text/html"><br />          {{each(article) articles}}<br />          <article><br />            <header><br />              <h1>${article.title}</h1><br />              <h2>By ${article.byline}</h2><br />            </header><br />            ${article.body}<br />          </article><br />          {{/each}}<br />        </script><br />      </head><br />      <body><br />        <div id="loading"><img src="loading.png" /></div><br />        <header><br />          <img src="masthead.png" /><br />          <nav><ul><br />            <li>Main List</li><br />            <li>Recommended</li><br />          </ul></nav><br />        </header><br />        <div id="articles"><br />        </div><br />        <footer><br />          Copyright Me, Inc.<br />        </footer><br />      </body><br />    </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($) {<br />      // jQuery.retrieveJSON usa le funzioni Ajax di jQuery<br />      // quindi possiamo associare funzioni agli eventi "normali" <br />      $("#loading").ajaxStart(function() { $(this).show(); });<br />      $("#loading").ajaxStop(function() {  $(this).hide(); });<br />    <br />      var updateArticles = function(callback) {<br />        $.retrieveJSON("/article_list.json", function(json, status) {<br />          var content = $("#articleTemplate").render( json );<br />          $("#articles").empty().append(content);<br />    <br />          // Se siamo online e dunque abbiamo recuperato i dati<br />          // metti in coda un aggiornamento fra 5 minuti<br />          if( status == "success" ) { setTimeout( callback, 300000 ); }<br />        });<br />      };<br />    <br />      // Tra 5 minuti lancia una richiesta per aggiornare i dati.<br />      // Se siamo online i dati saranno ricevuti e processati immediatamente<br />      // In caso contrario verrà messa in cosa una richiesta appena<br />      // torneremo online<br />      setTimeout(function periodicUpdater() {<br />        // passa la funzione "periodicUpdater" come callback a "updateArticles"<br />        updateArticles(periodicUpdater);<br />      }, 300000)<br />    <br />      // Aggiorna i dati prendendoli dalla cache<br />      //<br />      // Se siamo online verràà eseguito un processo in background<br />      // per aggiornare la cache. Sennò si mette in coda per quando<br />      // saremo online<br />      updateArticles();<br />    });

Sembra piuttosto complesso ma in realtà non fa altro che

  1. richiamare la funzione "updateArticles()" che aggiorna la pagina HTML (usando il template) con i contenuti presi dalla cache
  2. 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
  3. 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'è.

 

The following two tabs change content below.
Silvio Porcellana
Silvio Porcellana è il fondatore di mob.is.it, il tool che centinaia di agenzie e professionisti di tutto il mondo utilizzano per creare con semplicità siti mobili e applicazioni native per i loro clienti. Tiene anche un podcast dove racconta ogni venerdì le sue avventure imprenditoriali, senza veli o segreti: Opus Digitalis