HTML5 Battery Status API: monitorare la batteria con JavaScript

11 giugno 2013

Il numero di dispositivi mobile che si connettono al Web è in costante crescita e le relative tecnologie devono naturalmente tenerne conto. Infatti da alcuni anni ormai il W3C sta adeguando i propri standard per facilitare il supporto mobile per il Web sia nella visualizzazione del pagine che nella gestione di media e dati. In questo ambito si pongono le Battery Status API, un insieme di funzionalità che ci consentono di monitorare lo stato della batteria del dispositivo su cui gira il browser.

In questo articolo vedremo in concreto come utilizzare le Battery Status API.

Supporto delle API

La prima cosa da fare è accertarsi se le API sono supportate dal browser corrente. A questo scopo abbiamo a disposizione la proprietà battery dell’oggetto navigator. Prima però di scrivere il codice necessario per la verifica, occorre fare una precisazione: allo stato attuale le API sono in stato di Candidate Recommendation, quindi formalmente non in uno stato di standard definitivo, e soltanto le versioni più recenti di Firefox le supportano.

Nello specifico, Firefox supporta le Battery Status API dalla versione 10 con il prefisso moz mentre dalla versione 16 il prefisso è stato rimosso. Quindi per verificare l’effettivo supporto delle API è opportuno farlo con un codice analogo al seguente:

var isBatterySupported = (navigator.battery || navigator.mozBattery);

La variabile ci dirà se il browser corrente supporta le API o meno. Proviamo a fornire all’utente questa informazione graficamente, ad esempio, tramite un box che assumerà colori diversi a seconda dello stato corrente. Iniziamo col fare assumere la colorazione grigia nel caso un cui non siamo in grado di stabilire lo stato della batteria.

Possiamo ottenere ciò partendo dal seguente HTML:

<div id="indicatoreBatteria" style="border: 5px black solid; height: 100px; width: 300px">

</div> 

ed aggiungendo il seguente codice JavaScript:

var isBatterySupported = (navigator.battery || navigator.mozBattery); 
var indicatoreBatteria = document.getElementById("indicatoreBatteria"); 

if (isBatterySupported) { 

	// Gestione dello stato della batteria 
} else { 

	indicatoreBatteria.style.backgroundColor = "LightGray";
} 

Sui browser che non supportano le API il box verrà visualizzato come nella seguente figura:

ALT_TEXT

Verificare lo stato della batteria

Vediamo ora come individuare lo stato della batteria nel caso in cui il browser supporti le API.

L’oggetto navigator.battery prevede una serie di proprietà che ci forniscono diverse informazioni. Ad esempio, la proprietà level ci indica il livello di carica corrente tramite un valore decimale che va da 0 (scarica) a 1.0 (carica). Viene fornito il valore 1.0 anche quando il dispositivo non ha batteria ma è collegato direttamente alla presa di corrente.

La proprietà booleana charging indica se la batteria è in fase di caricamento, mentre le proprietà chargingTime e dischargingTime indicano il numero di secondi previsti rispettivamente per la carica completa o per lo spegnimento per esaurimento.

Se la batteria non è in carica il valore assunto da chargingTime sarà Infinity; analogamente quando la batteria è completamente carica ed il dispositivo è collegato alla rete elettrica dischargingTime assumerà il valore Infinity.

Possiamo fornire informazioni visive all’utente sullo stato corrente della batteria cambiando il colore di sfondo del nostro box. Ad esempio possiamo utilizzare il verde nel caso in cui la batteria è in fase di caricamento e il giallo altrimenti:

 
if (navigator.battery.charging) { 
	
	indicatoreBatteria.style.backgroundColor = "Green"; 
} else { 

	indicatoreBatteria.style.backgroundColor = "Yellow"; 
} 

Possiamo anche dare un’indicazione grafica del livello di carica della batteria sfruttando la proprietà level. A questo scopo inseriamo il nostro HTML all’interno di un <div> a dimensione fissa:

<div style="border: 5px black solid; height: 100px; width: 300px;"> 

 	<div id="indicatoreBatteria"></div> 

</div> 

e facciamo variare le dimensioni del nostro box in funzione del livello di carica corrente:

indicatoreBatteria.style.width = battery.level * 100 + "%";

Il risultato grafico, ad esempio quando il dispositivo non è in carica, sarà analogo a quello mostrato nella seguente figura:

ALT_TEXT

Possiamo anche impostare il colore di background a rosso quando la carica della batteria scende al di sotto del 10%:

if (navigator.battery.level < 0.1) {

	indicatoreBatteria.style.backgroundColor = "Red"; 
} 

Possiamo anche prevedere un box testuale sotto il box grafico in cui possiamo indicare il tempo di carica rimanente se il dispositivo non è sotto carica altrimenti il tempo previsto per il completamento della carica:

 
if (navigator.battery.charging) { 

 	infoBox.innerText = "La batteria sarà carica in " + battery.chargingTime + " secondi!"; 
} else { 

 	infoBox.innerText = "La batteria sarà scarica in " + battery.dischargingTime + " secondi!"; 
} 

Vediamo ora quali eventi associati al consumo energetico possiamo sfruttare e in quali scenari.

Se vuoi aggiornamenti su HTML5 Battery Status API: monitorare la batteria con JavaScript inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su HTML5 Battery Status API: monitorare la batteria con JavaScript

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy