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

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

สาธิต

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

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

การใช้ Polyfill

บางส่วนของ 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