ใช้ Idle Detection API เพื่อดูว่าผู้ใช้ไม่ได้ใช้งานอุปกรณ์อยู่ตอนไหน
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 วินาที คุณอาจลองนึกภาพว่ามีการนำฟีเจอร์นี้ไปใช้ใน ห้างสรรพสินค้าเพื่อให้เด็กๆ ได้ขีดเขียนเล่น
การเคลือบโพลีฟิล
บางแง่มุมของ 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 สามารถจัดลำดับความสำคัญของคุณลักษณะต่างๆ และแสดงให้ผู้ให้บริการเบราว์เซอร์รายอื่นๆ เห็นว่าการสนับสนุนนั้นสำคัญเพียงใด
- แชร์แผนการใช้งานในชุดข้อความของ WICG Discourse
- ส่งทวีตไปที่ @ChromiumDev โดยใช้แฮชแท็ก
#IdleDetection
และแจ้งให้เราทราบว่าคุณใช้แฮชแท็กนี้ที่ไหนและอย่างไร
ลิงก์ที่มีประโยชน์
- คำอธิบายแบบสาธารณะ
- ข้อกำหนดฉบับร่าง
- การสาธิต Idle Detection API | แหล่งที่มาของการสาธิต Idle Detection API
- ข้อบกพร่องในการติดตาม
- รายการ ChromeStatus.com
- คอมโพเนนต์การกะพริบ:
Blink>Input
ข้อความแสดงการยอมรับ
Sam Goto นำ Idle Detection API มาใช้ Maksim Sadym เพิ่มการรองรับเครื่องมือสำหรับนักพัฒนาเว็บ ขอขอบคุณ Joe Medley, Kayce Basques และ Reilly Grant ที่รีวิวบทความนี้ รูปภาพหลักเป็นของ Fernando Hernandez ใน Unsplash