Vai al contenuto

Mantenere lo schermo attivo tramite JavaScript

La Wake Lock API è un’interfaccia JavaScript che consente alle applicazioni web di richiedere al dispositivo di rimanere attivo senza entrare in modalità di sospensione. Questa API è utile in contesti in cui un’applicazione web necessita di mantenere il display attivo o di impedire che il dispositivo entri in modalità di risparmio energetico, garantendo così una migliore esperienza utente.

Funzionalità principali

  1. Schermata attiva (Screen Wake Lock):
    Permette di mantenere lo schermo acceso anche se l’utente non interagisce direttamente con il dispositivo. Questo è particolarmente utile per applicazioni come video player, giochi o presentazioni, dove il dispositivo potrebbe non ricevere input frequenti dall’utente, ma è comunque importante mantenere il display acceso.
  2. Wake Lock di sistema (System Wake Lock):
    Anche se meno comune, c’è la possibilità di mantenere attivo l’intero sistema, impedendo non solo lo spegnimento dello schermo, ma anche l’ingresso in modalità di sospensione completa. Tuttavia, questa funzionalità è meno supportata e potrebbe non essere disponibile su tutti i dispositivi o browser.

Per utilizzare la Screen Wake Lock API, si può fare una richiesta di blocco dello schermo con il seguente codice:

// Richiedere un wake lock per mantenere lo schermo attivo
let wakeLock = null;

try {
    wakeLock = await navigator.wakeLock.request('screen');
    console.log('Wake Lock attivato');
} catch (err) {
    console.error(`${err.name}, ${err.message}`);
}

Per sbloccare o rilasciare il Wake Lock ottenuto tramite la Wake Lock API, puoi semplicemente chiamare il metodo release() sull’oggetto WakeLockSentinel che è stato restituito al momento della richiesta. Questo permette al dispositivo di tornare alla sua normale gestione della sospensione o del display.

let wakeLock = null;

async function requestWakeLock() {
    try {
        wakeLock = await navigator.wakeLock.request('screen');
        console.log('Wake Lock attivato');

        // Aggiungere un listener per monitorare se il Wake Lock viene rilasciato automaticamente (ad esempio, in caso di errore)
        wakeLock.addEventListener('release', () => {
            console.log('Wake Lock rilasciato');
        });
    } catch (err) {
        console.error(`${err.name}, ${err.message}`);
    }
}

// Per rilasciare manualmente il Wake Lock
async function releaseWakeLock() {
    if (wakeLock !== null) {
        await wakeLock.release();
        console.log('Wake Lock rilasciato manualmente');
        wakeLock = null; // Reset dell'oggetto wakeLock
    }
}

// Esempio di utilizzo
requestWakeLock(); // Attiva il Wake Lock
// ...
releaseWakeLock(); // Rilascia il Wake Lock quando non è più necessario

Il Wake Lock potrebbe essere rilasciato automaticamente dal sistema, ad esempio, se l’applicazione perde visibilità o se si verifica un errore. È buona pratica aggiungere un listener per l’evento release, come mostrato nell’esempio, in modo da poter gestire correttamente queste situazioni. Ricordiamoci di rilasciare sempre il Wake Lock manualmente quando non è più necessario, specialmente per ottimizzare il consumo della batteria dell’utente. Prima di chiamare release(), verifichiamo che l’oggetto wakeLock non sia nullo, per evitare errori nel caso in cui il Wake Lock fosse già stato rilasciato o non sia mai stato acquisito.

Un altro paio di cose da tenere a mente:

  • L’API è disponibile solo quando l’applicazione viene servita tramite HTTPS
  • Sebbene questa API esista da parecchio tempo, non tutti i browser la supportano. Possiamo dunque controllare la compatibilità MDN per vedere quali sono supportati