เปิดหน้าจอค้างไว้ด้วย 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 หากไม่มีการล็อกการปลุก หน้าจอของผู้ใช้จะปิดบ่อยๆ ขณะที่ทัวร์เล่น ซึ่งทำให้ใช้งานได้ยาก

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

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

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

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

การใช้ Screen Wake Lock API

ประเภท Wake Lock

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

screen Wake Lock

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

การรับ Wake Lock หน้าจอ

หากต้องการขอ Wake Lock ของหน้าจอ คุณต้องเรียกใช้เมธอด navigator.wakeLock.request() ที่ส่งคืนออบเจ็กต์ WakeLockSentinel คุณส่งประเภท Wake Lock ที่ต้องการไปยังเมธอดนี้เป็นพารามิเตอร์ ซึ่งปัจจุบันจำกัดไว้ที่ '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" เหตุการณ์ พร็อพเพอร์ตี้นี้ช่วยให้นักพัฒนาเว็บทราบเมื่อมีการปลดล็อก แล้ว จึงไม่ต้องติดตามด้วยตนเอง ฟีเจอร์นี้พร้อมใช้งานตั้งแต่ 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 หน้าจอในตัวจัดการงานของระบบปฏิบัติการ

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

ความคิดเห็น

Web Platform Incubator Community Group (WICG) และทีม Chrome อยากทราบความคิดเห็นและประสบการณ์ของคุณเกี่ยวกับ Screen Wake Lock API

บอกเราเกี่ยวกับการออกแบบ API

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

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

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

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

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

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

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

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

คำขอบคุณ

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