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

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

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

แน่นอนว่ายังมี Use Case อื่นๆ อีกมากมาย เช่น

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

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

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

การใช้ Screen Wake Lock API

ประเภท Wake Lock

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

screen 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 หน้าจออีกครั้ง ให้ฟังเหตุการณ์ 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