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 ti è capitato di usare un gioco web a schermo intero da cui è stata visualizzata una finestra di dialogo in-game che hai istintivamente annullato con il tasto Esc, probabilmente sei stato espulso dalla modalità a schermo intero. Questa esperienza frustrante è causata dal fatto che la finestra di dialogo e la modalità a schermo intero "si scontrano" per il tasto Esc. È una battaglia impari perché, per impostazione predefinita, vinca sempre la modalità a schermo intero. Ma come fare per rendere la finestra di dialogo migliore per il tasto Esc? È qui che entra in gioco l'API Keyboard Lock.

Supporto del browser

Utilizzo dell'API Keyboard Lock

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

Se la tua app dispone di una modalità a schermo intero, usa l'API Keyboard Lock come miglioramento progressivo acquisendo il tasto Esc quando richiedi lo schermo intero. Sblocca (ovvero, non acquisire più) la tastiera quando esci dalla modalità a schermo intero tramite il metodo unlock() dell'interfaccia di 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, premendo Esc puoi annullare la finestra di dialogo per impostazione predefinita. Se l'utente preme e tiene premuto il tasto Esc, può comunque uscire dalla modalità a schermo intero. Il meglio delle due piattaforme.

Demo

Puoi testare sia la variante predefinita sia quella avanzata progressivamente nella demo. Il codice sorgente della demo è meno chiaro rispetto allo snippet riportato sopra, perché deve mostrare entrambi i comportamenti.

In pratica

Per utilizzare nella pratica questo miglioramento progressivo, copia lo snippet qui sopra. È progettato per funzionare senza dover apportare modifiche, anche con il codice a schermo intero esistente. Vediamo ad esempio questo PR per il gioco Freeciv. Dopo aver unito le PR, puoi annullare tutte le finestre di dialogo in-game premendo Esc.

Un segnalibro aggiuntivo

Non tutte le app o i giochi che supportano la modalità a schermo intero saranno open source o accettano le patch. Puoi aggiungere il seguente bookmarklet alla barra dei Preferiti e fare clic per attivare una modalità a schermo intero migliore.