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

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

תמיכה ב-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. תודה לג'ו מדלי, Kayce Basques ו-Reilly Grant שהביקורות שלהם על המאמר הזה. התמונה הראשית (Hero) היא של Fernando Hernandez ב-Unsplash.