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

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

Thomas Steiner

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

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

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

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

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

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

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

await document.documentElement.requestFullscreen();

זיהוי תכונות

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

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

נעילת המקלדת

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

מתבצע תיעוד של כל המקשים

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

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() באופן מרומז.

הדגמה (דמו)

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

שיקולי אבטחה

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

אישורים

המאמר הזה נבדק על ידי ג'ו מדלי וקייס בסקי. המפרט של נעילת המקלדת נכתב על ידי Gary Kacmarcik ו-ג'יימי וולץ'. התמונה הראשית (Hero) של קן סוארז במשחק Un אימייל.