Acquisisci le chiavi con l'API Keyboard Lock

Offrire un'esperienza immersiva a schermo intero per una serie di casi d'uso, tra cui siti web interattivi, giochi e streaming di desktop o applicazioni da remoto.

Thomas Steiner

Sempre più utenti trascorrono la maggior parte del tempo nel browser, quindi i siti web altamente interattivi, i giochi, lo streaming di desktop remoto e lo streaming di applicazioni si sforzano di offrire un'esperienza immersiva a schermo intero. Per farlo, i siti devono poter accedere a tasti speciali e scorciatoie da tastiera in modalità a schermo intero, in modo da poter essere utilizzati per la navigazione, i menu o i giochi. Alcuni esempi di tasti che potrebbero essere richiesti sono Esc, Alt + Tab, Cmd + ` e Ctrl + N.

Per impostazione predefinita, queste chiavi non sono disponibili per l'applicazione web perché vengono acquisite dal browser o dal sistema operativo sottostante. L'API Blocco tastiera consente ai siti web di utilizzare tutte le chiavi disponibili consentite dal sistema operativo host (vedi Compatibilità del browser).

Ubuntu Linux trasmesso in streaming in una scheda del browser in Chrome per macOS (non ancora in esecuzione in modalità a schermo intero).
Il problema: un desktop remoto Ubuntu Linux in streaming non in esecuzione in modalità a schermo intero e senza blocco tastiera attivo, quindi le chiavi di sistema vengono ancora acquisite dal sistema operativo host macOS e l'esperienza non è ancora immersiva.

Utilizzo dell'API Keyboard Lock

L'interfaccia Keyboard dell'API Keyboard fornisce funzioni che attivano/disattivano l'acquisizione delle pressioni dei tasti dalla tastiera fisica, nonché informazioni sul layout della tastiera dell'utente.

Prerequisito

Nei browser moderni sono disponibili due tipi di schermo intero: avviato da JavaScript tramite l'API Fullscreen e avviato dall'utente tramite una scorciatoia da tastiera. L'API Blocco tastiera è disponibile solo quando è attiva la modalità a schermo intero avviata da JavaScript. Ecco un esempio di schermo intero avviato da JavaScript:

await document.documentElement.requestFullscreen();

Rilevamento di funzionalità

Puoi utilizzare il seguente pattern per verificare se l'API Blocco tastiera è supportata:

if ('keyboard' in navigator && 'lock' in navigator.keyboard) {
  // Supported!
}

Bloccare la tastiera

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 è stato concesso l'accesso dal sistema operativo di base. Il metodo lock() accetta un array di uno o più codici chiave da bloccare. Se non vengono forniti codici chiave, tutte le chiavi verranno bloccate. Un elenco di valori di codice chiave validi è disponibile nella specifica Valori di codice KeyboardEvent per gli eventi UI.

Acquisisci tutte le chiavi

L'esempio seguente acquisisce tutte le pressioni dei tasti.

navigator.keyboard.lock();

Acquisizione di chiavi specifiche

L'esempio seguente acquisisce le chiavi W, A, S e D. Acquisisce questi tasti indipendentemente dai modificatori utilizzati con la pressione dei tasti. Supponendo un layout QWERTY statunitense, la registrazione di "KeyW" garantisce che W, Maiusc + W, Control + W, Control + Maiusc + W e tutte le altre combinazioni di tasti modificatori con W vengano inviate all'app. Lo stesso vale per "KeyA", "KeyS" e "KeyD".

await navigator.keyboard.lock([
  "KeyW",
  "KeyA",
  "KeyS",
  "KeyD",
]);

Puoi rispondere alle pressioni dei tasti acquisite utilizzando gli eventi della tastiera. Ad esempio, questo codice utilizza l'evento onkeydown:

document.addEventListener('keydown', (event) => {
  if ((event.code === 'KeyA') && !(event.ctrlKey || event.metaKey)) {
    // Do something when the 'A' key was pressed, but only
    // when not in combination with the command or control key.
  }
});

Sbloccare la tastiera

Il metodo unlock() sblocca tutte le chiavi acquisite dal metodo lock() e restituisce in modo sincrono.

navigator.keyboard.unlock();

Quando un documento viene chiuso, il browser chiama sempre in modo implicito unlock().

Demo

Puoi testare l'API Blocco tastiera eseguendo la demo su Glitch. Assicurati di controllare il codice sorgente. Se fai clic sul pulsante Passa a schermo intero di seguito, la demo verrà avviata in una nuova finestra in modo da poter passare alla modalità a schermo intero.

Considerazioni sulla sicurezza

Un problema con questa API è che potrebbe essere utilizzata per acquisire tutte le chiavi e (in combinazione con l'API Fullscreen e l'API PointerLock) impedire all'utente di uscire dalla pagina web. Per evitare ciò, la specifica richiede che il browser fornisca all'utente un modo per uscire dal blocco della tastiera anche se tutte le chiavi sono richieste dall'API. In Chrome, questa via di fuga è una pressione prolungata (due secondi) del tasto Esc per attivare l'uscita dalla Blocco tastiera.

Ringraziamenti

Questo articolo è stato esaminato da Joe Medley e Kayce Basques. La specifica della funzionalità Blocco tastiera è stata creata da Gary Kacmarcik e Jamie Walch. Immagine hero di Ken Suarez su Unsplash.