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

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

Screen Wake Lock API คืออะไร

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

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

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

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

ขอขอบคุณ

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