לכוד מפתחות באמצעות ממשק ה-API של נעילת המקלדת

חוויית שימוש immersive במסך מלא למגוון תרחישים לדוגמה, אתרים אינטראקטיביים, משחקים וסטרימינג של אפליקציות או של מחשבים מרוחקים.

Thomas Steiner

יותר ויותר משתמשים מבלים את רוב הזמן בדפדפן, ולכן אתרים אינטראקטיביים עשירים, משחקים, סטרימינג של מחשבים מרוחקים וסטרימינג של אפליקציות שואפים לספק חוויה מרתקת במסך מלא. כדי לעשות זאת, לאתרים צריכה להיות גישה למפתחות מיוחדים ולמקשי קיצור במצב מסך מלא, כדי שניתן יהיה להשתמש בהם לניווט, לתפריטים או למשחקים. דוגמאות למפתחות שעשויים להידרש: Esc,‏ Alt + Tab,‏ Cmd + ‎` ו-Ctrl + N.

כברירת מחדל, המפתחות האלה לא זמינים לאפליקציית האינטרנט כי הם מתועדים על ידי הדפדפן או מערכת ההפעלה הבסיסית. Keyboard Lock API מאפשר לאתרים להשתמש בכל המפתחות הזמינים שמותר להשתמש בהם במערכת ההפעלה המארחת (ראו תאימות לדפדפנים).

Ubuntu Linux שמוצג בסטרימינג בכרטיסיית דפדפן ב-Chrome ל-macOS (עדיין לא פועל במצב מסך מלא).
הבעיה: שולחן עבודה מרוחק של Ubuntu Linux בסטרימינג לא פועל במצב מסך מלא וללא נעילת מקלדת פעילה, כך שמפתחות המערכת עדיין מתועדים על ידי מערכת ההפעלה המארחת macOS והחוויה עדיין לא מוחלטת.

שימוש ב-Keyboard Lock API

הממשק Keyboard של Keyboard API מספק פונקציות שמאפשרות להפעיל או להשבית את הצילום של הקשות במקלדת הפיזית, וגם לקבל מידע על פריסת המקלדת של המשתמש.

דרישות מוקדמות

יש שני סוגים של מסך מלא שזמינים בדפדפנים מודרניים: מסך מלא שמופעל על ידי JavaScript דרך Fullscreen API ומסך מלא שמופעל על ידי המשתמש באמצעות מקש קיצור. ממשק ה-Keyboard Lock API זמין רק כשהאפשרות מסך מלא ביוזמת JavaScript פעילה. דוגמה למסך מלא שהופעל על ידי JavaScript:

await document.documentElement.requestFullscreen();

זיהוי תכונות

אפשר להשתמש בתבנית הבאה כדי לבדוק אם יש תמיכה ב-Keyboard Lock API:

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

נעילה של המקלדת

השיטה lock() בממשק Keyboard מחזירה הבטחה אחרי הפעלת הצילום של הקשות על כל המקשים או על חלק מהם במקלדת הפיזית. השיטה הזו יכולה לתעד רק מפתחות שקיבלו הרשאת גישה ממערכת ההפעלה הבסיסית. השיטה lock() מקבלת מערך של קוד מפתח אחד או יותר לנעילה. אם לא יסופקו קודי מפתח, כל המפתחות יינעלו. רשימה של ערכים חוקיים של קודי מפתח זמינה במפרט ערכים של קודי KeyboardEvent באירועי UI.

תיעוד כל המפתחות

בדוגמה הבאה מתועדים כל הקשות המפתחות.

navigator.keyboard.lock();

תיעוד מפתחות ספציפיים

בדוגמה הבאה מתועדים המפתחות W,‏ A,‏ S ו-D. הוא מתעד את המקשים האלה ללא קשר למקשות הצירוף שבהם נעשה שימוש בזמן הלחיצה. בהנחה שהמקלדת מוגדרת לסידור QWERTY בארה"ב, ההרשמה של "KeyW" מבטיחה שהמקשים W,‏ Shift + W,‏ Control + W,‏ Control + Shift + W וכל שילובי המקש האחרים עם W יישלחו לאפליקציה. אותו הדבר חל על "KeyA",‏ "KeyS" ו-"KeyD".

await navigator.keyboard.lock([
  "KeyW",
  "KeyA",
  "KeyS",
  "KeyD",
]);

אפשר להגיב ללחיצות על מקשים שתועדו באמצעות אירועי מקלדת. לדוגמה, הקוד הזה משתמש באירוע 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.
  }
});

ביטול הנעילה של המקלדת

השיטה unlock() פותחת את כל המפתחות שנתפסים על ידי השיטה lock() ומחזירה אותם באופן סינכרוני.

navigator.keyboard.unlock();

כשמסמך נסגר, הדפדפן תמיד קורא באופן משתמע ל-unlock().

הדגמה (דמו)

כדי לבדוק את Keyboard Lock API, אפשר להריץ את הדמו ב-Glitch. חשוב לבדוק את קוד המקור. לחיצה על הלחצן 'מעבר למסך מלא' שבהמשך תפעיל את הדמו בחלון חדש כדי שיהיה אפשר להציג אותו במסך מלא.

שיקולי אבטחה

אחת מהבעיות של ממשק ה-API הזה היא שאפשר להשתמש בו כדי לקבל גישה לכל המקשים, וכך (בשילוב עם Fullscreen API ו-PointerLock API) למנוע מהמשתמש לצאת מדף האינטרנט. כדי למנוע זאת, במפרט נדרש שהדפדפן יספק למשתמש דרך לצאת מהנעילה של המקלדת גם אם כל המפתחות נדרשים על ידי ה-API. ב-Chrome, פתח המילוט הזה הוא לחיצה ארוכה (שתי שניות) על מקש Esc כדי להפעיל יציאה מהנעילה של המקלדת.

תודות

המאמר הזה נבדק על ידי Joe Medley ו-Kayce Basques. Gary Kacmarcik ו-Jamie Walch הם מחברי המפרט של נעילת המקלדת. תמונה ראשית (Hero) של Ken Suarez ב-Unsplash.