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