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

אפשר להשתמש ב-Idle Detection API כדי לדעת מתי המשתמש לא משתמש במכשיר באופן פעיל.

Thomas Steiner

מה זה Idle Detection API?

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

תרחישים לדוגמה לשימוש ב-Idle Detection API

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

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

הסטטוס הנוכחי

שלב סטטוס
1. יצירת הסבר הושלם
2. יצירת טיוטה ראשונית של המפרט הושלם
3. איסוף משוב וביצוע שינויים בעיצוב בתהליך
4. גרסת מקור לניסיון הושלם
5. השקה Chromium 94

איך משתמשים ב-Idle Detection API

זיהוי תכונות

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

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

מושגים של Idle Detection API

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

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

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

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

שימוש ב-Idle Detection API

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

// 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 אלפיות השנייה (דקה אחת). כדי להתחיל את זיהוי המצב הלא פעיל, צריך להפעיל את השיטה start() של IdleDetector. כפרמטרים, צריך להעביר אובייקט עם הערך הרצוי של threshold במצב חוסר פעילות (idle) במילישניות, ואובייקט אופציונלי של 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);
}

אפשר לבטל את זיהוי המצב הלא פעיל על ידי קריאה לשיטה abort() של AbortController.

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

תמיכה ב-DevTools

החל מגרסה 94 של Chromium, אפשר להדמיע אירועי חוסר פעילות בכלים למפתחים בלי להיות בסטטוס חוסר פעילות בפועל. פותחים את הכרטיסייה Sensors (חיישנים) בכלי הפיתוח ומחפשים את האפשרות Emulate Idle Detector state (הדמיה של מצב לא פעיל של גלאי). אפשר לראות את האפשרויות השונות בסרטון שבהמשך.

אמולציה של מצב לא פעיל של גלאי ב-DevTools.

תמיכה ב-Puppeteer

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

הדגמה (דמו)

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

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

השלמה של תכונות חסרות (polyfilling)

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

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

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

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

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

משוב

צוות Chrome רוצה לשמוע על החוויה שלכם עם Idle Detection API.

תיאור של עיצוב ה-API

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

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

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

תמיכה ב-API

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

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

תודות

Sam Goto הטמיע את Idle Detection API. התמיכה בכלי הפיתוח נוספה על ידי Maksim Sadym. תודה ל-Joe Medley, ל-Kayce Basques ול-Reilly Grant על הביקורות שלהם על המאמר הזה. התמונה הראשית (Hero) היא של Fernando Hernandez ב-Unsplash.