ตรวจหาผู้ใช้ที่ไม่ได้ใช้งานด้วย Idle Detection API

Thomas Steiner

เผยแพร่: 18 พฤษภาคม 2020

Browser Support

Idle Detection API จะแจ้งให้นักพัฒนาแอปทราบเมื่อผู้ใช้ไม่ได้ใช้งาน โดยจะระบุสิ่งต่างๆ เช่น ไม่มีการโต้ตอบกับแป้นพิมพ์ เมาส์ หน้าจอ การเปิดใช้งานโปรแกรมรักษาหน้าจอ การล็อกหน้าจอ หรือการเปลี่ยนไปใช้หน้าจออื่น เกณฑ์ที่นักพัฒนาแอปกำหนดจะทริกเกอร์การแจ้งเตือน

กรณีการใช้งานที่แนะนำสำหรับ Idle Detection API

ตัวอย่างเว็บไซต์ที่อาจใช้ API นี้ ได้แก่

แอปพลิเคชันแชทหรือเว็บไซต์เครือข่ายสังคมออนไลน์สามารถใช้ API นี้เพื่อแจ้งให้ผู้ใช้ทราบว่าติดต่อผู้ติดต่อได้หรือไม่
แอปคีออสก์ที่เปิดเผยต่อสาธารณะ เช่น ในพิพิธภัณฑ์ สามารถใช้ API นี้เพื่อกลับไปที่มุมมอง "หน้าแรก" หากไม่มีใครโต้ตอบกับคีออสก์อีกต่อไป
แอปที่ต้องมีการคำนวณที่ซับซ้อน เช่น การวาดแผนภูมิ สามารถจำกัดการคำนวณเหล่านี้ไว้เฉพาะช่วงเวลาที่ผู้ใช้โต้ตอบกับอุปกรณ์

ใช้ API

หากต้องการตรวจสอบว่าเบราว์เซอร์รองรับ Idle Detection API หรือไม่ ให้ใช้

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

แนวคิดเกี่ยวกับ API

Idle Detection API สันนิษฐานว่าผู้ใช้ User Agent (เช่น เบราว์เซอร์) และระบบปฏิบัติการของอุปกรณ์ที่ใช้งานอยู่มีการโต้ตอบกันในระดับหนึ่ง ซึ่งแสดงใน 2 มิติ ดังนี้

สถานะไม่ได้ใช้งานของผู้ใช้: active หรือ idle: ผู้ใช้ได้หรือไม่ได้ โต้ตอบกับ User Agent เป็นระยะเวลาหนึ่ง
สถานะไม่ได้ใช้งานของหน้าจอ: locked หรือ unlocked: ระบบมีล็อกหน้าจอที่ใช้งานอยู่ (เช่น โปรแกรมรักษาหน้าจอ) ซึ่งป้องกัน การโต้ตอบกับ User Agent

การแยกความแตกต่างระหว่าง active กับ idle ต้องใช้ฮิวริสติกที่อาจแตกต่างกันไปตามผู้ใช้ User-Agent และระบบปฏิบัติการ นอกจากนี้ ควรเป็นเกณฑ์ที่หยาบพอสมควร (ดูความปลอดภัยและสิทธิ์)

โมเดลนี้ตั้งใจที่จะไม่แยกความแตกต่างอย่างเป็นทางการระหว่างการโต้ตอบกับเนื้อหาหนึ่งๆ (นั่นคือ หน้าเว็บในแท็บที่ใช้ API) User Agent โดยรวม หรือระบบปฏิบัติการ คำจำกัดความนี้จะขึ้นอยู่กับ User Agent

ขอสิทธิ์และสร้างอินสแตนซ์

ขั้นตอนแรกเมื่อใช้ 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.');
}

หมายเหตุ: ในตอนแรก การตรวจหาการไม่มีการใช้งานจะอยู่ภายใต้สิทธิ์การแจ้งเตือน แม้ว่ากรณีการใช้งาน API นี้หลายกรณี (แต่ไม่ใช่ทั้งหมด) จะเกี่ยวข้องกับการแจ้งเตือน แต่บรรณาธิการข้อกำหนดการตรวจหาการไม่ได้ใช้งานได้ตัดสินใจที่จะจำกัดการเข้าถึง ไว้หลังสิทธิ์การตรวจหาการไม่ได้ใช้งานโดยเฉพาะ

จากนั้นขั้นตอนที่ 2 คือการสร้างอินสแตนซ์ของ IdleDetector ค่า threshold ขั้นต่ำคือ 60,000 มิลลิวินาที (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);
}

หยุดการตรวจจับการไม่ได้ใช้งาน

คุณยกเลิกการตรวจหาการไม่มีการใช้งานได้โดยเรียกใช้เมธอด AbortController abort()

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

การสนับสนุนเครื่องมือสำหรับนักพัฒนาเว็บ

คุณจำลองเหตุการณ์ที่ไม่ได้ใช้งานในเครื่องมือสำหรับนักพัฒนาเว็บได้โดยไม่ต้องไม่ได้ใช้งานจริง ในเครื่องมือสำหรับนักพัฒนาเว็บ ให้เปิดแท็บเซ็นเซอร์ แล้วมองหาจำลองสถานะของ Idle Detector คุณดูตัวเลือกต่างๆ ได้ในวิดีโอ

การจำลองสถานะของ Idle Detector ในเครื่องมือสำหรับนักพัฒนาเว็บ

การรองรับ Puppeteer

ตั้งแต่ Puppeteer เวอร์ชัน 5.3.1 เป็นต้นไป คุณจะจำลองสถานะว่างต่างๆ เพื่อทดสอบโดยอัตโนมัติว่าลักษณะการทำงานของเว็บแอปมีการเปลี่ยนแปลงอย่างไรได้

สาธิต

คุณดูการทำงานของ Idle Detection API ได้ในเดโม Canvas ชั่วคราว ซึ่งจะลบเนื้อหา หลังจากไม่มีการใช้งานเป็นเวลา 60 วินาที คุณอาจนึกภาพว่าอุปกรณ์นี้ถูกนำไปใช้ในห้างสรรพสินค้า เพื่อให้เด็กๆ วาดเขียน

การสาธิต Canvas ชั่วคราว

Polyfill

API การตรวจหาการไม่มีการใช้งานบางส่วนสามารถใช้ Polyfill ได้ และมีไลบรารีการตรวจหาการไม่มีการใช้งาน เช่น idle.ts แต่แนวทางเหล่านี้จำกัดไว้ที่พื้นที่เนื้อหาของเว็บแอปเอง ไลบรารีที่ทำงานในบริบทของเว็บแอป ต้องทำการสำรวจเหตุการณ์อินพุตอย่างละเอียดหรือฟังการเปลี่ยนแปลงระดับการมองเห็น อย่างไรก็ตาม ห้องสมุดไม่สามารถบอกได้ว่าเมื่อใดที่ผู้ใช้ไม่ได้ใช้งาน นอกพื้นที่เนื้อหา (เช่น เมื่อผู้ใช้อยู่ในแท็บอื่น หรือออกจากระบบคอมพิวเตอร์โดยสิ้นเชิง)

ความปลอดภัยและสิทธิ์

ทีม Chrome ได้ออกแบบและใช้ Idle Detection API โดยใช้หลักการพื้นฐาน ที่กำหนดไว้ในการควบคุมการเข้าถึงฟีเจอร์ที่มีประสิทธิภาพของแพลตฟอร์มเว็บ ซึ่งรวมถึงการควบคุมของผู้ใช้ ความโปร่งใส และการยศาสตร์ ความสามารถในการใช้ API นี้จะควบคุมโดยสิทธิ์ 'idle-detection' นอกจากนี้ แอปต้องทำงานในบริบทที่ปลอดภัยระดับบนสุดจึงจะใช้ API ได้

การควบคุมและความเป็นส่วนตัวของผู้ใช้

เราต้องการป้องกันไม่ให้ผู้ไม่ประสงค์ดีนำ API ใหม่ไปใช้ในทางที่ผิดอยู่เสมอ เว็บไซต์ที่ดูเหมือนเป็นอิสระ แต่ในความเป็นจริงแล้วควบคุมโดยนิติบุคคลเดียวกัน อาจได้รับข้อมูลการไม่ได้ใช้งานของผู้ใช้และ เชื่อมโยงข้อมูลเพื่อระบุผู้ใช้ที่ไม่ซ้ำกันในแหล่งที่มาต่างๆ เพื่อลดการโจมตีประเภทนี้ Idle Detection API จะจำกัดความละเอียดของเหตุการณ์ที่ไม่ได้ใช้งานที่รายงาน

ความคิดเห็น

มีอะไรเกี่ยวกับ API ที่ไม่ทำงานตามที่คุณคาดหวังไว้ไหม หรือมีเมธอด หรือพร็อพเพอร์ตี้ที่ขาดหายไปซึ่งคุณต้องใช้เพื่อนำแนวคิดไปใช้ไหม หากมีคำถามหรือความคิดเห็นเกี่ยวกับโมเดลความปลอดภัย แจ้งปัญหาเกี่ยวกับข้อกำหนดในที่เก็บ GitHub ที่เกี่ยวข้อง หรือแสดงความคิดเห็นในปัญหาที่มีอยู่

รายงานปัญหาเกี่ยวกับการติดตั้งใช้งาน

หากพบข้อบกพร่องในการใช้งาน Chrome หรือการติดตั้งใช้งานแตกต่างจากข้อกำหนด รายงานข้อบกพร่องที่ new.crbug.com โปรดใส่รายละเอียดให้มากที่สุดเท่าที่จะเป็นไปได้ วิธีการง่ายๆ ในการทำซ้ำ และป้อน Blink>Input ในช่องคอมโพเนนต์

แสดงการสนับสนุน API

คุณวางแผนที่จะใช้ Idle Detection API ไหม การสนับสนุนแบบสาธารณะของคุณจะช่วยให้ทีม Chrome จัดลําดับความสําคัญของฟีเจอร์และแสดงให้ผู้ให้บริการเบราว์เซอร์รายอื่นๆ เห็นว่าการสนับสนุนฟีเจอร์เหล่านี้มีความสําคัญเพียงใด

แชร์วิธีที่คุณวางแผนจะใช้ในเธรด WICG Discourse
ส่งทวีตถึง @ChromiumDev โดยใช้แฮชแท็ก #IdleDetection และแจ้งให้เราทราบว่าคุณใช้ฟีเจอร์นี้ที่ใดและอย่างไร

ลิงก์ที่มีประโยชน์

คำขอบคุณ

Sam Goto เป็นผู้ใช้ Idle Detection API Maksim Sadym เป็นผู้เพิ่มการรองรับเครื่องมือสำหรับนักพัฒนาเว็บ ขอขอบคุณ Joe Medley, Kayce Basques และ Reilly Grant สำหรับรีวิว