Acquisisci le chiavi con l'API Keyboard Lock

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

Thomas Steiner

Con un numero sempre maggiore di utenti che trascorrono la maggior parte del tempo nel browser, 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 accedere a tasti speciali e scorciatoie da tastiera mentre sono in modalità a schermo intero, in modo che possano 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, questi tasti non sono disponibili per l'applicazione web perché vengono acquisiti dal browser o dal sistema operativo sottostante. L'API Keyboard Lock consente ai siti web di utilizzare tutti i tasti disponibili consentiti dal sistema operativo host (vedi Compatibilità del browser).

Ubuntu Linux trasmesso in streaming a una scheda del browser in Chrome per macOS (non ancora in modalità a schermo intero).
Il problema: un desktop remoto Ubuntu Linux in streaming non in modalità a schermo intero e senza blocco della tastiera attivo, quindi i tasti di sistema vengono ancora acquisiti 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 della pressione dei tasti dalla tastiera fisica, nonché informazioni sul layout di 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 Keyboard Lock è 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 delle caratteristiche

Puoi utilizzare il seguente pattern per verificare se l'API Keyboard Lock è supportata:

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

Blocco della tastiera

Il metodo lock() dell'interfaccia Keyboard restituisce una promise dopo aver attivato l'acquisizione della pressione di uno o tutti i tasti della tastiera fisica. Questo metodo può acquisire solo i tasti a cui è stato concesso l'accesso dal sistema operativo sottostante. Il metodo lock() accetta un array di uno o più codici chiave da bloccare. Se non vengono forniti codici chiave, verranno bloccate tutte le chiavi. Un elenco di valori di codici tasto validi è disponibile nella specifica UI Events KeyboardEvent code Values.

Acquisizione di tutti i tasti

L'esempio seguente acquisisce tutte le pressioni dei tasti.

navigator.keyboard.lock();

Acquisizione di tasti specifici

L'esempio seguente acquisisce i tasti W, A, S e D. Acquisisce questi tasti indipendentemente dai modificatori utilizzati con la pressione del tasto. Supponendo un layout QWERTY statunitense, la registrazione di "KeyW" garantisce che W, Maiusc + W, Ctrl + W, Ctrl + 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 alla pressione dei tasti acquisiti 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.
  }
});

Sblocco della tastiera

Il metodo unlock() sblocca tutti i tasti acquisiti dal metodo lock() e restituisce in modo sincrono.

navigator.keyboard.unlock();

Quando un documento viene chiuso, il browser chiama sempre implicitamente unlock().

Demo

Puoi testare l'API Keyboard Lock eseguendo questa demo. Assicurati di controllare il codice sorgente. Se fai clic sul pulsante Entra in modalità a schermo intero di seguito, la demo viene avviata in una nuova finestra in modo che possa entrare in modalità a schermo intero.

Considerazioni sulla sicurezza

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

Ringraziamenti

Questo articolo è stato rivisto da Joe Medley e Kayce Basques. La specifica Keyboard Lock è stata creata da Gary Kacmarcik e Jamie Walch.