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

Screen Wake Lock API की मदद से, किसी ऐप्लिकेशन के चालू रहने पर, डिवाइस की स्क्रीन की रोशनी कम या बंद होने से रोका जा सकता है.

Pete LePage
Thomas Steiner

स्क्रीन वेक लॉक एपीआई क्या है?

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

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

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

Screen Wake Lock API के इस्तेमाल के सुझाए गए उदाहरण

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

हालांकि, इसका इस्तेमाल कई अन्य तरीकों से भी किया जा सकता है:

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

मौजूदा स्थिति

चरण स्थिति
1. एक्सप्लेनर वीडियो बनाना लागू नहीं
2. स्पेसिफ़िकेशन का शुरुआती ड्राफ़्ट बनाना पूरा हो गया
3. सुझाव, शिकायतें या राय इकट्ठा करना और डिज़ाइन में बदलाव करना पूरा हो गया
4. ऑरिजिन ट्रायल पूरा हुआ
5. लॉन्च करें पूरा हो गया

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

वेक लॉक के टाइप

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

screen वेक लॉक

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

स्क्रीन 'वेक लॉक' की सुविधा चालू करना

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

स्क्रीन को जगाने वाले लॉक को हटाना

आपको स्क्रीन वेक लॉक को भी रिलीज़ करने के तरीके की ज़रूरत होगी, जो WakeLockSentinel ऑब्जेक्ट के release() तरीके को कॉल करके किया जाता है. अगर आपने WakeLockSentinel का रेफ़रंस सेव नहीं किया है, तो लॉक को मैन्युअल तरीके से रिलीज़ करने का कोई तरीका नहीं है. हालांकि, मौजूदा टैब के अदृश्य होने के बाद, लॉक रिलीज़ हो जाएगा.

अगर आपको तय समय के बाद, स्क्रीन वॉक लॉक को अपने-आप हटाना है, तो release() को कॉल करने के लिए window.setTimeout() का इस्तेमाल करें. इसका उदाहरण नीचे दिया गया है.

// 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 में बदल जाती है. इस प्रॉपर्टी की मदद से, वेब डेवलपर यह जान सकते हैं कि लॉक कब रिलीज़ किया गया है, ताकि उन्हें मैन्युअल तरीके से इसका ट्रैक रखने की ज़रूरत न पड़े. यह सुविधा, Chrome के 87 वर्शन से उपलब्ध है.

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

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

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

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

document.addEventListener('visibilitychange', handleVisibilityChange);

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

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

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

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

डेमो

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

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

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

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

Web Platform Incubator Community Group (WICG) और Chrome टीम, Screen Wake Lock API के बारे में आपके विचार और अनुभव जानना चाहती है.

हमें एपीआई के डिज़ाइन के बारे में बताएं

क्या एपीआई के बारे में कुछ ऐसा है जो उम्मीद के मुताबिक काम नहीं करता? क्या आपके आइडिया को लागू करने के लिए, कोई ऐसा तरीका या प्रॉपर्टी मौजूद नहीं है?

लागू करने से जुड़ी समस्या की शिकायत करना

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

  • https://new.crbug.com पर जाकर, गड़बड़ी की शिकायत करें. इसमें ज़्यादा से ज़्यादा जानकारी शामिल करें. साथ ही, गड़बड़ी को दोहराने के लिए आसान निर्देश दें और कॉम्पोनेंट को Blink>WakeLock पर सेट करें. Glitch, जल्दी और आसानी से इस्तेमाल किए जाने वाले प्रॉडक्ट को शेयर करने के लिए बेहतरीन काम करता है.

यह एपीआई काम करता है

क्या आपको Screen Wake Lock API का इस्तेमाल करना है? सार्वजनिक तौर पर सहायता देने से, Chrome टीम को सुविधाओं को प्राथमिकता देने में मदद मिलती है. साथ ही, इससे ब्राउज़र के अन्य वेंडर को यह पता चलता है कि इन सुविधाओं को उपलब्ध कराना कितना ज़रूरी है.

  • WICG के Discourse थ्रेड पर, एपीआई को इस्तेमाल करने का तरीका शेयर करें.
  • हैशटैग #WakeLock का इस्तेमाल करके @ChromiumDev को ट्वीट भेजें और हमें बताएं कि उनका इस्तेमाल कहां और कैसे किया जा रहा है.

मददगार लिंक

धन्यवाद

Unsplash पर केट स्टोन मैथेसन की हीरो इमेज. टास्क मैनेजर का वीडियो, हेनरी लिम की अनुमति से लिया गया है.