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

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

Thomas Steiner

Idle Detection API คืออะไร

Idle Detection 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 ถือว่ามีการมีส่วนร่วมในระดับหนึ่งระหว่างผู้ใช้, User Agent (ซึ่งก็คือเบราว์เซอร์) และระบบปฏิบัติการของอุปกรณ์ที่ใช้อยู่ ข้อมูลนี้จะแสดงเป็น 2 มิติ ดังนี้

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

การแยกแยะ active ออกจาก idle ต้องใช้วิธีการวิจัยที่อาจแตกต่างกันไปตาม User, 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 เป็นต้นไป คุณจะจำลองเหตุการณ์เมื่อไม่มีการใช้งานในเครื่องมือสำหรับนักพัฒนาเว็บได้โดยไม่ต้องใช้งานจริง ในเครื่องมือสำหรับนักพัฒนาเว็บ ให้เปิดแท็บเซ็นเซอร์ แล้วมองหาเพิ่มสถานะของตัวตรวจจับเมื่อไม่มีการใช้งาน ดูตัวเลือกได้ในวิดีโอด้านล่าง

การจำลองสถานะตัวตรวจจับเมื่อไม่มีการใช้งานในเครื่องมือสำหรับนักพัฒนาเว็บ

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

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

ข้อมูลประชากร

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

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

การเคลือบโพลีฟิล

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

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

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

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

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

ความคิดเห็น

ทีม Chrome ต้องการทราบข้อมูลเกี่ยวกับประสบการณ์การใช้งาน Idle Detection API ของคุณ

บอกให้เราทราบเกี่ยวกับการออกแบบ API

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

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

คุณพบข้อบกพร่องในการใช้งาน 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