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:
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:
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.
Gli eventi
Quanto visto finora sulle Battery Status API ci permette di fornire un feedback all'utente sullo stato corrente della batteria. Tuttavia quella che offriamo all'utente è un'informazione statica. Occorrerebbe aggiornare periodicamente le informazioni perché corrispondano allo stato effettivo della batteria. Per questo scopo le API prevedono quattro eventi:
| Evento | Descrizione |
|---|---|
| chargingchange | è l'evento che si verifica quando viene aggiornata la proprietà charging |
| chargingtimechange | questo evento si verifica in corrispondenza dell'aggiornamento di chargingTime |
| dischargingtimechange | è l'evento relativo all'aggiornamento di dischargingTime |
| levelchange | è l'evento che si verifica quando cambia il valore della proprietà level |
Con la disponibilità di questi eventi abbiamo gli strumenti per rendere dinamica e costantemente aggiornata l'informazione sullo stato della batteria. Racchiudendo il codice che avevavmo scritto prima nel corpo di una funzione aggiornaInfoStatoBatteria() possiamo gestire i quattro eventi nel seguente modo:
battery.addEventListener("chargingchange", aggiornaInfoStatoBatteria);
battery.addEventListener("chargingtimechange", aggiornaInfoStatoBatteria);
battery.addEventListener("dischargingtimechange", aggiornaInfoStatoBatteria);
battery.addEventListener("levelchange", aggiornaInfoStatoBatteria);Otterremo così un indicatore costantemente sincronizzato con lo stato della batteria del dispositivo corrente.
Campi di applicazione
L'esempio che abbiamo mostrato nel corso dell'articolo ha soltanto una valenza didattica, dal momento che tutti i dispositivi hanno già un indicatore dello stato della batteria.
È naturale chiedersi quindi a che cosa potrebbe servire nella pratica monitorare lo stato della batteria in una pagina Web. In realtà ci sono diversi campi di applicazione di queste API e il loro corretto utilizzo denoterebbe un uso professionale e user-oriented dell'applicazione Web.
Immaginiamo ad esempio un questionario online che richiede circa quindici minuti per la compilazione. Se prima di avviare il questionario ci accorgiamo che la carica della batteria è sufficiente per soli cinque minuti possiamo avvisare l'utente ed invitarlo a collegare il dispositivo ad un caricabatterie. Gli avremo evitato la frustrazione di vedersi interrompere bruscamente il questionario e ricominciare da capo o quanto meno di dover cercare un caricabatterie nel bel mezzo della compilazione.
Per fare qualche altro esempio, conoscendo il livello della batteria del dispositivo corrente possiamo decidere se abilitare o meno determinate funzionalità multimediali che contribuiscono a consumare energia; oppure possiamo decidere di ridurre la frequenza di richieste al server o di avvisare l'utente che l'attività che si sta per compiere può esaurire la carica della batteria; si può decidere anche di salvare per sicurezza lo stato corrente delle attività dell'utente in prossimità dell'esaurimento della carica.
Insomma, le informazioni sullo stato della batteria ci consentono di attivare una serie di azioni che contribuiscono a migliorare l'esperienza utente, piccoli dettagli che verranno certamente apprezzati perché evitano quelle classiche seccature digitali con cui ci scontriamo tutti i giorni.
