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

ใช้ Idle Detection API เพื่อดูว่าผู้ใช้ไม่ได้ใช้งานอุปกรณ์อยู่เมื่อใด

Thomas Steiner

Idle Detection API คืออะไร

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

กรณีการใช้งานที่แนะนำสำหรับ 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 จะถือว่าผู้ใช้มีส่วนร่วมในระดับหนึ่งกับ 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 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.');
}

ขั้นตอนที่ 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);
}

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

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

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

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

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

การสนับสนุนการเชิดหุ่น

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

สาธิต

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

เดโมแคนวาสชั่วคราว

การเคลือบพลาสติก

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

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

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

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

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

ความคิดเห็น

ทีม Chrome อยากทราบความคิดเห็นของคุณเกี่ยวกับ Idle Detection API

บอกเราเกี่ยวกับการออกแบบ API

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

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

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

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

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

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

กิตติกรรมประกาศ

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