Mode layar penuh yang lebih baik dengan Keyboard Lock API

Gunakan Keyboard Lock API untuk merekam tombol Escape dalam mode layar penuh.

Thomas Steiner

Jika Anda pernah memainkan game web layar penuh yang memunculkan dialog dalam game yang secara otomatis Anda batalkan dengan tombol Escape, Anda mungkin akan dikeluarkan dari mode layar penuh. Pengalaman menjengkelkan ini disebabkan oleh dialog dan mode layar penuh yang "berlawanan" untuk tombol Escape. Pertempuran ini tidak seimbang karena, secara default, mode layar penuh selalu menang. Namun, bagaimana cara menjadikan dialog tersebut sebagai pemenang untuk tombol Escape? Di sinilah Keyboard Lock API berperan.

Dukungan browser

Menggunakan Keyboard Lock API

Keyboard Lock API tersedia di navigator.keyboard. Metode lock() dari antarmuka Keyboard menampilkan promise setelah mengaktifkan perekaman penekanan tombol untuk salah satu atau semua tombol di keyboard fisik. Metode ini hanya bisa menangkap kunci yang diberi akses oleh sistem operasi yang mendasarinya. Untungnya, tombol Escape adalah salah satunya.

Jika aplikasi Anda memiliki mode layar penuh, gunakan Keyboard Lock API sebagai peningkatan progresif dengan mengambil tombol Escape saat meminta layar penuh. Buka kunci (yaitu, tidak lagi merekam) keyboard saat keluar dari mode layar penuh menggunakan metode unlock() dari antarmuka 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.');
  });
}

Hal ini berarti bahwa saat pengguna berada dalam mode layar penuh, menekan Escape akan membatalkan dialog secara default. Jika menekan dan menahan tombol Escape, pengguna masih dapat keluar dari mode layar penuh. Yang terbaik dari keduanya.

Demo

Anda dapat menguji varian default dan varian yang ditingkatkan secara bertahap di demo. Kode sumber demo kurang rapi dibandingkan cuplikan sebelumnya, karena perlu menampilkan kedua perilaku tersebut.

Dalam praktik

Untuk menggunakan progressive enhancement ini dalam praktik, cukup salin cuplikan sebelumnya. Fitur ini dirancang agar berfungsi tanpa perubahan yang diperlukan, bahkan dengan kode layar penuh yang sudah ada. Sebagai contoh, lihat PR ini untuk game Freeciv. Setelah PR digabungkan, Anda dapat membatalkan semua dialog dalam game dengan menekan Escape.

Bonus bookmarklet

Tidak semua aplikasi atau game yang mendukung mode layar penuh akan menjadi open source atau menerima patch, bookmarklet berikut dapat ditambahkan ke panel bookmark dan diklik untuk mengaktifkan mode layar penuh yang lebih baik.