Melhora no modo de tela cheia com a API Keyboard Lock

Use a API Keyboard Lock para capturar a tecla Esc no modo de tela cheia.

Thomas Steiner

Se você já jogou um jogo da Web em tela cheia que exibia uma caixa de diálogo que foi cancelada instintivamente com a tecla Escape, provavelmente você saiu do modo de tela cheia. Essa experiência frustrante é causada pelo fato de que a caixa de diálogo e o modo de tela cheia "lutam" pela tecla Escape. É uma batalha desigual porque, por padrão, o modo de tela cheia sempre vence. Mas como fazer com que a caixa de diálogo seja a vencedora da chave Escape? É aqui que a API Keyboard Lock entra em cena.

Suporte ao navegador

Como usar a API Keyboard Lock

A API Keyboard Lock está disponível no navigator.keyboard.. O método lock() da interface Keyboard retorna uma promessa depois de ativar a captura de pressionamentos de tecla para uma ou todas as teclas no teclado físico. Esse método só pode capturar chaves com acesso concedida pelo sistema operacional. Felizmente, a tecla Escape é uma delas.

Se o app tiver um modo de tela cheia, use a API Keyboard Lock como uma melhoria progressiva capturando a tecla Escape ao solicitar a tela cheia. Desbloqueie (ou seja, não capture mais) o teclado ao sair do modo de tela cheia com o método unlock() da interface 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.');
  });
}

Isso significa que, quando o usuário está no modo de tela cheia, pressione Esc para cancelar a caixa de diálogo por padrão. Se o usuário tocar e manter pressionada a tecla Esc, ele ainda poderá sair do modo de tela cheia. O melhor dos dois mundos.

Demonstração

Você pode testar as variantes padrão e progressivamente aprimoradas na demonstração. O código-fonte da demonstração é menos limpo do que o snippet acima, porque ele precisa mostrar os dois comportamentos.

Na prática

Para usar esse aprimoramento progressivo na prática, basta copiar o snippet acima. Ele foi projetado para funcionar sem mudanças necessárias, mesmo com o código de tela integrada existente. Como exemplo, consulte este PR do jogo Freeciv (link em inglês). Depois que o PR for integrado, você pode cancelar todas as caixas de diálogo no jogo pressionando Esc.

Um favorito extra

Nem todos os apps ou jogos que oferecem suporte ao modo de tela cheia têm código aberto ou aceitam seus patches. O seguinte bookmarklet pode ser adicionado à barra de favoritos e clicado para ativar o melhor modo de tela cheia.