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

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

Thomas Steiner

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

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

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

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

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

ידע מוקדם שנדרש לקורס

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

await document.documentElement.requestFullscreen();

זיהוי תכונות

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

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

נעילת המקלדת

השיטה lock() בממשק Keyboard מחזירה הבטחה אחרי הפעלת התיעוד של לחיצות המקשים באחד או יותר מהמקשים במקלדת הפיזית. שיטה זו יכולה לתעד רק מפתחות שקיבלו גישה על ידי מערכת ההפעלה הבסיסית. השיטה lock() מקבלת מערך של קוד מפתח אחד או יותר לנעילה. אם לא יסופקו קודי מפתח, כל המפתחות יינעלו. במפרט ערכי קוד של לוח שידורים ב-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() באופן מרומז.

הדגמה (דמו)

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

שיקולי אבטחה

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

אישורים

המאמר הזה נכתב על ידי Joe Medley ו-Kayce Basques. מפרט נעילת המקלדת נכתב על ידי Gary Kacmarcik ו-Jamie Walch. תמונה ראשית (Hero) של קן סוארז בערוץ UnFlood.