Acquisisci le chiavi con l'API Keyboard Lock

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

Thomas Steiner

Con un numero sempre maggiore di utenti che trascorrono la maggior parte del loro tempo nel browser, siti web altamente interattivi, giochi, streaming da desktop remoto e streaming di applicazioni si sforzano di offrire un'esperienza immersiva a schermo intero. A questo scopo, quando sono in modalità a schermo intero i siti devono accedere a tasti speciali e scorciatoie da tastiera per poter essere utilizzati per la navigazione, i menu o i giochi. Alcuni esempi di tasti che potrebbero essere necessari 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 Keyboard Lock consente ai siti web di utilizzare tutte le chiavi disponibili consentite dal sistema operativo host (consulta la sezione Compatibilità del browser).

Ubuntu Linux è trasmesso in streaming su una scheda del browser in macOS Chrome (non ancora in esecuzione in modalità a schermo intero).
Problema: un ambiente desktop remoto di Ubuntu Linux in streaming non è in esecuzione in modalità a schermo intero e senza blocco tastiera attivo, quindi le chiavi di sistema vengono comunque 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 consentono di attivare/disattivare l'acquisizione della pressione dei tasti dalla tastiera fisica e di ottenere informazioni sul layout da tastiera dell'utente.

Prerequisito

Sono disponibili due tipi di schermo intero nei browser moderni: con l'avvio JavaScript tramite l'API a schermo intero e con l'avvio dell'utente tramite una scorciatoia da tastiera. L'API Keyboard Lock è disponibile soltanto quando è attivo lo schermo intero avviato da JavaScript. Ecco un esempio di schermo intero avviato da JavaScript:

await document.documentElement.requestFullscreen();

Rilevamento delle funzionalità

Per verificare se l'API Keyboard Lock è supportata, puoi utilizzare il seguente pattern:

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

Bloccare la tastiera

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. Il metodo lock() richiede il blocco di un array di uno o più codici chiave. Se non vengono forniti codici, tutte le chiavi verranno bloccate. Un elenco di valori dei codici chiave validi è disponibile nella specifica Valori del codice evento della tastiera degli eventi UI.

Acquisizione di tutti i tasti in corso...

L'esempio seguente mostra tutte le pressioni dei tasti.

navigator.keyboard.lock();

Acquisizione di chiavi specifiche

L'esempio seguente illustra i tasti W, A, S e D. Cattura questi tasti a prescindere dai modificatori utilizzati con la pressione dei tasti. Supponendo un layout QWERTY USA, la registrazione di "KeyW" garantisce che W, Maiusc + W, Ctrl + W, Ctrl + Maiusc + W e tutte le altre combinazioni di tasti di modifica 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 acquisita utilizzando gli eventi da 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 tutte le chiavi acquisite 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 la demo su Glitch. Assicurati di controllare il codice sorgente. Se fai clic sul pulsante Attiva schermo intero di seguito, la demo viene avviata in una nuova finestra e viene attivata la modalità a schermo intero.

Considerazioni sulla sicurezza

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

Ringraziamenti

Questo articolo è stato recensito da Joe Medley e Kayce Basques. Le specifiche del blocco tastiera sono state create da Gary Kacmarcik e Jamie Walch. Immagine hero di Ken Suarez su Unsplash.