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

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

Thomas Steiner

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

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

Ubuntu Linux שמוצג בסטרימינג בכרטיסיית דפדפן ב-Chrome ל-macOS (עדיין לא פועל במצב מסך מלא).
הבעיה: שולחן עבודה מרוחק של 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() מקבלת מערך של קוד מפתח אחד או יותר לנעילה. אם לא יסופקו קודי מפתח, כל המפתחות יינעלו. רשימה של ערכי מפתח תקינים זמינה במפרט ערכים של קוד 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 ו-ג'יימי וולץ'. תמונה ראשית (Hero) של Ken Suarez ב-Unsplash.