זיהוי משתמשים לא פעילים באמצעות Idle Detection API

Thomas Steiner

תאריך פרסום: 18 במאי 2020

Browser Support

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

תרחישי שימוש מומלצים ב-Idle Detection API

דוגמאות לאתרים שעשויים להשתמש ב-API הזה:

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

שימוש ב-API

כדי לבדוק אם יש תמיכה ב-Idle Detection API, משתמשים בפקודה:

if ('IdleDetector' in window) {
  // Idle Detector API supported
}

מושגים שקשורים ל-API

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

מצב חוסר הפעילות של המשתמש: ‫active או idle: המשתמש קיים אינטראקציה עם סוכן המשתמש או לא קיים איתו אינטראקציה במשך תקופה מסוימת.
מצב המסך כשהוא לא פעיל: ‫locked או unlocked: במערכת יש נעילת מסך פעילה (כמו שומר מסך) שמונעת אינטראקציה עם סוכן המשתמש.

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

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

בקשת הרשאות והפעלת מופע

השלב הראשון בשימוש ב-Idle Detection API הוא לוודא שההרשאה 'idle-detection' ניתנה. אם ההרשאה לא ניתנה, צריך לבקש אותה באמצעות IdleDetector.requestPermission(). שימו לב: כדי להפעיל את השיטה הזו נדרשת פעולת משתמש.

// Make sure 'idle-detection' permission is granted.
const state = await IdleDetector.requestPermission();
if (state !== 'granted') {
  // Need to request permission first.
  return console.log('Idle detection permission not granted.');
}

השלב השני הוא יצירת מופע של IdleDetector. הערך המינימלי של threshold הוא 60,000 אלפיות השנייה (דקה אחת). לבסוף, אפשר להפעיל את זיהוי חוסר הפעילות על ידי קריאה לשיטה IdleDetector של start(). הפונקציה מקבלת אובייקט עם זמן ההמתנה threshold במילישניות ופרמטר אופציונלי signal עם AbortSignal כדי לבטל את זיהוי ההמתנה.

try {
  const controller = new AbortController();
  const signal = controller.signal;

  const idleDetector = new IdleDetector();
  idleDetector.addEventListener('change', () => {
    const userState = idleDetector.userState;
    const screenState = idleDetector.screenState;
    console.log(`Idle change: ${userState}, ${screenState}.`);
  });

  await idleDetector.start({
    threshold: 60000,
    signal,
  });
  console.log('IdleDetector is active.');
} catch (err) {
  // Deal with initialization errors like permission denied,
  // running outside of top-level frame, etc.
  console.error(err.name, err.message);
}

הפסקת זיהוי מצב חוסר פעילות

כדי לבטל את זיהוי חוסר הפעילות, מפעילים את השיטה AbortController של abort().

controller.abort();
console.log('IdleDetector is stopped.');

תמיכה בכלי הפיתוח

אתם יכולים להפעיל הדמיה של אירועים של חוסר פעילות בכלי הפיתוח, בלי להיות לא פעילים בפועל. בכלי הפיתוח, פותחים את הכרטיסייה Sensors ומחפשים את האפשרות Emulate Idle Detector state. אפשר לראות את האפשרויות השונות בסרטון.

אמולציה של מצב לא פעיל של גלאי בכלי הפיתוח.

תמיכה ב-Puppeteer

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

הדגמה (דמו)

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

הדגמה של קנבס זמני

פוליפיל

יש היבטים מסוימים של Idle Detection API שאפשר להשתמש בהם ב-polyfill, ויש ספריות לזיהוי מצב לא פעיל כמו idle.ts, אבל הגישות האלה מוגבלות לאזור התוכן של אפליקציית האינטרנט: הספריה שפועלת בהקשר של אפליקציית האינטרנט צריכה לבצע סקר יקר של אירועי קלט או להאזין לשינויים בנראות. עם זאת, באופן מגביל יותר, ספריות לא יכולות לדעת היום מתי משתמש לא פעיל מחוץ לאזור התוכן שלה (למשל, כשהמשתמש נמצא בכרטיסייה אחרת או כשהוא יצא מהחשבון במחשב שלו לחלוטין).

אבטחה והרשאות

צוות Chrome תכנן והטמיע את Idle Detection API (ממשק API לזיהוי חוסר פעילות) בהתאם לעקרונות הליבה שמוגדרים במאמר שליטה בגישה לתכונות עוצמתיות של פלטפורמת האינטרנט, כולל שליטה של המשתמש, שקיפות וארגונומיה. היכולת להשתמש ב-API הזה נשלטת על ידי ההרשאה 'idle-detection'. כדי להשתמש ב-API, האפליקציה צריכה לפעול גם בהקשר מאובטח ברמה העליונה.

פרטיות ובקרה של משתמשים

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

משוב

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

דיווח על בעיה בהטמעה

מצאתם באג בהטמעה של Chrome? או שההטמעה שונה מהמפרט? מדווחים על הבאג בכתובת new.crbug.com. חשוב לכלול כמה שיותר פרטים, הוראות פשוטות לשחזור הבאג ומזינים Blink>Input בתיבה Components.

תמיכה ב-API

האם אתם מתכננים להשתמש ב-Idle Detection API? התמיכה הציבורית שלכם עוזרת לצוות Chrome לתת עדיפות לתכונות, ומראה לספקי דפדפנים אחרים עד כמה חשוב לתמוך בהן.

אפשר לשתף את התוכניות שלכם לשימוש ב-WICG Discourse thread.
אתם יכולים לשלוח ציוץ אל @ChromiumDev עם ההאשטאג #IdleDetection ולספר לנו איפה ואיך אתם משתמשים בו.

קישורים שימושיים

תודות

‫Idle Detection API הוטמע על ידי Sam Goto. התמיכה בכלי הפיתוח נוספה על ידי Maksim Sadym. תודה לג'ו מדלי, לקייסי באסקס ולריילי גרנט על הביקורות שלהם.