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

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

Pete LePage
Thomas Steiner

Screen Wake Lock API คืออะไร

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

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

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

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

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

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

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

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

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

การใช้ Screen Wake Lock API

ประเภท Wake Lock

ปัจจุบัน API ล็อกหน้าจอการปลุกระบบมี Wake Lock เพียงประเภทเดียว ได้แก่ screen

screen Wake Lock

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

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

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

ยกเลิกการล็อกหน้าจอ

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

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

ความคิดเห็น

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

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

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

  • รายงานปัญหาเกี่ยวกับข้อมูลจำเพาะใน Screen Wake Lock API GitHub repo หรือแสดงความคิดเห็นในปัญหาที่มีอยู่

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

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

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

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

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

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

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

ขอขอบคุณ

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