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

Screen Wake Lock API มอบวิธีป้องกันไม่ให้อุปกรณ์หรี่แสงหรือล็อกหน้าจอเมื่อแอปพลิเคชันจำเป็นต้องทํางานต่อ

Pete LePage
Thomas Steiner

Screen Wake Lock API คืออะไร

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

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

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

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

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

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

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

สถานะปัจจุบัน

ขั้นตอน สถานะ
1. สร้างข้อความอธิบาย ไม่มีข้อมูล
2. สร้างฉบับร่างเริ่มต้นของข้อกำหนด เสร็จสมบูรณ์
3. รวบรวมความคิดเห็นและทำซ้ำการออกแบบ เสร็จสมบูรณ์
4. ช่วงทดลองใช้จากต้นทาง เสร็จสมบูรณ์
5. เปิดตัว เสร็จสมบูรณ์

การใช้ Screen Wake Lock API

ประเภท Wake Lock

ปัจจุบัน Screen Wake Lock API มี Wake Lock เพียงประเภทเดียวคือ 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 หน้าจออีกครั้ง ให้ฟังเหตุการณ์ visibilitychange และขอ Wake Lock หน้าจอใหม่เมื่อเกิดขึ้น ดังนี้

const handleVisibilityChange = async () => {
  if (wakeLock !== null && document.visibilityState === 'visible') {
    await requestWakeLock();
  }
};

document.addEventListener('visibilitychange', handleVisibilityChange);

ลดผลกระทบต่อทรัพยากรระบบ

คุณควรใช้ Wake Lock หน้าจอในแอปไหม วิธีการที่คุณใช้จะขึ้นอยู่กับความต้องการของแอป ไม่ว่าคุณจะใช้แนวทางที่น้อยที่สุดเท่าที่จะเป็นไปได้สำหรับแอปของคุณ เพื่อลดผลกระทบต่อทรัพยากรของระบบให้เหลือน้อยที่สุด

ก่อนเพิ่ม Wake Lock หน้าจอลงในแอป โปรดพิจารณาว่าคุณจะแก้ปัญหา Use Case ของคุณได้โดยใช้โซลูชันอื่นต่อไปนี้หรือไม่

ข้อมูลประชากร

ดูการสาธิตการล็อกหน้าจอเพื่อปิดหน้าจอและแหล่งข้อมูลการสาธิต สังเกตว่า Wake Lock หน้าจอจะปล่อยโดยอัตโนมัติเมื่อคุณสลับแท็บหรือแอป

ล็อกการปลุกหน้าจอในตัวจัดการงานของระบบปฏิบัติการ

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

ความคิดเห็น

Web Platform Incubator Community Group (WICG) และทีม Chrome ต้องการทราบความคิดและประสบการณ์การใช้ Screen Wake Lock API ของคุณ

บอกให้เราทราบเกี่ยวกับการออกแบบ API

มีบางอย่างเกี่ยวกับ API ที่ทำงานไม่ได้ตามที่คาดไว้ไหม หรือมีวิธีหรือพร็อพเพอร์ตี้ที่ขาดหายไปที่คุณจำเป็นต้องใช้ในการนำแนวคิดของคุณไปปฏิบัติหรือไม่

รายงานปัญหาเกี่ยวกับการใช้งาน

คุณพบข้อบกพร่องในการใช้งาน Chrome หรือไม่ หรือการใช้งานแตกต่างจาก ข้อกำหนดหรือไม่

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

แสดงการสนับสนุนสำหรับ API

คุณวางแผนที่จะใช้ Screen Wake API หรือไม่ การสนับสนุนสาธารณะของคุณช่วยให้ทีม Chrome จัดลำดับความสำคัญของฟีเจอร์และแสดงให้ผู้ให้บริการเบราว์เซอร์รายอื่นๆ เห็นว่าการสนับสนุนฟีเจอร์ดังกล่าวนั้นสำคัญเพียงใด

ลิงก์ที่มีประโยชน์

ข้อความแสดงการยอมรับ

รูปภาพหลักโดย Kate Stone Matheson ใน Unsplash เอื้อเฟื้อวิดีโอของ Henry Lim สำหรับผู้จัดการงาน