Rimani attivo con l'API Screen Wake Lock

L'API Screen Wake Lock consente di impedire ai dispositivi di oscurare o bloccare lo schermo quando un'applicazione deve continuare in esecuzione.

Pete LePage
Thomas Steiner

Che cos'è l'API Screen Wake Lock?

Per evitare di esaurire la batteria, la maggior parte dei dispositivi entra rapidamente in modalità di sospensione quando lasciati inattivo. Anche se nella maggior parte dei casi va bene, alcune applicazioni devono mantenere con lo schermo attivo per completare il lavoro. Alcuni esempi sono le app di cucina che mostrano i passaggi di una ricetta o di un gioco come Ball Puzzle, che utilizza il dispositivo API Motion per l'input.

L'API Screen Wake Lock consente di evitare l'oscuramento del dispositivo e il blocco dello schermo. Questo consente nuove esperienze che, fino a oggi, richiedevano un'app specifica per la piattaforma.

L'API Screen Wake Lock riduce la necessità di attacchi hacky e soluzioni alternative che consumano molta energia. Consente di colmare le carenze di una vecchia API che si limitava al semplice fatto di mantenere lo schermo acceso e che prevedeva una serie problemi di sicurezza e privacy.

Casi d'uso suggeriti per l'API Screen Wake Lock

RioRun un'app web sviluppata da The Guardian, è stato un caso d'uso perfetto (anche se non è più disponibile). L'app ti fa fare un tour audio virtuale di Rio, seguendo l'itinerario del 2016 maratona olimpica. Senza i wakelock, gli utenti gli schermi si disattivavano spesso durante il tour, rendendoli difficili da usare.

Naturalmente, esistono molti altri casi d'uso:

  • Un'app di ricette che mantiene lo schermo acceso mentre cucini una torta o cucini cena
  • App per carte d'imbarco o biglietti che mantengono lo schermo finché il codice a barre non viene scansionato
  • Un'app in stile kiosk che mantiene lo schermo sempre acceso
  • Un'app per presentazioni basata sul web che mantiene lo schermo durante una presentazione
di Gemini Advanced.

Stato attuale

Passaggio Stato
1. Crea messaggio esplicativo N/D
2. Crea la bozza iniziale delle specifiche Completato
3. Raccogli i feedback e ottimizza la progettazione Completato
4. Prova dell'origine Completa
5. lancio Completato

Utilizzo dell'API Screen Wake Lock

Tipi di wakelock

L'API Screen Wake Lock attualmente fornisce un solo tipo di wakelock: screen.

Wakelock di screen

Un wakelock di screen impedisce allo schermo del dispositivo di girare disattivata, in modo che l'utente possa vedere le informazioni visualizzate sullo schermo.

Recupero di un wakelock dello schermo

Per richiedere un wakelock dello schermo, devi chiamare il metodo navigator.wakeLock.request() che restituisce un oggetto WakeLockSentinel. Passi questo metodo al tipo di wakelock desiderato come parametro. che attualmente è limitato a 'screen' e pertanto è facoltativo. Il browser può rifiutare la richiesta per vari motivi (ad esempio, perché il livello di carica della batteria è troppo basso), quindi è buona norma aggregare la chiamata in un'istruzione try…catch. Il messaggio dell'eccezione conterrà ulteriori dettagli in caso di errore.

Rilascio di un wakelock dello schermo

Devi anche trovare un modo per rilasciare il wakelock dello schermo, che si ottiene chiamando il Metodo release() dell'oggetto WakeLockSentinel. Se non memorizzi un riferimento a WakeLockSentinel, non sarà possibile per rilasciare il blocco manualmente, ma verrà rilasciato quando la scheda corrente non sarà visibile.

Se vuoi rilasciare automaticamente il wakelock dello schermo trascorso un certo periodo di tempo, puoi utilizzare window.setTimeout() per chiamare release(), come mostrato nell'esempio riportato di seguito.

// The wake lock sentinel.
let wakeLock = null;

// Function that attempts to request a screen wake lock.
const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request();
    wakeLock.addEventListener('release', () => {
      console.log('Screen Wake Lock released:', wakeLock.released);
    });
    console.log('Screen Wake Lock released:', wakeLock.released);
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

// Request a screen wake lock…
await requestWakeLock();
// …and release it again after 5s.
window.setTimeout(() => {
  wakeLock.release();
  wakeLock = null;
}, 5000);

L'oggetto WakeLockSentinel ha una proprietà denominata released che indica se la sentinella è già stata rilasciata. Inizialmente, il suo valore è false e diventa true una volta al "release" . Questa proprietà consente agli sviluppatori web di sapere quando si verifica un blocco è stato rilasciato, quindi non è necessario tenerne traccia manualmente. È disponibile a partire da Chrome 87.

Ciclo di vita del wakelock dello schermo

Quando usi la demo di wakelock dello schermo, noterai che si attiva un wakelock dello schermo. sono sensibili alla visibilità della pagina. Ciò significa che il wakelock dello schermo verranno rilasciate automaticamente quando riduci a icona scheda o finestra oppure esci da una scheda o una finestra in cui è attivo un wakelock dello schermo.

Per riacquisire il wakelock dello schermo: rimanere in ascolto dell'evento visibilitychange e richiedi un nuovo wakelock dello schermo quando si verificano:

const handleVisibilityChange = async () => {
  if (wakeLock !== null && document.visibilityState === 'visible') {
    await requestWakeLock();
  }
};

document.addEventListener('visibilitychange', handleVisibilityChange);

Riduci al minimo il tuo impatto sulle risorse di sistema

Dovresti usare un wakelock dello schermo nella tua app? L'approccio da adottare dipende dalle esigenze della tua app. In ogni caso, usare l'approccio più leggero possibile per fare in modo che l'app riduca al minimo un impatto sulle risorse di sistema.

Prima di aggiungere un wakelock dello schermo alla tua app, valuta se i tuoi casi d'uso possono essere risolto con una delle seguenti soluzioni alternative:

di Gemini Advanced.

Demo

Consulta la demo di Attivazione schermo e la fonte demo. Nota come il wakelock dello schermo viene rilasciato automaticamente quando cambi scheda o app.

Blocchi di attivazione schermo nel Task Manager del sistema operativo

Puoi utilizzare il Task Manager del tuo sistema operativo per verificare se un'applicazione impedisce dalla modalità di sospensione del computer. Il video seguente mostra il funzionamento di macOS Monitoraggio attività che indica che Chrome ha un wakelock attivo dello schermo che mantiene attivo il sistema.

Feedback

Web Platform Incubator Community Group (WICG) e il team di Chrome vuole sapere idee ed esperienze con l'API Screen Wake Lock.

Parlaci della progettazione dell'API

C'è qualcosa che non funziona come previsto nell'API? Oppure: mancano metodi o proprietà per implementare la tua idea?

Segnalare un problema con l'implementazione

Hai trovato un bug nell'implementazione di Chrome? Oppure l'implementazione rispetto alle specifiche?

  • Segnala un bug all'indirizzo https://new.crbug.com. Assicurati di includere fornire maggiori dettagli possibili, fornire semplici istruzioni per riprodurre il bug e imposta Componenti su Blink>WakeLock. Glitch funziona benissimo per condividere riproduzioni in modo facile e veloce.

Mostra il supporto per l'API

Intendi utilizzare l'API Screen Wake Lock? Il tuo supporto pubblico aiuta Il team di Chrome assegna la priorità alle funzionalità e mostra ad altri fornitori di browser come è fondamentale supportarli.

Link utili

Ringraziamenti

Immagine hero di Kate Stone Matheson su Unsplash. Video su Task Manager per gentile concessione di Enrico Lim.