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

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

Pete LePage
Thomas Steiner

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 ที่ไม่ทำงานตามที่คาดไว้หรือไม่ หรือ มีวิธีหรือคุณสมบัติที่จำเป็นไม่ครบที่คุณต้องนำไอเดียของคุณไปปฏิบัติหรือไม่

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

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

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

แสดงการรองรับ API

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

  • แชร์วิธีที่คุณวางแผนจะใช้ API ในชุดข้อความของ WICG Discourse
  • ส่งทวีตไปยัง @ChromiumDev โดยใช้แฮชแท็ก #WakeLock และแจ้งให้เราทราบถึงตำแหน่งและวิธีที่คุณใช้งาน

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

กิตติกรรมประกาศ

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