Acquisisci le chiavi con l'API Keyboard Lock

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

Thomas Steiner

Con un numero sempre maggiore di utenti che trascorrono la maggior parte del tempo sul browser, siti web, giochi, streaming di desktop remoti e streaming di applicazioni altamente interattivi cercano di offrire un'esperienza immersiva e a schermo intero. A questo scopo, i siti devono poter accedere a tasti e scorciatoie da tastiera speciali quando sono in modalità a schermo intero, in modo da poter essere utilizzati per la navigazione, i menu o il gioco. 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 Keyboard Lock 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 macOS Chrome (non ancora in esecuzione in modalità a schermo intero).
. Il problema: un desktop remoto di Ubuntu Linux trasmesso in streaming non in esecuzione in modalità a schermo intero e senza blocco della 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 offre funzioni che consentono di attivare/disattivare l'acquisizione dei tasti premuti dalla tastiera fisica e di ottenere informazioni sul layout della tastiera dell'utente.

Prerequisito

Nei browser moderni sono disponibili due tipi di schermo intero: quelli avviati tramite JavaScript tramite l'API Fullscreen e quelli avviati dall'utente tramite una scorciatoia da tastiera. L'API Keyboard Lock è disponibile solo quando è attivo lo schermo intero avviato da JavaScript. Ecco un esempio di modalità a schermo intero avviata 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 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 è consentito l'accesso dal sistema operativo sottostante. Il metodo lock() richiede un array di uno o più codici chiave per il blocco. Se non fornisci alcun codice, tutte le chiavi verranno bloccate. Un elenco di valori di codice chiave validi è disponibile nella specifica Valori del codice KeyboardEvent degli eventi UI.

Acquisizione di tutte le chiavi

L'esempio seguente illustra tutte le pressioni dei tasti.

navigator.keyboard.lock();

Acquisizione di chiavi specifiche

L'esempio seguente acquisisce i tasti W, A, S e D. Acquisisce questi tasti indipendentemente dal tasto di modifica utilizzato con la pressione del tasto. Presumendo un layout QWERTY statunitense, la registrazione di "KeyW" assicura 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 alle pressioni dei tasti rilevate 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 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 Inserisci schermo intero di seguito, la demo viene avviata in una nuova finestra in modo da poter attivare la modalità a schermo intero.

Considerazioni sulla sicurezza

Un problema di 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 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 alternativa è una pressione prolungata del tasto Esc (due secondi) per attivare un'uscita dal blocco della tastiera.

Ringraziamenti

Questo articolo è stato esaminato da Joe Medley e Kayce Basques. La specifica relativa al blocco della tastiera è stata redatta da Gary Kacmarcik e Jamie Walch. Immagine hero di Ken Suarez su Unsplash.