کاربران غیرفعال را با Idle Detection API شناسایی کنید

از Idle Detection API استفاده کنید تا متوجه شوید کاربر به طور فعال از دستگاه خود استفاده نمی کند.

توماس اشتاینر

Idle Detection API چیست؟

Idle Detection API زمانی که کاربر بیکار است به توسعه دهندگان اطلاع می دهد و مواردی مانند عدم تعامل با صفحه کلید، ماوس، صفحه نمایش، فعال شدن محافظ صفحه نمایش، قفل شدن صفحه یا حرکت به صفحه دیگری را نشان می دهد. یک آستانه تعریف شده توسط توسعه دهنده اعلان را راه اندازی می کند.

موارد استفاده پیشنهادی برای Idle Detection API

نمونه هایی از سایت هایی که ممکن است از این API استفاده کنند عبارتند از:

  • برنامه‌های چت یا سایت‌های شبکه اجتماعی آنلاین می‌توانند از این API استفاده کنند تا به کاربر اطلاع دهند که آیا مخاطبینش در حال حاضر قابل دسترسی هستند یا خیر.
  • برنامه‌های کیوسک که در معرض عموم قرار دارند، برای مثال در موزه‌ها، می‌توانند از این API برای بازگشت به نمای «خانه» استفاده کنند، اگر کسی دیگر با کیوسک تعامل نداشته باشد.
  • برنامه هایی که به محاسبات گران قیمت نیاز دارند، به عنوان مثال برای ترسیم نمودار، می توانند این محاسبات را به لحظاتی محدود کنند که کاربر با دستگاه خود تعامل دارد.

وضعیت فعلی

مرحله وضعیت
1. توضیح دهنده ایجاد کنید کامل
2. پیش نویس اولیه مشخصات را ایجاد کنید کامل
3. جمع آوری بازخورد و تکرار در طراحی در حال انجام است
4. آزمایش مبدا تکمیل شد
5. راه اندازی کنید کروم 94

نحوه استفاده از Idle Detection API

تشخیص ویژگی

برای بررسی اینکه آیا Idle Detection API پشتیبانی می‌شود، از موارد زیر استفاده کنید:

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

مفاهیم API شناسایی بیکار

Idle Detection API فرض می کند که سطحی از تعامل بین کاربر، عامل کاربر (یعنی مرورگر) و سیستم عامل دستگاه در حال استفاده وجود دارد. این در دو بعد نشان داده شده است:

  • حالت بیکار کاربر: active یا idle : کاربر برای مدتی با عامل کاربر تعامل داشته یا نداشته است.
  • حالت بیکار صفحه: locked یا unlocked : سیستم دارای یک قفل صفحه فعال (مانند محافظ صفحه) است که از تعامل با عامل کاربر جلوگیری می کند.

تشخیص active از idle به اکتشافی نیاز دارد که ممکن است در بین کاربر، عامل کاربر و سیستم عامل متفاوت باشد. همچنین باید یک آستانه نسبتاً درشت باشد (به امنیت و مجوزها مراجعه کنید).

این مدل به طور رسمی بین تعامل با محتوای خاص (یعنی صفحه وب در یک برگه با استفاده از API)، عامل کاربر به عنوان یک کل یا سیستم عامل تمایز قائل نمی شود. این تعریف به عامل کاربر واگذار شده است.

با استفاده از Idle Detection 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 60000 میلی ثانیه (1 دقیقه) است. در نهایت می توانید با فراخوانی متد start() IdleDetector تشخیص بیکاری را شروع کنید. یک شی با 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);
}

شما می توانید با فراخوانی متد abort() ' AbortController تشخیص بیکاری را لغو کنید.

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

پشتیبانی DevTools

با شروع Chromium 94، می‌توانید رویدادهای غیرفعال را در DevTools بدون اینکه واقعاً بی‌حرکت باشید شبیه‌سازی کنید . در DevTools، برگه Sensors را باز کنید و به دنبال حالت شبیه‌سازی Idle Detector بگردید. در ویدیوی زیر می توانید گزینه های مختلف را مشاهده کنید.

شبیه سازی وضعیت آشکارساز بیکار در DevTools.

پشتیبانی از عروسک گردان

از نسخه 5.3.1 Puppeteer، می‌توانید حالت‌های غیرفعال مختلف را شبیه‌سازی کنید تا به صورت برنامه‌نویسی نحوه تغییر رفتار برنامه وب خود را آزمایش کنید.

نسخه ی نمایشی

می‌توانید Idle Detection API را با نسخه نمایشی Ephemeral Canvas که پس از 60 ثانیه عدم فعالیت محتویات آن را پاک می‌کند، مشاهده کنید. می توانید تصور کنید که این در یک فروشگاه بزرگ برای بچه ها به کار گرفته شود تا روی آن دودل کنند.

نسخه ی نمایشی Canvas Ephemeral

پلی پر کردن

برخی از جنبه‌های Idle Detection API قابل پرکردن هستند و کتابخانه‌های تشخیص بی‌حرکتی مانند idle.ts وجود دارند، اما این رویکردها محدود به حوزه محتوای خود برنامه وب هستند: کتابخانه‌ای که در زمینه برنامه وب اجرا می‌شود باید برای رویدادهای ورودی یا نظرسنجی گران‌قیمتی انجام دهد. به تغییرات دید گوش دهید با این حال، به طور محدودتر، امروزه کتابخانه ها نمی توانند تشخیص دهند که کاربر در خارج از محدوده محتوای خود بیکار می شود (مثلاً وقتی کاربر در یک برگه متفاوت است یا کلاً از رایانه خود خارج شده است).

امنیت و مجوزها

تیم Chrome با استفاده از اصول اصلی تعریف شده در کنترل دسترسی به ویژگی‌های قدرتمند پلتفرم وب ، از جمله کنترل کاربر، شفافیت و ارگونومی، Idle Detection API را طراحی و پیاده‌سازی کرده است. توانایی استفاده از این API توسط مجوز 'idle-detection' کنترل می شود. برای استفاده از API، یک برنامه همچنین باید در یک زمینه امن سطح بالا اجرا شود.

کنترل کاربر و حفظ حریم خصوصی

ما همیشه می خواهیم از سوء استفاده عوامل مخرب از API های جدید جلوگیری کنیم. وب‌سایت‌های به ظاهر مستقل، اما در واقع توسط یک نهاد کنترل می‌شوند، ممکن است اطلاعات بی‌حرکتی کاربر را به دست آورند و داده‌ها را برای شناسایی کاربران منحصربه‌فرد در سرتاسر مبدا مرتبط کنند. برای کاهش این نوع حملات، Idle Detection API جزئیات رویدادهای بیکار گزارش شده را محدود می کند.

بازخورد

تیم Chrome می‌خواهد درباره تجربیات شما با Idle Detection API بشنود.

در مورد طراحی API به ما بگویید

آیا چیزی در مورد API وجود دارد که آنطور که انتظار داشتید کار نمی کند؟ یا آیا روش ها یا ویژگی هایی وجود دارد که برای اجرای ایده خود به آنها نیاز دارید؟ سوال یا نظری در مورد مدل امنیتی دارید؟ یک مشکل مشخصات را در مخزن GitHub مربوطه ثبت کنید یا افکار خود را به یک مشکل موجود اضافه کنید.

گزارش مشکل در اجرا

آیا اشکالی در پیاده سازی کروم پیدا کردید؟ یا اجرا با مشخصات متفاوت است؟ یک اشکال را در new.crbug.com ثبت کنید. مطمئن شوید که تا جایی که می توانید جزئیات، دستورالعمل های ساده برای بازتولید را وارد کنید و Blink>Input در کادر Components وارد کنید. Glitch برای به اشتراک گذاری سریع و آسان تکرارها عالی عمل می کند.

پشتیبانی از API را نشان دهید

آیا قصد دارید از Idle Detection API استفاده کنید؟ پشتیبانی عمومی شما به تیم Chrome کمک می‌کند ویژگی‌ها را اولویت‌بندی کند و به سایر فروشندگان مرورگر نشان می‌دهد که چقدر حمایت از آنها ضروری است.

  • نحوه استفاده از آن را در موضوع WICG Discourse به اشتراک بگذارید.
  • با استفاده از هشتگ #IdleDetection یک توییت به ChromiumDev@ ارسال کنید و به ما اطلاع دهید کجا و چگونه از آن استفاده می‌کنید.

لینک های مفید

قدردانی ها

Idle Detection API توسط Sam Goto پیاده سازی شد. پشتیبانی DevTools توسط Maksim Sadym اضافه شد. با تشکر از جو مدلی ، کیس باسک ، و ریلی گرانت برای بررسی این مقاله. تصویر قهرمان توسط فرناندو هرناندز در Unsplash است.