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

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

Thomas Steiner

API การตรวจจับเมื่อไม่มีการใช้งานคืออะไร

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

กรณีการใช้งานที่แนะนำสำหรับ API การตรวจจับเมื่อไม่มีการใช้งาน

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

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

สถานะปัจจุบัน

ขั้นตอน สถานะ
1. สร้างคำอธิบาย เสร็จสมบูรณ์
2. สร้างข้อกำหนดคร่าวๆ เบื้องต้น เสร็จสมบูรณ์
3. รวบรวมความคิดเห็นและ ทำซ้ำในการออกแบบ กำลังดำเนินการ
4. ช่วงทดลองใช้จากต้นทาง เสร็จสมบูรณ์
5. เปิดตัว Chromium 94

วิธีใช้ API การตรวจจับเมื่อไม่มีการใช้งาน

การตรวจหาฟีเจอร์

หากต้องการตรวจสอบว่าระบบรองรับ Idle Detection API หรือไม่ ให้ใช้รายการต่อไปนี้

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

แนวคิดของ Idle Detection API

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

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

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

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

การใช้ API การตรวจจับเมื่อไม่มีการใช้งาน

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

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

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

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

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

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

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

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

สาธิต

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

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

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

ลักษณะบางอย่างของ Idle Detection API เป็นแบบโพลีฟิลได้ และมีไลบรารีการตรวจจับเมื่อไม่มีการใช้งาน เช่น 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

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

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

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

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