เปิดหน้าจอค้างไว้ด้วย Screen Wake Lock API

Pete LePage
Thomas Steiner

เผยแพร่: 18 ธันวาคม 2018

Browser Support

  • Chrome: 84.
  • Edge: 84.
  • Firefox: 126.
  • Safari: 16.4.

Source

Screen Wake Lock API คืออะไร

อุปกรณ์ส่วนใหญ่จะเข้าสู่โหมดพักอย่างรวดเร็วเมื่อปล่อยทิ้งไว้ โดยไม่มีการใช้งานเพื่อป้องกันไม่ให้แบตเตอรี่หมด แม้ว่าโดยส่วนใหญ่แล้วการดำเนินการนี้จะไม่มีปัญหา แต่แอปพลิเคชันบางอย่างจำเป็นต้องเปิดหน้าจอไว้เพื่อทำงานให้เสร็จ ตัวอย่างเช่น แอปทำอาหาร ที่แสดงขั้นตอนของสูตรอาหารหรือเกม อย่าง Ball Puzzle ซึ่งใช้ API การเคลื่อนไหวของอุปกรณ์ สำหรับการป้อนข้อมูล

Screen Wake Lock API ช่วยป้องกันไม่ให้อุปกรณ์หรี่แสง และล็อกหน้าจอ ความสามารถนี้ช่วยให้เกิดประสบการณ์ใหม่ๆ ซึ่งก่อนหน้านี้ต้องใช้แอปเฉพาะแพลตฟอร์ม

Screen Wake Lock API ช่วยลดความจำเป็นในการใช้โซลูชันเฉพาะกิจและโซลูชันที่อาจ ใช้พลังงานมาก โดยจะช่วยแก้ไขข้อบกพร่องของ API รุ่นเก่า ซึ่งจำกัดไว้เพียงการเปิดหน้าจอและมีปัญหาด้าน ความปลอดภัยและความเป็นส่วนตัวหลายประการ

กรณีการใช้งานที่แนะนำสำหรับ Screen Wake Lock API

RioRun ซึ่งเป็นเว็บแอปที่พัฒนาโดย The Guardian เป็นกรณีการใช้งานที่สมบูรณ์แบบ (แม้ว่าจะไม่มีให้บริการอีกต่อไป) แอปจะนำคุณไปทัวร์ชมริโอแบบเสมือนจริงพร้อมเสียงบรรยายตามเส้นทางมาราธอนโอลิมปิกปี 2016 หากไม่มีการล็อกการปลุก หน้าจอของผู้ใช้จะปิดบ่อยๆ ขณะที่ทัวร์เล่น ทำให้ใช้งานได้ยาก

แน่นอนว่ายังมีกรณีการใช้งานอื่นๆ อีกมากมาย

  • แอปสูตรอาหารที่เปิดหน้าจอไว้ขณะอบเค้กหรือทำอาหารเย็น
  • แอปบอร์ดดิ้งพาสหรือตั๋วที่เปิดหน้าจอไว้ จนกว่าจะสแกนบาร์โค้ด
  • แอปสไตล์คีออสก์ที่เปิดหน้าจอไว้ตลอดเวลา
  • แอปงานนำเสนอบนเว็บที่เปิดหน้าจอไว้ ระหว่างการนำเสนอ

ใช้ Screen Wake Lock API

Screen Wake Lock API มี Wake Lock เพียงประเภทเดียวคือ screen

screen Wake Lock

screenการล็อกการปลุกจะป้องกันไม่ให้หน้าจอของอุปกรณ์ปิด เพื่อให้ผู้ใช้เห็นข้อมูลที่แสดงบนหน้าจอ

รับ Wake Lock หน้าจอ

หากต้องการขอ Wake Lock ของหน้าจอ คุณต้องเรียกใช้เมธอด navigator.wakeLock.request() ที่แสดงผลออบเจ็กต์ WakeLockSentinel คุณจะส่ง ประเภท screen เป็นพารามิเตอร์ก็ได้ เบราว์เซอร์อาจปฏิเสธคำขอด้วยเหตุผลต่างๆ (เช่น ระดับการชาร์จแบตเตอรี่ต่ำเกินไป) ดังนั้นแนวทางปฏิบัติที่ดีคือการเรียกใช้ในคำสั่ง try...catch ข้อความของข้อยกเว้นจะมีรายละเอียดเพิ่มเติมในกรณีที่เกิดข้อผิดพลาด

ปล่อย Wake Lock หน้าจอ

นอกจากนี้ คุณยังต้องมีวิธีปลดล็อกการปลุกหน้าจอด้วย ซึ่งทำได้โดยการเรียกใช้เมธอด 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" เหตุการณ์ พร็อพเพอร์ตี้นี้ช่วยให้นักพัฒนาเว็บทราบเมื่อมีการปลดล็อกโดยไม่ต้องติดตามด้วยตนเอง

วงจรของ 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 หน้าจอในตัวจัดการงานของระบบปฏิบัติการ

คุณสามารถใช้ตัวจัดการงานของระบบปฏิบัติการเพื่อดูว่ามีแอปพลิเคชันใดที่ป้องกันไม่ให้คอมพิวเตอร์เข้าสู่โหมดสลีป วิดีโอแสดง Activity Monitor ของ macOS ซึ่งระบุว่า Chrome มีการล็อกการปลุกหน้าจอที่ใช้งานอยู่ซึ่งจะทำให้ระบบทำงานอยู่

ความคิดเห็น

หากพบข้อบกพร่องในการใช้งาน Chrome หรือการติดตั้งใช้งาน แตกต่างจากข้อกำหนด

  • รายงานข้อบกพร่อง โดยระบุรายละเอียดให้มากที่สุดเท่าที่จะทำได้ ระบุวิธีการที่ชัดเจน ในการสร้างข้อบกพร่องซ้ำ และตั้งค่าคอมโพเนนต์เป็น Blink>WakeLock

แหล่งข้อมูล

การรับทราบ

วิดีโอตัวจัดการงานได้รับความอนุเคราะห์จาก Henry Lim