Screen Wake Lock API มีวิธีป้องกันไม่ให้อุปกรณ์หรี่แสงหรือล็อกหน้าจอเมื่อแอปพลิเคชันต้องทํางานต่อไป
Screen Wake Lock API คืออะไร
อุปกรณ์ส่วนใหญ่จะเข้าสู่โหมดสลีปอย่างรวดเร็วเมื่อไม่มีการใช้งานเพื่อไม่ให้แบตเตอรี่หมด แม้ว่าปกติแล้วการดำเนินการนี้จะสามารถทำได้ แต่แอปพลิเคชันบางอย่างจำเป็นต้องเปิดหน้าจอค้างไว้เพื่อให้การทำงานเสร็จสมบูรณ์ ตัวอย่างเช่น แอปทำอาหารที่แสดงขั้นตอนการทำอาหารหรือเกมอย่าง Ball Puzzle ซึ่งใช้ API การเคลื่อนไหวของอุปกรณ์เพื่อป้อนข้อมูล
Screen Wake Lock API มีวิธีป้องกันไม่ให้อุปกรณ์หรี่แสงและล็อกหน้าจอ ความสามารถนี้ช่วยให้ได้รับประสบการณ์การใช้งานแบบใหม่ซึ่งก่อนหน้านี้ต้องใช้แอปเฉพาะแพลตฟอร์ม
Screen Wake Lock API ช่วยลดความจำเป็นในการใช้วิธีแก้ปัญหาแบบแฮ็กและอาจใช้พลังงานมาก โดยจะแก้ไขจุดด้อยของ API รุ่นเก่าที่เพียงเปิดหน้าจอไว้ และมีปัญหาด้านความปลอดภัยและความเป็นส่วนตัวหลายประการ
กรณีการใช้งานที่แนะนําสําหรับ Screen Wake Lock API
RioRun ซึ่งเป็นเว็บแอปที่พัฒนาโดย The Guardian เป็น Use Case ที่สมบูรณ์แบบ (แต่ไม่มีให้บริการแล้ว) แอปนี้จะพาคุณไปสำรวจเมืองริโอผ่านเสียงเสมือนจริงตลอดเส้นทางของการวิ่งมาราธอนในโอลิมปิกปี 2016 หากไม่มีการปลุกหน้าจอ หน้าจอของผู้ใช้จะปิดอยู่บ่อยครั้งขณะที่ทัวร์ชมเล่นอยู่ ทำให้ใช้งานยาก
แน่นอนว่ายังมี Use Case อื่นๆ อีกมากมาย เช่น
- แอปสูตรอาหารที่ทำให้หน้าจอสว่างอยู่ขณะที่คุณอบเค้กหรือทำอาหารเย็น
- แอปบอร์ดดิ้งพาสหรือตั๋วที่เปิดหน้าจอไว้จนกว่าจะสแกนบาร์โค้ด
- แอปสไตล์คีออสก์ที่เปิดหน้าจอไว้อย่างต่อเนื่อง
- แอปงานนำเสนอบนเว็บที่เปิดหน้าจอไว้ระหว่างการนำเสนอ
สถานะปัจจุบัน
ขั้นตอน | สถานะ |
---|---|
1. สร้างคําอธิบาย | ไม่มี |
2. สร้างฉบับร่างแรกของข้อกําหนด | เสร็จสมบูรณ์ |
3. รวบรวมความคิดเห็นและปรับปรุงการออกแบบ | เสร็จสมบูรณ์ |
4. ช่วงทดลองใช้จากต้นทาง | เสร็จสมบูรณ์ |
5. เปิดตัว | เสร็จสมบูรณ์ |
การใช้ Screen Wake Lock API
ประเภท Wake Lock
ปัจจุบัน Screen Wake Lock API มีการปลุกหน้าจอเพียงประเภทเดียวเท่านั้น ได้แก่ screen
screen
Wake Lock
screen
การปลุกอุปกรณ์จะป้องกันไม่ให้หน้าจอของอุปกรณ์ปิดลงเพื่อให้ผู้ใช้เห็นข้อมูลที่แสดงบนหน้าจอ
การ Wake Lock
หากต้องการขอ Wake Lock หน้าจอ คุณต้องเรียกใช้เมธอด navigator.wakeLock.request()
ที่แสดงออบเจ็กต์ WakeLockSentinel
คุณสามารถส่งประเภทการปลุกอุปกรณ์ที่ต้องการเป็นพารามิเตอร์ให้กับเมธอดนี้ ซึ่งปัจจุบันมีเพียง 'screen'
ประเภทเท่านั้น จึงไม่บังคับ
เบราว์เซอร์อาจปฏิเสธคำขอด้วยเหตุผลหลายประการ (เช่น เนื่องจากระดับการชาร์จแบตเตอรี่ต่ำเกินไป) จึงควรรวมการโทรไว้ในคำสั่ง try…catch
ข้อความของข้อยกเว้นจะมีรายละเอียดเพิ่มเติมในกรณีที่ดำเนินการไม่สำเร็จ
ยกเลิกการล็อกหน้าจอ
นอกจากนี้ คุณต้องมีวิธีปลดล็อกการปลุกหน้าจอ ซึ่งทำได้โดยการเรียกใช้เมธอด release()
ของออบเจ็กต์ WakeLockSentinel
หากคุณไม่ได้จัดเก็บการอ้างอิงไปยัง WakeLockSentinel
คุณจะปลดล็อกด้วยตนเองไม่ได้ แต่ระบบจะปลดล็อกให้เมื่อแท็บปัจจุบันมองไม่เห็น
หากต้องการปลดล็อกการปลุกหน้าจอโดยอัตโนมัติหลังจากผ่านไประยะเวลาหนึ่ง ให้ใช้ 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
ที่บ่งบอกว่ามีการปล่อย Sentinel ไปแล้วหรือยัง
โดยค่าของเหตุการณ์เดิมคือ false
และจะเปลี่ยนเป็น true
เมื่อระบบส่งเหตุการณ์ "release"
แล้ว พร็อพเพอร์ตี้นี้ช่วยให้นักพัฒนาเว็บทราบเมื่อมีการยกเลิกการล็อก เพื่อที่จะได้ไม่ต้องติดตามเรื่องนี้ด้วยตนเอง
ซึ่งพร้อมใช้งานใน Chrome เวอร์ชัน 87
วงจรของ 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);
ลดผลกระทบต่อทรัพยากรของระบบ
คุณควรใช้การล็อกหน้าจอเพื่อปลุกในแอปไหม แนวทางที่คุณใช้ขึ้นอยู่กับความต้องการของแอป แต่คุณควรใช้แนวทางที่เบาที่สุดสำหรับแอปเพื่อลดผลกระทบต่อทรัพยากรของระบบ
ก่อนเพิ่มการล็อกหน้าจอเพื่อปลุกในแอป ให้พิจารณาว่า Use Case ของคุณจะแก้ไขได้ด้วยวิธีแก้ปัญหาทางเลือกอย่างใดอย่างหนึ่งต่อไปนี้หรือไม่
- หากแอปทำการดาวน์โหลดที่ใช้เวลานาน ให้ลองใช้การดึงข้อมูลในเบื้องหลัง
- หากแอปของคุณซิงค์ข้อมูลจากเซิร์ฟเวอร์ภายนอก ให้ลองใช้การซิงค์ในเบื้องหลัง
สาธิต
ดูการสาธิต Screen Wake Lock และแหล่งที่มาของข้อมูลการสาธิต สังเกตว่าระบบจะปลดล็อกหน้าจอที่ตื่นอยู่โดยอัตโนมัติเมื่อคุณเปลี่ยนแท็บหรือแอป
Wake Lock หน้าจอในเครื่องมือจัดการงานของระบบปฏิบัติการ
คุณสามารถใช้ตัวจัดการงานของระบบปฏิบัติการเพื่อดูว่าแอปพลิเคชันใดป้องกันไม่ให้คอมพิวเตอร์เข้าสู่โหมดสลีปหรือไม่ วิดีโอด้านล่างแสดงการตรวจสอบกิจกรรมของ macOS ซึ่งบ่งชี้ว่า Chrome มีการทำงานขณะล็อกหน้าจอที่ใช้งานอยู่ซึ่งจะทำให้ระบบเปิดอยู่เสมอ
ความคิดเห็น
กลุ่มชุมชน Web Platform Incubator (WICG) และทีม Chrome อยากทราบความคิดเห็นและประสบการณ์ของคุณเกี่ยวกับ Screen Wake Lock API
บอกเราเกี่ยวกับการออกแบบ API
มีสิ่งใดเกี่ยวกับ API ที่ไม่ทำงานตามที่คาดไว้ไหม หรือมีเมธอดหรือพร็อพเพอร์ตี้ที่ขาดหายไปซึ่งคุณต้องนำไปใช้กับแนวคิดของคุณ
- รายงานปัญหาเกี่ยวกับข้อมูลจำเพาะใน Screen Wake Lock API GitHub repo หรือแสดงความคิดเห็นในปัญหาที่มีอยู่
รายงานปัญหาเกี่ยวกับการติดตั้งใช้งาน
หากพบข้อบกพร่องในการใช้งาน Chrome หรือการใช้งานแตกต่างจากข้อกําหนดหรือไม่
- รายงานข้อบกพร่องที่ https://new.crbug.com อย่าลืมระบุรายละเอียดให้มากที่สุด ระบุวิธีการง่ายๆ ในการทําให้เกิดข้อบกพร่องซ้ำ และตั้งค่าคอมโพเนนต์เป็น
Blink>WakeLock
Glitch เหมาะอย่างยิ่งสำหรับการแชร์การจำลองข้อบกพร่องที่รวดเร็วและง่ายดาย
แสดงการสนับสนุน API
คุณวางแผนที่จะใช้ API ล็อกหน้าจอปลุกระบบไหม การสนับสนุนแบบสาธารณะของคุณจะช่วยให้ทีม Chrome จัดลําดับความสําคัญของฟีเจอร์ต่างๆ และแสดงให้เห็นว่าการสนับสนุนฟีเจอร์เหล่านี้สำคัญเพียงใดต่อผู้ให้บริการเบราว์เซอร์รายอื่นๆ
- แชร์ว่าคุณวางแผนจะใช้ API นี้อย่างไรในชุดข้อความ Discourse ของ WICG
- ทวีตถึง @ChromiumDev โดยใช้แฮชแท็ก
#WakeLock
และแจ้งให้เราทราบว่าคุณใช้ฟีเจอร์นี้ที่ไหนและอย่างไร
ลิงก์ที่มีประโยชน์
- ข้อกำหนดคำแนะนำสำหรับผู้สมัคร | ฉบับร่างของบรรณาธิการ
- การสาธิต Screen Wake Lock | แหล่งที่มาของการสาธิต Screen Wake Lock
- ข้อบกพร่องการติดตาม
- รายการ ChromeStatus.com
- การทดสอบ Wake Lock API
- คอมโพเนนต์ Blink:
Blink>WakeLock
ขอขอบคุณ
รูปภาพหลักโดย Kate Stone Matheson จาก Unsplash วิดีโอตัวจัดการงานนี้ได้รับความอนุเคราะห์จาก Henry Lim