पेज लाइफ़साइकल एपीआई

Browser Support

  • Chrome: 68.
  • Edge: 79.
  • Firefox: not supported.
  • Safari: not supported.

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

बैकग्राउंड

ऐप्लिकेशन का लाइफ़साइकल, आधुनिक ऑपरेटिंग सिस्टम के लिए संसाधनों को मैनेज करने का एक अहम तरीका है. Android, iOS, और Windows के नए वर्शन पर, ओएस किसी भी समय ऐप्लिकेशन को शुरू और बंद कर सकता है. इससे इन प्लैटफ़ॉर्म को, संसाधनों को व्यवस्थित करने और उन्हें फिर से आवंटित करने में मदद मिलती है, ताकि उपयोगकर्ता को सबसे ज़्यादा फ़ायदा मिल सके.

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

वेब प्लैटफ़ॉर्म पर लंबे समय से ऐसे इवेंट मौजूद हैं जो लाइफ़साइकल की स्थितियों से जुड़े हैं. जैसे, load, unload, और visibilitychange. हालांकि, इन इवेंट की मदद से डेवलपर सिर्फ़ उन लाइफ़साइकल की स्थितियों में बदलाव कर सकते हैं जिन्हें उपयोगकर्ता ने शुरू किया है. कम पावर वाले डिवाइसों पर वेब को भरोसेमंद तरीके से काम करने के लिए, ब्राउज़र को सिस्टम के संसाधनों को पहले से ही वापस पाने और फिर से असाइन करने का तरीका चाहिए. साथ ही, सभी प्लैटफ़ॉर्म पर सामान्य तौर पर ज़्यादा संसाधन इस्तेमाल करने से बचना चाहिए.

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

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

Page Lifecycle API इस समस्या को हल करने की कोशिश करता है. इसके लिए, वह ये काम करता है:

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

इस समाधान से वेब डेवलपर को यह अनुमान लगाने में मदद मिलती है कि सिस्टम के इंटरवेंशन से ऐप्लिकेशन पर क्या असर पड़ेगा. इससे वे ऐसे ऐप्लिकेशन बना पाते हैं जो सिस्टम के इंटरवेंशन से सुरक्षित रहते हैं. साथ ही, इससे ब्राउज़र को सिस्टम के संसाधनों को ज़्यादा बेहतर तरीके से ऑप्टिमाइज़ करने में मदद मिलती है. इससे वेब का इस्तेमाल करने वाले सभी लोगों को फ़ायदा मिलता है.

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

पेज के लाइफ़साइकल की स्थितियों और इवेंट के बारे में खास जानकारी

पेज के लाइफ़साइकल की सभी स्थितियां अलग-अलग होती हैं और एक-दूसरे से जुड़ी नहीं होती हैं. इसका मतलब है कि कोई पेज एक समय में सिर्फ़ एक स्थिति में हो सकता है. साथ ही, पेज के लाइफ़साइकल की स्थिति में होने वाले ज़्यादातर बदलावों को आम तौर पर डीओएम इवेंट के ज़रिए देखा जा सकता है. अपवादों के लिए, हर स्थिति के लिए डेवलपर के सुझाव देखें.

पेज के लाइफ़साइकल की स्थितियों और उनके बीच ट्रांज़िशन का सिग्नल देने वाले इवेंट के बारे में बताने का सबसे आसान तरीका शायद यह डायग्राम है:

इस दस्तावेज़ में बताई गई स्थिति और इवेंट फ़्लो को विज़ुअल तौर पर दिखाया गया है.
Page Lifecycle API की स्थिति और इवेंट फ़्लो.

राज्य

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

राज्य ब्यौरा
चालू है

किसी पेज को चालू स्थिति में तब माना जाता है, जब वह दिखता हो और उसमें इनपुट फ़ोकस मौजूद हो.

पिछली संभावित स्थितियां:
निष्क्रिय (focus इवेंट के ज़रिए)
फ़्रोज़न (resume इवेंट के ज़रिए, फिर pageshow इवेंट के ज़रिए)

अगली संभावित स्थितियां:
पैसिव ( blur इवेंट के ज़रिए)

पैसिव

अगर कोई पेज दिखता है और उस पर इनपुट फ़ोकस नहीं होता है, तो वह पैसिव स्थिति में होता है.

पिछली स्थितियां:
active (blur इवेंट के ज़रिए)
hidden ( visibilitychange इवेंट के ज़रिए)
frozen (resume इवेंट के ज़रिए, इसके बाद pageshow इवेंट के ज़रिए)

अगली संभावित स्थितियां:
चालू है (focus इवेंट के ज़रिए)
छिपाया गया ( visibilitychange इवेंट के ज़रिए)