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
และแจ้งให้เราทราบว่าคุณใช้ฟีเจอร์นี้ที่ไหนและอย่างไร
ลิงก์ที่มีประโยชน์
- ข้อกําหนด คําแนะนําผู้สมัคร | ฉบับร่างของผู้แก้ไข
- การสาธิต Screen Wake Lock | แหล่งที่มาของการสาธิต Screen Wake Lock
- ข้อบกพร่องการติดตาม
- รายการ ChromeStatus.com
- การทดสอบ Wake Lock API
- คอมโพเนนต์ Blink:
Blink>WakeLock
ขอขอบคุณ
รูปภาพหลักโดย Kate Stone Matheson จาก Unsplash วิดีโอตัวจัดการงานนี้ได้รับความอนุเคราะห์จาก Henry Lim