Screen Wake Lock API มีวิธีป้องกันไม่ให้อุปกรณ์หรี่แสงหรือล็อกหน้าจอเมื่อแอปพลิเคชันต้องทํางานต่อไป
API ล็อกหน้าจอ Wake Lock คืออะไร
อุปกรณ์ส่วนใหญ่จะเข้าสู่โหมดสลีปอย่างรวดเร็วเมื่อปล่อยไว้เพื่อหลีกเลี่ยงไม่ให้แบตเตอรี่หมดเร็ว ไม่มีความเคลื่อนไหว แม้ว่าส่วนใหญ่แล้ว การดำเนินการดังกล่าวจะสะดวก แต่บางแอปพลิเคชันก็ต้องทำให้ หน้าจอเปิดอยู่เพื่อทำงานให้สำเร็จ ตัวอย่างเช่น แอปทำอาหาร ที่แสดงขั้นตอนของสูตรอาหารหรือเกม เช่น Ball Puzzle ซึ่งจะใช้อุปกรณ์ API การเคลื่อนไหวสำหรับอินพุต
Screen Wake Lock API มีวิธีป้องกันไม่ให้อุปกรณ์หรี่แสง และล็อกหน้าจอ ช่วงเวลานี้ ช่วยให้คุณสร้างประสบการณ์ใหม่ๆ ซึ่งก่อนหน้านี้ จำเป็นต้องใช้แอปเฉพาะแพลตฟอร์ม
Screen Wake Lock API ช่วยลดความจำเป็นในการแฮ็กและ วิธีแก้ปัญหาสำหรับผู้ที่ต้องการพลังงาน แก้ไขจุดอ่อนของ API รุ่นเก่า ที่จำกัดไว้เพียงแค่การเปิดหน้าจอไว้และมี ด้านความปลอดภัยและความเป็นส่วนตัว
กรณีการใช้งานที่แนะนำสำหรับ API ล็อกหน้าจอ
RioRun เว็บแอปที่พัฒนาโดย The Guardian เป็นกรณีการใช้งานที่สมบูรณ์แบบ (แม้จะไม่มีให้บริการอีกต่อไป) แอปจะพาคุณไปทัวร์ชมเมืองรีโอเสมือนจริงตามเส้นทางในปี 2016 มาราธอนโอลิมปิก เมื่อไม่มีการทำงานขณะล็อก ผู้ใช้ หน้าจอจะปิดบ่อยครั้งขณะเล่นทัวร์ ทำให้ใช้งานยาก
แน่นอนว่ายังมีกรณีการใช้งานอื่นๆ อีกมากมาย ดังนี้
- แอปสูตรอาหารที่เปิดหน้าจอค้างไว้ขณะที่คุณอบเค้กหรือทำอาหาร อาหารค่ำ
- แอปบอร์ดดิ้งพาสหรือแอปตั๋วที่ช่วยรักษาหน้าจอ เปิดจนกว่าจะมีการสแกนบาร์โค้ด
- แอปสไตล์คีออสก์ที่เปิดหน้าจอไว้อย่างต่อเนื่อง
- แอปงานนำเสนอบนเว็บที่จะเก็บหน้าจอไว้ เปิดระหว่างการนำเสนอ
สถานะปัจจุบัน
ขั้นตอน | สถานะ |
---|---|
1. สร้างคำอธิบาย | ไม่มี |
2. สร้างข้อกำหนดคร่าวๆ เบื้องต้น | เสร็จสมบูรณ์ |
3. รวบรวมความคิดเห็นและทำซ้ำการออกแบบ | เสร็จสมบูรณ์ |
4. ช่วงทดลองใช้จากต้นทาง | เสร็จสมบูรณ์ |
5. เปิดตัว | เสร็จสมบูรณ์ |
การใช้ API ล็อกหน้าจอปลุกระบบ
ประเภท Wake Lock
ปัจจุบัน API ล็อกหน้าจอการปลุกระบบมี Wake Lock เพียง 1 ประเภท ได้แก่ screen
Wake Lock screen
Wake Lock screen
ป้องกันไม่ให้หน้าจอของอุปกรณ์หมุน
เพื่อให้ผู้ใช้เห็นข้อมูลที่แสดงบนหน้าจอ
การ Wake Lock
หากต้องการขอ Wake Lock หน้าจอ คุณต้องเรียกใช้เมธอด navigator.wakeLock.request()
ที่แสดงออบเจ็กต์ WakeLockSentinel
คุณส่งประเภท Wake Lock ที่ต้องการเป็นพารามิเตอร์ให้กับเมธอดนี้
ซึ่งปัจจุบันจํากัดอยู่ที่ 'screen'
เท่านั้น ดังนั้นจึงเป็นแบบไม่บังคับ
เบราว์เซอร์สามารถปฏิเสธคำขอด้วยเหตุผลหลายประการ (ตัวอย่างเช่น
เพราะแบตเตอรี่เหลือน้อยเกินไป)
ดังนั้นจึงควรรวมการโทรไว้ในคำสั่ง try…catch
ข้อความของข้อยกเว้นจะมีรายละเอียดเพิ่มเติมในกรณีที่ดำเนินการไม่สำเร็จ
กำลังเปิดตัว Wake Lock หน้าจอ
คุณยังต้องมีวิธีปลดล็อก Wake Lock หน้าจอ ซึ่งทำได้โดยเรียกใช้
เมธอด release()
ของออบเจ็กต์ WakeLockSentinel
หากคุณไม่ได้จัดเก็บการอ้างอิงไปยัง WakeLockSentinel
คุณจะไม่สามารถ
ในการปล่อยการล็อกด้วยตนเอง แต่จะมีการปล่อยล็อกเมื่อแท็บปัจจุบันมองไม่เห็น
หากต้องการปล่อย Wake Lock หน้าจอโดยอัตโนมัติ
หลังจากผ่านไประยะหนึ่ง
คุณสามารถใช้ window.setTimeout()
เพื่อโทรหา release()
ดังที่แสดงในตัวอย่างด้านล่าง
// The wake lock sentinel.
let wakeLock = null;
// Function that attempts to request a screen wake lock.
const requestWakeLock = async () => {
try {
wakeLock = await navigator.wakeLock.request();
wakeLock.addEventListener('release', () => {
console.log('Screen Wake Lock released:', wakeLock.released);
});
console.log('Screen Wake Lock released:', wakeLock.released);
} catch (err) {
console.error(`${err.name}, ${err.message}`);
}
};
// Request a screen wake lock…
await requestWakeLock();
// …and release it again after 5s.
window.setTimeout(() => {
wakeLock.release();
wakeLock = null;
}, 5000);
ออบเจ็กต์ WakeLockSentinel
มีพร็อพเพอร์ตี้ชื่อ released
ซึ่ง
ระบุว่าเซนทินเนอร์ถูกปล่อยแล้วหรือไม่
ค่าของช่วงแรกคือ false
และจะเปลี่ยนเป็น true
เมื่อ "release"
ส่งเหตุการณ์แล้ว พร็อพเพอร์ตี้นี้ช่วยให้นักพัฒนาเว็บทราบเมื่อมีการล็อก
ได้เผยแพร่แล้ว เพื่อที่จะได้ไม่ต้องติดตามเรื่องนี้ด้วยตนเอง
โดยมีให้ใช้งานใน Chrome 87 เป็นต้นไป
วงจร Wake Lock หน้าจอ
เมื่อเล่นด้วยการสาธิต Wake Lock หน้าจอ คุณจะสังเกตเห็นว่าหน้าจอ Wake Lock ขึ้นอยู่กับระดับการเข้าถึงหน้าเว็บ ซึ่งหมายความว่า Wake Lock หน้าจอ จะปล่อยว่างโดยอัตโนมัติเมื่อคุณย่อ แท็บหรือหน้าต่าง หรือสลับออกจากแท็บหรือหน้าต่างที่มีการใช้งาน Wake Lock หน้าจออยู่
หากต้องการใช้ Wake Lock สำหรับหน้าจออีกครั้ง
ฟังเหตุการณ์ visibilitychange
และขอ Wake Lock หน้าจอใหม่เมื่อเกิดเหตุการณ์ต่อไปนี้
const handleVisibilityChange = async () => {
if (wakeLock !== null && document.visibilityState === 'visible') {
await requestWakeLock();
}
};
document.addEventListener('visibilitychange', handleVisibilityChange);
ลดผลกระทบต่อทรัพยากรระบบให้เหลือน้อยที่สุด
คุณควรใช้ Wake Lock หน้าจอในแอปไหม วิธีที่ใช้จะขึ้นอยู่กับความต้องการของแอป อย่างไรก็ตาม คุณควร ใช้วิธีการที่มีขนาดเล็กที่สุดเท่าที่จะเป็นไปได้สำหรับแอปของคุณในการลด ผลกระทบต่อทรัพยากรระบบ
ก่อนที่จะเพิ่ม Wake Lock สำหรับหน้าจอลงในแอป โปรดพิจารณาว่ากรณีการใช้งาน สามารถแก้ไขได้ด้วยโซลูชันทางเลือกแบบใดแบบหนึ่งต่อไปนี้
- หากแอปทำการดาวน์โหลดเป็นระยะเวลานาน ให้พิจารณาใช้ การดึงข้อมูลในเบื้องหลัง
- หากแอปของคุณซิงค์ข้อมูลจากเซิร์ฟเวอร์ภายนอก ให้พิจารณาใช้ การซิงค์ในเบื้องหลัง
สาธิต
ดูการสาธิต Screen Wake Lock และแหล่งที่มาของการสาธิต สังเกตว่าหน้าจอเปิด Wake Lock โดยอัตโนมัติเมื่อคุณเปลี่ยนแท็บ หรือแอป
Wake Lock หน้าจอในตัวจัดการงานของระบบปฏิบัติการ
คุณสามารถใช้ตัวจัดการงานของระบบปฏิบัติการเพื่อดูว่าแอปพลิเคชันป้องกันหรือไม่ ให้คอมพิวเตอร์ของคุณเข้าสู่โหมดสลีป วิดีโอด้านล่างแสดง macOS ตัวตรวจสอบกิจกรรม ซึ่งแสดงว่า Chrome มี Wake Lock สำหรับหน้าจอที่ใช้งานอยู่ซึ่งเปิดระบบค้างไว้
ความคิดเห็น
กลุ่มชุมชน Web Platform Incubator (WICG) และทีม Chrome ต้องการทราบเกี่ยวกับ ความคิดเห็นและประสบการณ์การใช้งาน Screen Wake Lock API ได้
บอกเราเกี่ยวกับการออกแบบ API
มีบางอย่างเกี่ยวกับ API ที่ไม่ทำงานตามที่คาดไว้หรือไม่ หรือ มีวิธีหรือคุณสมบัติที่จำเป็นไม่ครบที่คุณต้องนำไอเดียของคุณไปปฏิบัติหรือไม่
- ส่งปัญหาด้านข้อมูลจำเพาะในที่เก็บ GitHub แบบ Screen Wake Lock API หรือเพิ่มความคิดของคุณลงในปัญหาที่มีอยู่
รายงานปัญหาเกี่ยวกับการติดตั้งใช้งาน
คุณพบข้อบกพร่องในการติดตั้งใช้งาน Chrome ไหม หรือเป็นการติดตั้งใช้งาน แตกต่างจากข้อกำหนด
- รายงานข้อบกพร่องที่ https://new.crbug.com ตรวจสอบว่าได้ใส่
ให้ละเอียดที่สุด บอกวิธีการง่ายๆ ในการจำลองข้อบกพร่อง และ
ตั้งค่า Components เป็น
Blink>WakeLock
Glitch ทำงานได้ดีมาก เพื่อแชร์ไอเดียที่ง่ายดายและรวดเร็ว
แสดงการรองรับ API
คุณวางแผนที่จะใช้ API ล็อกหน้าจอปลุกระบบไหม การสนับสนุนแบบสาธารณะของคุณจะช่วย ทีม Chrome ให้ความสำคัญกับฟีเจอร์ต่างๆ และแสดงให้ผู้ให้บริการเบราว์เซอร์รายอื่นๆ ทราบว่า ที่สำคัญคือต้องสนับสนุนพวกเขา
- แชร์วิธีที่คุณวางแผนจะใช้ API ในชุดข้อความของ WICG Discourse
- ส่งทวีตไปยัง @ChromiumDev โดยใช้แฮชแท็ก
#WakeLock
และแจ้งให้เราทราบถึงตำแหน่งและวิธีที่คุณใช้งาน
ลิงก์ที่มีประโยชน์
- ข้อกำหนดคำแนะนำสำหรับผู้สมัคร ฉบับร่างของบรรณาธิการ
- การสาธิต Wake Lock หน้าจอ | แหล่งที่มาการสาธิต Screen Wake Lock
- ข้อบกพร่องในการติดตาม
- รายการ ChromeStatus.com
- การทดสอบ API ของ Wake Lock
- คอมโพเนนต์กะพริบ:
Blink>WakeLock
กิตติกรรมประกาศ
รูปภาพหลักโดย เพลง Kate Stone Matheson ในรายการ Unsplash ได้รับการเอื้อเฟื้อวิดีโอของตัวจัดการงาน Henry Lim