Modalità a schermo intero migliorata con l'API Keyboard Lock

Utilizza l'API Keyboard Lock per acquisire il tasto Esc in modalità a schermo intero.

Thomas Steiner

Se hai mai giocato a un gioco web a schermo intero che ha visualizzato una finestra di dialogo in-game che hai annullato istintivamente con il tasto Esc, probabilmente ti sei ritrovato fuori dalla modalità a schermo intero. Questa esperienza frustrante è causata dal fatto che la modalità finestra di dialogo e schermo intero "si contendono" il tasto Esc. È una battaglia impari perché, per impostazione predefinita, la modalità a schermo intero vince sempre. Ma come puoi fare in modo che la finestra di dialogo sia la vincitrice per il tasto Esc? È qui che entra in gioco l'API Keyboard Lock.

Supporto browser

Utilizzare l'API Keyboard Lock

L'API Keyboard Lock è disponibile su navigator.keyboard.. Il metodo lock() dell'interfaccia Keyboard restituisce una promessa dopo aver attivato l'acquisizione delle pressioni dei tasti per uno o tutti i tasti della tastiera fisica. Questo metodo può acquisire solo le chiavi a cui viene concesso l'accesso dal sistema operativo sottostante. Fortunatamente, il tasto Esc è uno di questi.

Se la tua app ha una modalità a schermo intero, utilizza l'API Keyboard Lock come miglioramento progressivo acquisendo il tasto Esc quando richiedi la modalità a schermo intero. Sblocca (ovvero non acquisire più) la tastiera quando esci dalla modalità a schermo intero utilizzando il metodo unlock() dell'interfaccia Keyboard.

// Feature detection.
const supportsKeyboardLock =
    ('keyboard' in navigator) && ('lock' in navigator.keyboard);

if (supportsKeyboardLock) {
  document.addEventListener('fullscreenchange', async () => {
    if (document.fullscreenElement) {
      // The magic happens here… 🦄
      await navigator.keyboard.lock(['Escape']);
      console.log('Keyboard locked.');
      return;
    }
    navigator.keyboard.unlock();
    console.log('Keyboard unlocked.');
  });
}

Ciò significa che quando l'utente è in modalità a schermo intero, la pressione del tasto Esci annulla la finestra di dialogo per impostazione predefinita. Se l'utente preme e tiene premuto il tasto Esci, può comunque uscire dalla modalità a schermo intero. Il meglio di entrambi i mondi.

Demo

Puoi testare sia la variante predefinita sia quella con miglioramento progressivo nella demo. Il codice sorgente della demo è meno pulito dello snippet precedente perché deve mostrare entrambi i comportamenti.

In pratica

Per utilizzare questo miglioramento progressivo in pratica, copia lo snippet precedente. È progettato per funzionare senza modifiche richieste, anche con il codice a schermo intero esistente. Ad esempio, vedi questa PR per il gioco Freeciv. Una volta unita la richiesta pull, puoi annullare tutte le finestre di dialogo in-game premendo Esc.

Un bookmarklet bonus

Non tutte le app o i giochi che supportano la modalità a schermo intero saranno open source o accetteranno le tue patch. Il seguente bookmarklet può essere aggiunto alla barra dei preferiti e cliccato per attivare una migliore modalità a schermo intero.