ตรวจหาผู้ใช้ที่ไม่ได้ใช้งานด้วย 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 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