HTML5 Mobile App: come gestire la connessione di rete

Ultimamente ho ricevuto molte domande inerenti la creazione di applicazioni mobile in HTML5, CSS3 e Javascript.

Gran parte sono incentrate su come gestire l’assenza di connessione e su come procedere per il salvataggio dati.

Oggi voglio affrontare il primo di questi due aspetti, mostrandoti come controllare la connessione in una applicazione mobile, con una serie di accorgimenti che sono il frutto della mia esperienza nella realizzazione di oltre 10 applicazioni, tra cui due progetti personali, Tint e Dieta Si o No?.

Quando e perché è necessario gestire la connessione

Gestire la connessione rappresenta un fattore fondamentale nello sviluppo di una mobile app.

Quando parliamo di un’applicazione mobile HTML5, ci riferiamo a una single page application, in cui il documento iniziale non viene mai ricaricato.

Molte applicazioni possono funzionare in modo completamente indipendente dalla connessione internet, senza avere cioè il bisogno di eseguire alcuna chiamata lato-server, poiché non sono state pensate per manipolare dati dinamici.

Potrebbe essere il caso di applicazioni per la sveglia, di quelle per la gestione delle spese personali, o tutte quelle app per il cui funzionamento sono sufficienti i dati del dispositivo.

dieta-si-o-no-mobile-app

Dieta SI o NO? è un esempio di applicazione in cui la connessione internet non viene gestita. Essa raggruppa i dati forniti dall’utente e li salva nel dispositivo, per poi eseguire i propri calcoli quando viene seleziona la schermata dei risultati.

Tuttavia, nella maggior parte dei casi lo sviluppatore ha bisogno di implementare nella propria applicazione  una comunicazione lato-server: è il caso di quelle applicazioni che salvano su un database remoto le TO-DO -List dell’utente, che riprendono dati da visualizzare in una lista, o che mostrano le ultime novità su un determinato prodotto o servizio.

 tint-html5-mobile-App

Tint è l’esempio di una mobile app che comunica con il server, sia per reperire i dati meteo in base alla posizione dell’utente o le località che egli seleziona, sia per salvare su un Database Remoto informazioni per avere un quadro complessivo su come viene utilizzata l’applicazione.

Siccome stiamo parlando di single page apps, questo tipo di comunicazione avviene rigorosamente tramite ajax, che evita di ricaricare la pagina offrendo un’esperienza utente più leggera e meno fastidiosa.

Effettuando chiamate ajax possiamo infatti gestire come vogliamo tutti i tipi di transizioni o animazioni legate al reperimento o  salvataggio dei dati, come nella paginazione di una lista di record caricati via server, dove si verifica una chiamata ogni volta che l’utente decide di passare alla prossima pagina, oppure un lista caricata gradualmente durante lo scrolling.

Tint-connection-statusUna delle caratteristiche che differenzia le single page app dalle applicazioni multi-page / server-side, è la possibilità di offrire il supporto off-line.

Il supporto off-line consiste nel verificare la presenza o meno della connessione internet ogni qualvolta viene lanciata una chiamata remota, e se essa non è disponibile, mostrare all’utente una piacevole notifica.

Il supporto off-line è fondamentale per qualunque tipo di single page app; tralasciare questo aspetto potrebbe infatti compromettere un’importante operazione di salvataggio dati o incappare in errori javascript, bloccando involontariamente le funzionalità dell’interfaccia.

Inoltre, visto che rappresenta una delle regole ferree su cui si basa la politica di accettazione dell’App Store, aggiungere il supporto off-line nella propria app è un vero e proprio must.

OK, ma come si controlla la presenza o meno della connessione?

Modalità per la gestione della connessione

Vediamo qualche esempio di codice.

Per non compromettere la funzionalità di controllo durante il testing dell’app sui browser desktop, ed utilizzare quella nativa nel caso in cui lanciamo il progetto direttamente sul dispositivo vero e proprio (o sul simulatore), è bene inserire come prima cosa una semplice condizione:

function checkConnection(){

	var online, speed;
	/*
	condizione di controllo per determinare se l'app viene correntemente testata 
	in un simulatore o dispositivo mobile (quindi utilizzando PhoneGap) o in un normale browser
	che supporta l'HTML5
	*/

	if(typeof cordova != "undefined"){ 	    
		
                /*
	    si tratta di un dispositivo vero e proprio o di un simulatore, quindi
	    utilizziamo il plugin "Connection" messo a disposizione da Phonegap
	    */
	    var networkState = navigator.connection.type;	
	    var states = {};
	    states[Connection.UNKNOWN]  = 'Unknown';
	    states[Connection.ETHERNET] = 'Ethernet';
	    states[Connection.WIFI]     = 'WiFi';
	    states[Connection.CELL_2G]  = 'Cell_2G';
	    states[Connection.CELL_3G]  = 'Cell_3G';
	    states[Connection.CELL_4G]  = 'Cell_4G';
	    states[Connection.CELL]     = 'Cell_generic';
	    states[Connection.NONE]     = 'None';
	
	    //determino il tipo di connessione in base all'oggetto "states" appena definito grazie al plugin Phonegap
	    var connType = states[networkState]; 
	
	    if(connType=='None')
			online = false;
		else{
			online = true;	
			if(connType=="Cell_2g" || connType=="Cell_generic")
				speed="slow";
			else
				speed="fast";
	    }
		    	
	}else{    	
	
	   /*
	 	si tratta di un normale browser desktop o mobile, quindi
		utilizziamo la funzionalità HTML5
	   */
	    online = navigator.onLine;
	    
	    if(online){
	    	var conn = navigator.connection || {'bandwidth':'0'};
	    	//utilizziamo il metodo "bandwidth" per determinare la velocità di connessione, il quale restituisce un valore numerico che indica la larghezza di banda della connessione corrente	    	
	    	if(conn.bandwidth>2)
	    		speed="fast";
		  else
			speed="slow";
			
	    }
	     
	}	
	return online?speed:false;

}

var deviceConnection = checkConnection();
if(deviceConnection){
	if(deviceConnection == "slow"){
		//gestione connnessione lenta
	}else{
		//gestione connnessione veloce
	}
}else{	
	/*
	gestione transizioni ed effetti per mostrare all'utente 
	un gradevole avviso di mancanza di connessione  
	*/
}

Dall’esempio puoi notare come determinando il tipo di banda (quindi velocità e performance) sia possibile compiere delle azioni invece che altre. È possible per esempio scegliere di mostrare immagini o video di qualità inferiore nel caso di una connessione lenta, o contenuti di alta qualità nel caso di una connessione più veloce.

sky-selezione-qualita

L’applicazione Sky Go invia contenuti di alta, media o bassa qualità a seconda della velocità di connessione del dispositivo, oltre che renderne disponibile la selezione manuale.

Nel caso in cui invece il dispositivo sia off-line, è buona norma mostrare un gradevole avviso all’utente (magari utilizzando animazioni e transizioni CSS3 fluide e performanti).

Potremmo eventualmente prevedere di aggiungere un opportuno messaggio di avviso al click di ogni pulsante destinato a richiamare un’azione server, per poi riabilitarne le funzioni quando il dispositivo è di nuovo on-line.

Se sei interessato a realizzare effetti fluidi e performanti per applicazioni mobile sviluppate in HTML5 e Javascript, forse potrebbero interessarti i seguenti articoli:

Naturalmente il metodo “bandwidth” messo a disposizione dall’oggetto navigator.connection può essere utilizzato in qualunque web app e non soltanto in quelle mobile, in modo da migliorare e rendere più efficiente la user-experience finale.

Come gestire la perdita di connessione e il cambiamento di velocità

Proprio perché si chiamano dispositivi “mobili” gli smartphone e tablet possono facilmente perdere la connessione o ritrovarla, oltre che passare da un tipo di velocità a un altro, con modifica della larghezza di banda (accade molto spesso di passare dal 3G ad una rete WiFi e viceversa); è quindi buona norma gestire anche questo tipo di situazioni.

Per controllare il passaggio da “on-line” a “off-line” del dispositivo possiamo agire sugli eventi “oniline” ed “offline” del documento:

/*
controllo dell’inclusione del file cordova.js di Phonegap nel documento,
con relativo switch all’oggetto “window” o “document”.
*/
var deviceObject = typeof cordova != "undefined"?document:window;

deviceObject.addEventListener("offline", function(e) {
  /*
  è stata appena persa la connessione per il dispositivo, 
  quindi prendiamo tutti gli accorgimenti del caso (come per es. disabilitare 
  le azioni dei pulsanti)
  */    
}, false);

deviceObject.addEventListener("online", function(e) {
  /*
  è appena tornata la connessione per il dispositivo, 
  quindi agiamo di conseguenza (riabilitamo le azioni dei pulsanti)
  */  
  var deviceConnection = checkConnection();
  
}, false);

Se il nostro intento è invece quello di controllare il cambiamento di stato della connessione, possiamo fare affidamento sull’evento “change” dell’elemento navigator.connection:

navigator.connection.addEventListener('change', function(){
	var deviceConnection = checkConnection();
}, false);

Conclusioni

Gestire correttamente la presenza o meno della connessione, nonché i cambiamenti relativi alla larghezza di banda, può avere un impatto determinante nella qualità dell’applicazione che stiamo sviluppando.

Grazie a qualche piccolo accorgimento è possible rendere l’esperienza utente innovativa ed accattivante, proponendo magari dei contenuti alternativi quando i servizi server-side non sono disponibili.

Utilizzando questa tecnica unita a molte altre ho creato per i miei clienti oltre 10 applicazioni mobile, tra cui due progetti personali: Tint Weather App e Dieta SI o NO?.

Se anche tu sei un web designer e vuoi realizzare la tua applicazione mobile da distribuire nei vari stores, forse sarai interessato al mio e-book: HTML Mobile Accelerato.

Grazie ad esso verrai a conoscenza di tutte quelle tecniche che renderanno la tua mobile app fluida e reattiva come quelle native.

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
Tag: , , ,

L'autore

Web Designer Freelance e Developer (conosciuto anche come upCreative), si occupa del design e dello sviluppo di applicazioni web dal 2008; è abituato a gestire più ruoli e spaziare su più campi, ma le sue passioni principali sono realizzare interfacce in html5 e CSS3 e testare continuamente nuove tecniche di content marketing. Sta scrivendo un e-book su come realizzare mobile app (http://www.upcreative.net/html-mobile-accelerato/)

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

4 commenti

Trackback e pingback

  1. HTML5 Mobile App: come gestire la connessione d...
    […] Ultimamente ho ricevuto molte domande inerenti la creazione di applicazioni mobile in HTML5, CSS3 e Javascript. Gran parte sono …
  2. HTML5 Mobile App: tecniche per il salvataggio dei dati | Your Inspiration Web
    […] HTML5 Mobile App: come gestire la connessione di rete […]

Lascia un Commento

Current day month ye@r *