स्क्रीन वेक लॉक एपीआई की मदद से स्क्रीन चालू रखें

Pete LePage

Thomas Steiner

पब्लिश करने की तारीख: 18 दिसंबर, 2018

Browser Support

Screen Wake Lock API क्या है?

बैटरी खत्म होने से बचाने के लिए, ज़्यादातर डिवाइसों में कुछ समय तक कोई गतिविधि न होने पर, वे स्लीप मोड में चले जाते हैं. ज़्यादातर मामलों में, स्क्रीन बंद होने से कोई समस्या नहीं होती. हालांकि, कुछ ऐप्लिकेशन को अपना काम पूरा करने के लिए, स्क्रीन को चालू रखना पड़ता है. उदाहरण के लिए, खाना बनाने के तरीके बताने वाले ऐप्लिकेशन, जिनमें किसी रेसिपी के चरण दिखाए जाते हैं. इसके अलावा, बॉल पज़ल जैसे गेम, जो इनपुट के लिए डिवाइस मोशन एपीआई का इस्तेमाल करते हैं.

Screen Wake Lock API की मदद से, डिवाइस की स्क्रीन की रोशनी कम होने और स्क्रीन लॉक होने से रोका जा सकता है. इस सुविधा की मदद से, अब ऐसे नए अनुभव पाए जा सकते हैं जिनके लिए अब तक किसी प्लैटफ़ॉर्म के हिसाब से ऐप्लिकेशन की ज़रूरत होती थी.

स्क्रीन वेक लॉक एपीआई की मदद से, हैक किए गए और ज़्यादा बैटरी खर्च करने वाले समाधानों की ज़रूरत कम हो जाती है. यह पुराने एपीआई की कमियों को दूर करता है. पुराना एपीआई, सिर्फ़ स्क्रीन को चालू रखने के लिए इस्तेमाल किया जाता था. साथ ही, इसमें सुरक्षा और निजता से जुड़ी कई समस्याएं थीं.

Screen Wake Lock API के इस्तेमाल के सुझाव

RioRun, The Guardian ने बनाया था. यह एक वेब ऐप्लिकेशन था. यह एक बेहतरीन उदाहरण था. हालांकि, यह अब उपलब्ध नहीं है. यह ऐप्लिकेशन, आपको रियो का वर्चुअल ऑडियो टूर कराता है. यह टूर, 2016 के ओलंपिक मैराथन के रूट पर आधारित है. वेक लॉक के बिना, टूर के दौरान उपयोगकर्ताओं की स्क्रीन बार-बार बंद हो जाती. इससे उन्हें ऐप्लिकेशन का इस्तेमाल करने में मुश्किल होती.

बेशक, इसके अलावा भी कई अन्य उदाहरण हैं:

एक रेसिपी ऐप्लिकेशन, जो केक बेक करते समय या रात का खाना बनाते समय स्क्रीन को चालू रखता है
बोर्डिंग पास या टिकट वाला ऐसा ऐप्लिकेशन जो बारकोड स्कैन होने तक स्क्रीन को चालू रखता है
कियोस्क स्टाइल वाला ऐसा ऐप्लिकेशन जो स्क्रीन को लगातार चालू रखता है
वेब पर काम करने वाला एक ऐसा प्रज़ेंटेशन ऐप्लिकेशन जो प्रज़ेंटेशन के दौरान स्क्रीन को चालू रखता है

Screen Wake Lock API का इस्तेमाल करना

Screen Wake Lock API सिर्फ़ एक तरह का वेक लॉक उपलब्ध कराता है: screen.

`screen` वेक लॉक

screen वेक लॉक की मदद से, डिवाइस की स्क्रीन को बंद होने से रोका जा सकता है. इससे उपयोगकर्ता को स्क्रीन पर दिखने वाली जानकारी दिखती रहती है.

स्क्रीन वेक लॉक पाना

स्क्रीन वेक लॉक का अनुरोध करने के लिए, आपको navigator.wakeLock.request() तरीके को कॉल करना होगा. यह तरीका, WakeLockSentinel ऑब्जेक्ट दिखाता है. आपके पास पैरामीटर के तौर पर, टाइप, screen को पास करने का विकल्प होता है. ब्राउज़र, कई वजहों से अनुरोध को अस्वीकार कर सकता है. उदाहरण के लिए, बैटरी का चार्ज लेवल बहुत कम होने की वजह से. इसलिए, कॉल को try...catch स्टेटमेंट में रैप करना एक अच्छा तरीका है. अगर कोई गड़बड़ी होती है, तो अपवाद के मैसेज में ज़्यादा जानकारी होती है.

स्क्रीन को जगाने वाले लॉक को रिलीज़ करना

आपको स्क्रीन वेक लॉक को रिलीज़ करने का तरीका भी चाहिए. इसके लिए, WakeLockSentinel ऑब्जेक्ट के release() तरीके को कॉल किया जाता है. अगर आपने 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 नाम की एक प्रॉपर्टी होती है. इससे पता चलता है कि सेंटिनल पहले ही रिलीज़ किया जा चुका है या नहीं. शुरुआत में इसकी वैल्यू false होती है. "release" इवेंट भेजे जाने के बाद, इसकी वैल्यू true हो जाती है. इस प्रॉपर्टी की मदद से, वेब डेवलपर को यह पता चलता है कि लॉक कब रिलीज़ किया गया है. इसके लिए, उन्हें मैन्युअल तरीके से ट्रैक करने की ज़रूरत नहीं होती.

स्क्रीन वेक लॉक का लाइफ़साइकल

स्क्रीन वेक लॉक डेमो का इस्तेमाल करने पर, आपको पता चलेगा कि स्क्रीन वेक लॉक, पेज दिखने की स्थिति के हिसाब से काम करते हैं. इसका मतलब है कि जब किसी टैब या विंडो को छोटा किया जाता है या उस टैब या विंडो से स्विच किया जाता है जहां स्क्रीन वेक लॉक की सुविधा चालू है, तो स्क्रीन वेक लॉक अपने-आप बंद हो जाता है.

स्क्रीन वेक लॉक को फिर से पाने के लिए, visibilitychange इवेंट को सुनें और उनके होने पर, नए स्क्रीन वेक लॉक का अनुरोध करें:

const handleVisibilityChange = async () => {
  if (wakeLock !== null && document.visibilityState === 'visible') {
    await requestWakeLock();
  }
};

document.addEventListener('visibilitychange', handleVisibilityChange);

सिस्टम के संसाधनों पर पड़ने वाले असर को कम करना

क्या आपको अपने ऐप्लिकेशन में स्क्रीन वेक लॉक का इस्तेमाल करना चाहिए? आपके ऐप्लिकेशन के लिए कौनसी रणनीति सही है, यह उसकी ज़रूरतों पर निर्भर करता है. हालांकि, आपको अपने ऐप्लिकेशन के लिए सबसे आसान रणनीति का इस्तेमाल करना चाहिए, ताकि सिस्टम के संसाधनों पर इसका कम से कम असर पड़े.

अपने ऐप्लिकेशन में स्क्रीन वेक लॉक जोड़ने से पहले, यह देख लें कि क्या इस्तेमाल के आपके उदाहरणों को इन वैकल्पिक समाधानों में से किसी एक से हल किया जा सकता है:

अगर आपका ऐप्लिकेशन लंबे समय तक डाउनलोड करता है, तो बैकग्राउंड फ़ेच का इस्तेमाल करें.
अगर आपका ऐप्लिकेशन किसी बाहरी सर्वर से डेटा सिंक कर रहा है, तो बैकग्राउंड सिंक का इस्तेमाल करें.

डेमो

स्क्रीन चालू रखने की सुविधा का डेमो और डेमो सोर्स देखें. ध्यान दें कि टैब या ऐप्लिकेशन स्विच करने पर, स्क्रीन वेक लॉक अपने-आप हट जाता है.

ओएस के टास्क मैनेजर में स्क्रीन वेक लॉक

अपने ऑपरेटिंग सिस्टम के टास्क मैनेजर का इस्तेमाल करके, यह देखा जा सकता है कि कोई ऐप्लिकेशन आपके कंप्यूटर को स्लीप मोड में जाने से रोक रहा है या नहीं. इस वीडियो में macOS के Activity Monitor को दिखाया गया है. इसमें बताया गया है कि Chrome में स्क्रीन वेक लॉक चालू है. इससे सिस्टम चालू रहता है.

सुझाव/राय दें या शिकायत करें

क्या आपको Chrome के साथ काम करने में कोई गड़बड़ी मिली? या क्या स्पेसिफ़िकेशन से अलग तरीके से लागू किया गया है?

गड़बड़ी की शिकायत करें. ज़्यादा से ज़्यादा जानकारी दें. बग को फिर से बनाने के लिए, साफ़ तौर पर निर्देश दें. साथ ही, कॉम्पोनेंट को Blink>WakeLock पर सेट करें.

संसाधन

खास जानकारी उम्मीदवार के लिए सुझाव | एडिटर का ड्राफ़्ट
Screen Wake Lock का डेमो | Screen Wake Lock के डेमो का सोर्स
ट्रैकिंग बग
ChromeStatus.com एंट्री
Wake Lock API को आज़माना
Blink कॉम्पोनेंट: Blink>WakeLock

Acknowledgements

टास्क मैनेजर का वीडियो, हेनरी लिम ने उपलब्ध कराया है.