La potenza delle api in HTML5

L'HTML5 introduce una serie di API per agevolare lo sviluppatore nella realizzazione di applicazioni web e mobile.
Di seguito verranno introdotte le più interessanti in modo da rendere note le potenzialità a disposizione e servire da spunto per stimolare idee e progetti. Si intenda questa parte di articolo come una carrellata di nozioni talvolta più o meno approfondita al solo scopo conoscitivo, in base anche agli utilizzi ed i test che ho eseguito personalmente, per approfondimenti ed aggiornamenti rimando come sempre alle specifiche ufficiali sul sito del W3C nella relativa sezione html5.

Tra le API di maggior importanza rientrano quelle relative alla conservazione dei dati direttamente nel browser siano essi copie di file interi che coppie chiavi-valore più o meno strutturate.
Pertanto c'è la possibilità di fare in modo che il browser conservi in locale una copia di determinati file letti dallo stesso all'apertura di una pagina al fine di poter essere recuperati anche in assenza di una connessione di rete. Per farlo è necessario creare un file con estensione .manifest (in caso non funzionasse verificare sul server la presenza di quest'estensione nei MIME type), dichiarare al suo interno quali file dovranno essere conservati (vedere il codice poco sotto subito dopo il testo CACHE MANIFEST) e/o indicare pagine di riserva a pagine online in modo che vengano visualizzate in assenza di connessione (FALLBACK) e/o indicare risorse esclusivamente visualizzabili online (NETWORK), dopodichè inserire nel tag html l'attributo manifet="nomefile.manifest". Di seguito un esempio del contenuto di un ipotetico file manifest:

CACHE MANIFEST
pagina.html
nomefile.js
nomevideo.mp4
FALLBACK
pagina_online.html pagina_offline.html
NETWORK
pagina_visualizzabile_sempre_se_online.html

Dopodichè lavorare con gli eventi messi a disposizione delle API Offline, nell'ordine: checking (controlla se sono state apportate modifiche al file .manifest), noupdate (invocato se non sono state apportate modifiche al file .manifest), downloading (invocato se ci sono file da scaricare non ancora in cache), progress (invocato per ogni nuova risorsa da scaricare in cache), cached (invocato al completamento del download delle nuove risorse in cache), updateready (invocato dopo modifiche apportate alla cache pronto per l'aggiornamento della stessa), obsolete (elimina la cache in caso il file .manifest non venga più trovato in quanto risulta appunto obsoleta), error (invocato in caso di errore nella gestione della cache).
Un esempio di utilizzo di un evento può essere il seguente (window.applicationCache è l'oggetto relativo alla cache):

window.applicationCache.addEventListener('checking', function (e) {
  // Funzioni da applicare durante il controllo di eventuali
  //modifiche al file .manifest
}, false);

Le WebStorage API servono invece, principalmente, per archiviare dati a livello di browser e, con 5Mb di spazio a disposizione, nascono per sopperire a carenze funzionali dei cookie quali appunto la dimensione (vedi localStorage) e le sessioni multiple (sessionStorage).
Lo spazio messo a disposizione per lo storage permette anche di poterlo utilizzare non solo per l'archiviazione di cookie ma anche come vera e propria base di dati dove le coppie chiave-valore possono complessarsi con l'utilizzo di dati serializzati.
Su questo principio ho basato la mia applicazione per dispositivi mobili, Totocena, creata con Apache Cordova sfruttando le potenzialità dell'HTML5 (oltre a jQuery Mobile e CSS).
Nello specifico mi sono avvalso di jStorage, per archiviare appunto coppie di dati chiave-valore nel browser come se fosse un database garantendo la compatibilità cross-browser (che nel caso della mia applicazione era del tutto ininfluente), condensando l'inserimento dei dati, il loro rilascio e la loro rimozione in unico oggetto:

var CacheManager = (function () {
var instance;
function createObject() {
  return {
    put: function (key, value) {
        $.jStorage.set(key, value);
    },
    get: function (key) {
      return $.jStorage.get(key);
    },
    remove: function (key) {
      return $.jStorage.deleteKey(key);
    }
  };
}; 
return {
  getInstance: function () {
    if (!instance) {
      instance = createObject();
    }
    return instance;
  }
};
})();

La gestione dello storage a livello di codice può essere fatta in questo modo:

// creo l'istanza dell'oggetto
var cacheManager = CacheManager.getInstance();

// inserire il valore in una chiave
cacheManager.put("chiave", valore); 'semplice o oggetto JSON

// fornire il valore di una chiave
cacheManager.get("chiave")

// rimuovere una coppia chiave-valore
cacheManager.remove("chiave");

Ma il browser oltre a conservare copie di file e migliorare la gestione dei cookie come appena visto, può prendersi carico anche di altri tipi di dato consentendo a ciascun utente di poter usufruire di un vero e proprio database in locale.
Entra quindi in gioco l'API Indexed Database che lavora con dati serializzati (stile JSON) sul quale è possibile eseguire le classiche query di ricerca, inserimento, modifica ed eliminazione di record organizzati in coppie chiave-valore.

Interessanti, soprattutto con lo sviluppo del loro utilizzo nel mobile sono le API per la Geolocalizzazione (Geolocation) che ovviamente consentono il recupero delle coordinate di longitudine e latitudine e di altri parametri come ad esempio l'altitudine, l'accuratezza, la direzione, ecc...
Con il codice seguente è possibile recuperare la propria posizione semplicemente richiamando la pagina in cui si trova:

<script>
  var geoSuccess = function (position) {
    alert("Latitudine: " + position.coords.latitude + "
" +
          "Longitudine: " + position.coords.longitude);
  };

  var geoError = function (error) {
    alert("Errore " + error.code + ": " + error.message);
  };

  var positionOptions = {
    enableHighAccuracy: true,
    timeout: 1000,
    maximumAge: 500
  };

  window.onload = function () {
    navigator.geolocation.getCurrentPosition(geoSuccess, geoError, positionOptions);
  }
</script>

E' possibile che vengano restituiti alcuni errori ovvero:
Errore 1: Permesso negato (User denied Geolocation)
Errore 2: Posizione non disponibile (position unavailable)
Errore 3: Timeout, troppo tempo per recuperare la posizione (Position acquisition timed out)

Solitamente la causa di questi errori, ad eccezione di un problema a livello di codice, è data dai permessi del browser (spesso non basta semplicemente consentire il recupero della posizione ma è necessario agire a livello più approfondito); per fare un esempio, nel caso specifico, con Chrome 36, IExplorer 11 ed Opera 11 ottengo le mie coordinate, con Firefox 31 ottengo l'errore 3, con Chrome su mobile ottengo l'errore 1.

Passando ad altro è doveroso menzionare la gestione dei file multimediali audio e video che è stata pensata dall'HTML5 sia a livello di markup che di API per potercisi interfacciare.
Un esempio per l'integrazione di un file audio:

<audio controls autoplay loop>
  <source src="music.mp3" type="audio/mp3">
</audio>

Dove con control si richiede la presenza dei classici comandi come il tasto Play, Pausa, Stop, ecc..., con autoplay vogliamo che l'esecuzione del file audio parta automaticamente e con loop che rinizi ogni volta che giunge al termine.

Per i video l'implementazione è simile alla seguente:

<video  poster="myvideos/image_video.jpg" controls>
  <source src="myvideos/video01.mp4"  type="video/mp4" />
  <source src="myvideos/video01.ogg"  type="video/ogg" />
</video>

Dove è possibile con poster fornire un'immagine iniziale, con i tag source definire più formati video per garantirne la loro visione in base ai codec supportati dai vari browser ed anche in questo caso con control si richiede la presenza dei classici comandi di interazione.

Ma le API coprono anche altre esigenze e ci sono pertanto le API Web Workers che, con oggetti di classe Worker o SharedWorker, permettono l'esecuzione asincrona di codice Javascript. Un'innovazione sta nel fatto che, nel primo caso l'esecuzione del file è riferita alla sessione della finestra del browser in cui è eseguito ma nel secondo caso il suo effetto può essere condiviso da tutte le sessioni aperte siano esse sulla stessa finestra (gestite come abbiamo visto tramite sessionStorage) che su finestre diverse del browser, purchè il dominio sia il medesimo.

Poi ci sono le API WebSockets che, sfruttando un protocollo dedicato, hanno la finalità non solo di stabilire bensì anche di mantenere una connessione dati tra il browser e il server remoto.

Il Drag and Drop (draggable="true") è implementato nativamente con gli stessi effetti già noti ottenuti sin ora con jQuery ossia dal riordinamento delle liste allo spostamento di elementi e blocchi nella pagina ad un vero e proprio sistema di scambio dati anche con sistemi esterni al browser (trascinamento file su browser ad esempio per un upload).

Per ultimo, ma di certo non per importanza, cito la presenza di API molto interessanti per lavorare con l'elemento canvas e rendere un'area della pagina, definita in altezza e larghezza, letteralmente disegnabile con linee, figure geometriche, colori, ecc... in modo da coprire quegli effetti grafici fin'ora legati alla tecnologia Flash. Quest'area disegnabile si definisce contesto e può essere 2D o 3D (WebGL).
Dato l'alto potenziale di questo elemento non lo approfondirò ulteriormente in questa fase ma gli dedicherò un articolo a se stante; ci basti sapere per il momento che il tag canvas è un semplice elemento atto a contenere un contesto reinderizzato in Javascript, in altre parole l'elemento canvas è incorporato nella pagina HTML e rappresenta di per se il nodo a livello di DOM che a sua volta contiene un contesto, come se fosse una tela, che rappresenta un oggetto con proprietà e metodi utilizzabili per il rendering della grafica all'interno appunto dell'elemento canvas stesso.

Appena sarà pronto inserirò il link all'articolo dedicato per mostrare le potenzialità del canvas con esempi pratici dato che in poche righe risulta molto difficile far apprezzare la sua reale potenza.