उपयोगकर्ता उम्मीद करते हैं कि ऐप्लिकेशन धीमे या ठीक से काम न करने वाले इंटरनेट कनेक्शन पर शुरू हों या ऑफ़लाइन होने पर भी. वे उम्मीद करते हैं कि हाल ही में उन्होंने जिस कॉन्टेंट का इस्तेमाल किया है, जैसे कि मीडिया ट्रैक या टिकट और यात्रा की योजना उपलब्ध है और जिसे इस्तेमाल किया जा सकता है. अगर अनुरोध मुमकिन नहीं होता, तो वे उम्मीद करते हैं कि ऐप्लिकेशन उन्हें बताए. इसके बजाय, ऐप्लिकेशन से अनुमति के बिना अनुरोध फ़ेल हो जाए या बंद हो जाए. और उपयोगकर्ता यह काम जल्दी से करना चाहते हैं. जैसा कि इस अध्ययन में हम देख सकते हैं कि मिलीसेकंड से लाखों कमाए जाते हैं, इसलिए लोड होने के समय में 0.1 सेकंड का सुधार करने से भी कन्वर्ज़न में 10% तक की बढ़ोतरी हो सकती है. खास जानकारी: उपयोगकर्ता PWA के भरोसेमंद होने की उम्मीद करते हैं, इसलिए हमारे पास सर्विस वर्कर हैं.
नमस्ते सर्विस वर्कर
जब कोई ऐप्लिकेशन, सर्विस वर्कर के स्कोप में शामिल किसी संसाधन के लिए अनुरोध करता है, तब सर्विस वर्कर नेटवर्क प्रॉक्सी के तौर पर अनुरोध को इंटरसे्स करता है. इसमें उपयोगकर्ता के ऑफ़लाइन होने की स्थिति भी शामिल है. इसके बाद यह तय कर सकता है कि क्या उसे कैश मेमोरी एपीआई के ज़रिए कैश मेमोरी से संसाधन को सेवा देनी चाहिए. यह नेटवर्क से वैसे ही काम करता है जैसे सामान्य तौर पर बिना सर्विस वर्कर के किया जाता है या इसे किसी लोकल एल्गोरिदम की मदद से बनाया जाता है. इससे आपको किसी प्लैटफ़ॉर्म ऐप्लिकेशन से मिलता-जुलता अनुभव देने में मदद मिलती है. यह ऑफ़लाइन भी काम कर सकता है.
सर्विस वर्कर का रजिस्ट्रेशन
इससे पहले कि सर्विस वर्कर आपके पेज को कंट्रोल करे, इसे आपके PWA के लिए रजिस्टर किया जाना चाहिए. इसका मतलब है कि जब कोई उपयोगकर्ता पहली बार आपके PWA पर आएगा, तो नेटवर्क के अनुरोध सीधे आपके सर्वर पर जाएंगे. इसकी वजह यह है कि सर्विस वर्कर के पास अभी तक आपके पेजों का कंट्रोल नहीं है.
यह जांच करने के बाद कि ब्राउज़र, Service Worker API के साथ काम करता है या नहीं, आपका PWA एक सर्विस वर्कर रजिस्टर कर सकता है. लोड होने पर, सर्विस वर्कर आपके PWA और नेटवर्क के बीच स्टोर सेट अप करता है, ताकि अनुरोधों को बीच में रोका जा सके और उनके जवाब दिए जा सकें.
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register("/serviceworker.js");
}
पुष्टि करना कि सर्विस वर्कर रजिस्टर किया गया है
यह पुष्टि करने के लिए कि सर्विस वर्कर रजिस्टर है या नहीं, अपने पसंदीदा ब्राउज़र में डेवलपर टूल का इस्तेमाल करें.
Firefox और Chromium पर आधारित ब्राउज़र (Microsoft Edge, Google Chrome या Samsung Internet) में:
- डेवलपर टूल खोलें. इसके बाद, ऐप्लिकेशन टैब पर क्लिक करें.
- बाएं पैनल में, सर्विस वर्कर चुनें.
- पक्का करें कि सर्विस वर्कर का स्क्रिप्ट यूआरएल "चालू किया गया" स्थिति के साथ दिखता है. (इस चैप्टर के लाइफ़साइकल सेक्शन में, इस स्टेटस का मतलब बताया गया है). Firefox पर स्थिति "चल रहा है" या "बंद किया गया" हो सकती है.
Safari में:
- डेवलप करें मेन्यू पर क्लिक करें. इसके बाद, सर्विस वर्कर सबमेन्यू पर क्लिक करें.
- देखें कि सबमेन्यू में मौजूदा ऑरिजिन वाली एंट्री दिख रही है या नहीं. इससे सर्विस वर्कर के संदर्भ के लिए, एक इंस्पेक्टर खुलता है.
स्कोप
जिस फ़ोल्डर में आपका सर्विस वर्कर मौजूद होता है वह उसका स्कोप तय करता है. example.com/my-pwa/sw.js में रहने वाला सर्विस वर्कर, my-pwa पाथ पर या उसके नीचे दिए गए किसी भी नेविगेशन को कंट्रोल कर सकता है, जैसे कि example.com/my-pwa/demos/. सर्विस वर्कर, अपने दायरे में सिर्फ़ आइटम (पेज, वर्कर, और एक साथ "क्लाइंट") को कंट्रोल कर सकते हैं. दायरा, ब्राउज़र टैब और PWA विंडो पर लागू होता है.
हर दायरे में सिर्फ़ एक सर्विस वर्कर की अनुमति है. आम तौर पर, चालू और चालू होने पर, सिर्फ़ एक इंस्टेंस उपलब्ध होता है. इससे कोई फ़र्क़ नहीं पड़ता कि कितने क्लाइंट मेमोरी में हैं. जैसे, PWA विंडो या ब्राउज़र टैब.
Safari में स्कोप मैनेजमेंट ज़्यादा जटिल होता है. इसे पार्टीशन कहा जाता है. अगर आपके पास क्रॉस-डोमेन iframe हैं, तो स्कोप के काम करने के तरीके पर असर पड़ता है. WebKit को लागू करने के बारे में ज़्यादा जानने के लिए, उनका ब्लॉग पोस्ट पढ़ें.
जीवनचक्र
सर्विस वर्कर के पास एक लाइफ़साइकल होती है, जिससे यह तय होता है कि उन्हें कैसे इंस्टॉल किया जाएगा. यह सुविधा, आपके PWA को इंस्टॉल करने की प्रोसेस से अलग है.
सर्विस वर्कर की लाइफ़साइकल, सर्विस वर्कर को रजिस्टर करने से शुरू होती है. इसके बाद ब्राउज़र, सर्विस वर्कर फ़ाइल को डाउनलोड और पार्स करने की कोशिश करता है. अगर पार्स करने की प्रोसेस पूरी हो जाती है, तो इसका install इवेंट ट्रिगर हो जाता है. install इवेंट सिर्फ़ एक बार सक्रिय होता है.
सर्विस वर्कर इंस्टॉलेशन अपने-आप होता है और इसके लिए उपयोगकर्ता की अनुमति की ज़रूरत नहीं होती. भले ही, उपयोगकर्ता ने PWA इंस्टॉल न किया हो. Service Worker API, ऐसे प्लैटफ़ॉर्म पर भी उपलब्ध है जो PWA को इंस्टॉल करने की सुविधा नहीं देते. जैसे, डेस्कटॉप डिवाइसों पर Safari और Firefox.
इंस्टॉल करने के बाद, सर्विस वर्कर के पास अब तक अपने क्लाइंट का कंट्रोल नहीं होता है. इसमें PWA भी शामिल है. पहले इसे चालू करना होगा. जब सर्विस वर्कर अपने क्लाइंट को कंट्रोल करने के लिए तैयार होता है, तब activate इवेंट फ़ायर हो जाएगा. हालांकि, इसका मतलब यह नहीं है कि सर्विस वर्कर को रजिस्टर करने वाला पेज मैनेज किया जाएगा. डिफ़ॉल्ट रूप से, अगली बार उस पेज पर नेविगेट किए जाने तक सर्विस वर्कर कंट्रोल नहीं करेगा. ऐसा पेज को फिर से लोड करने या PWA को फिर से खोलने की वजह से होगा.
self ऑब्जेक्ट का इस्तेमाल करके, सर्विस वर्कर के ग्लोबल स्कोप में इवेंट सुने जा सकते हैं.
serviceworker.js
// This code executes in its own worker or thread
self.addEventListener("install", event => {
console.log("Service worker installed");
});
self.addEventListener("activate", event => {
console.log("Service worker activated");
});
सर्विस वर्कर को अपडेट करना
जब ब्राउज़र यह पता लगाता है कि वर्तमान में क्लाइंट को कंट्रोल करने वाले सर्विस वर्कर और उसी फ़ाइल के नए (आपके सर्वर से) वर्शन बाइट-अलग हैं, तो सर्विस वर्कर अपडेट हो जाते हैं.
इंस्टॉल हो जाने के बाद, नया सर्विस वर्कर तब तक चालू होने का इंतज़ार करेगा, जब तक मौजूदा (पुराने) सर्विस वर्कर किसी क्लाइंट को कंट्रोल नहीं करते. इस स्थिति को "प्रतीक्षा" कहा जाता है और इसी तरह से ब्राउज़र यह पक्का करता है कि एक समय में आपके सर्विस वर्कर का सिर्फ़ एक वर्शन चल रहा है. पेज को रीफ़्रेश करने या PWA को फिर से खोलने से, नए सर्विस वर्कर को कंट्रोल नहीं करना पड़ेगा. उपयोगकर्ता को मौजूदा सर्विस वर्कर का इस्तेमाल करके सभी टैब और विंडो को बंद करना होगा या उनसे दूर जाना होगा. इसके बाद, वापस नेविगेट करना होगा. इसके बाद ही, नया सर्विस वर्कर कंट्रोल करेगा. ज़्यादा जानकारी के लिए, सर्विस वर्कर लाइफ़साइकल लेख पर जाएं.
सर्विस वर्कर का जीवन
इंस्टॉल और रजिस्टर होने के बाद, सर्विस वर्कर अपने दायरे में आने वाले सभी नेटवर्क अनुरोधों को मैनेज कर सकता है. यह अपने थ्रेड पर चलता है और इसके चालू होने और बंद होने को ब्राउज़र कंट्रोल करता है. इससे, PWA चालू होने से पहले या उसके बाद भी काम करता है. जब सर्विस वर्कर अपने थ्रेड पर चलते हैं, तब इस बात की कोई गारंटी नहीं है कि सर्विस वर्कर के चलाए जाने के बीच, इन-मेमोरी स्थिति बनी रहेगी. इसलिए, पक्का करें कि हर रन पर जो भी चीज़ फिर से इस्तेमाल करनी है वह IndexedDB या किसी अन्य स्थायी स्टोरेज में उपलब्ध हो.
अगर यह सेवा पहले से नहीं चल रही है, तो नेटवर्क से जुड़ा अनुरोध मिलने पर या समय-समय पर बैकग्राउंड सिंक या पुश मैसेज जैसे ट्रिगर करने वाले इवेंट के मिलने पर, सर्विस वर्कर शुरू हो जाएगा.
सर्विस वर्कर, अनिश्चित समय तक काम नहीं करते. हालांकि, सही समय हर ब्राउज़र में अलग-अलग होता है, लेकिन अगर सर्विस वर्कर कुछ सेकंड के लिए निष्क्रिय रहते हैं या बहुत लंबे समय तक व्यस्त रहते हैं, तो उन्हें सेवा से बाहर कर दिया जाता है. अगर किसी सर्विस वर्कर को खत्म कर दिया गया है और कोई ऐसी गतिविधि होती है जिससे वह चालू हो जाएगा, तो वह रीस्टार्ट हो जाएगा.
मिलने वाली अनुमतियां
रजिस्टर किए गए और चालू सर्विस वर्कर के साथ, आपके पास अपने PWA की मुख्य लाइफ़साइकल से बिलकुल अलग एक थ्रेड है. हालांकि, डिफ़ॉल्ट रूप से, सर्विस वर्कर फ़ाइल में कोई व्यवहार नहीं होता. यह किसी संसाधन को कैश मेमोरी में सेव नहीं करेगा या उसका इस्तेमाल नहीं करेगा. ऐसा आपके कोड से ही किया जाना चाहिए. आपको नीचे दिए गए चैप्टर में इसका तरीका पता चलेगा.
सर्विस वर्कर की क्षमताएं, सिर्फ़ प्रॉक्सी करने या एचटीटीपी अनुरोधों को पूरा करने के लिए नहीं होती हैं. इसके अलावा, बैकग्राउंड कोड चलाने, वेब पुश नोटिफ़िकेशन, और पेमेंट प्रोसेस करने जैसे दूसरे कामों के लिए भी दूसरी सुविधाएं उपलब्ध होती हैं. हम क्षमताओं के चैप्टर में इन सुविधाओं के बारे में बात करेंगे.