เผยแพร่เมื่อวันที่ 14 พฤษภาคม 2024
Screen Wake Lock API พร้อมใช้งานอย่างเป็นทางการในเบราว์เซอร์หลักทั้งหมด ได้แก่ Chrome, Safari และ Firefox API นี้ช่วยให้คุณควบคุมลักษณะการตื่นของหน้าจออุปกรณ์ได้ เพื่อให้การโต้ตอบกับเว็บแอปพลิเคชันเป็นไปอย่างต่อเนื่อง
กรณีการใช้งาน 2 กรณีต่อไปนี้จึงเป็นไปได้
- การนำเสนอที่ราบรื่น: API นี้จะช่วยป้องกันไม่ให้หน้าจอสลัวลงในแอปการนำเสนอหรือสไลด์โชว์บนเว็บ ผู้นำเสนอจึงมอบประสบการณ์การใช้งานที่ราบรื่นและดูเป็นมืออาชีพได้
- เว็บไซต์สูตรอาหาร: API สามารถเปิดหน้าจอไว้ได้ ดังนั้นผู้ใช้จึงไม่ต้องกังวลว่าหน้าจอจะปิดไปขณะที่มือเต็มไปด้วยแป้งเมื่อทำตามสูตรการอบ
ดูรายละเอียดทั้งหมดเกี่ยวกับการใช้ API ได้ที่หัวข้อทำให้หน้าจอไม่ปิดด้วย Screen Wake Lock API ข้อมูลโค้ดต่อไปนี้แสดงการโต้ตอบที่พบบ่อยที่สุด
// 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);
การนำ Screen Wake Lock API ไปใช้อย่างแพร่หลายเป็นก้าวย่างเชิงบวกสำหรับชุมชนการพัฒนาเว็บ การใช้งานที่หลากหลายและการรองรับที่แพร่หลายช่วยให้คุณสร้างประสบการณ์การใช้งานเว็บที่เชื่อถือได้และมีประสิทธิภาพมากขึ้น ซึ่งท้ายที่สุดแล้วก็จะเป็นประโยชน์ต่อผู้ใช้ในเบราว์เซอร์ต่างๆ ยินดีต้อนรับสู่เว็บที่ราบรื่นและไม่มีการหยุดชะงัก