उपयोगकर्ता उम्मीद करते हैं कि धीमे या कमज़ोर नेटवर्क कनेक्शन पर ऐप्लिकेशन भरोसेमंद तरीके से शुरू हों या ऑफ़लाइन भी हैं. वे उम्मीद करते हैं कि हाल ही में उन्होंने जिस कॉन्टेंट से इंटरैक्ट किया था, वह जैसे, मीडिया ट्रैक या टिकट और यात्रा की योजना. जब कोई अनुरोध संभव नहीं होता, तो वे उम्मीद करते हैं कि ऐप्लिकेशन उन्हें जवाब देने के बजाय बताएगा गलती से बंद हो जाए या क्रैश हो जाए. और वे चाहते हैं कि ये सारी चीज़ें तुरंत हो जाएं. जैसे मिलीसेकंड में लाखों बनाएं में देखा जा सकता है, लोड होने में लगने वाले समय में 0.1 सेकंड का सुधार करने पर भी कन्वर्ज़न में 10% तक की बढ़ोतरी हो सकती है. सर्विस वर्कर एक ऐसा टूल है जो आपके प्रोग्रेसिव वेब ऐप्लिकेशन (पीडब्ल्यूए) को आपके उपयोगकर्ताओं का उम्मीदें.
जब कोई ऐप्लिकेशन किसी ऐसे संसाधन का अनुरोध करता है जो सर्विस वर्कर के दायरे में आता है, सर्विस वर्कर, अनुरोध को बीच में रोकता है और नेटवर्क प्रॉक्सी के तौर पर काम करता है, भले ही उपयोगकर्ता ऑफ़लाइन है. इसके बाद, वह यह तय कर सकता है कि उसे का उपयोग करके कैश मेमोरी का उपयोग करें, तो इसे नेटवर्क से ऐसे प्रस्तुत करें जैसे कि ऐक्टिव सर्विस वर्कर का इस्तेमाल किया जा सकता है या इसे किसी लोकल एल्गोरिदम से बनाया जा सकता है. इससे आपको आपको किसी प्लैटफ़ॉर्म ऐप्लिकेशन की तरह ही अच्छी क्वालिटी का अनुभव देना होता है, भले ही ऐप ऑफ़लाइन है.
सर्विस वर्कर रजिस्टर करें
किसी सर्विस वर्कर के ज़रिए आपके पेज को कंट्रोल करने से पहले, उसे आपका PWA. इसका मतलब है कि जब कोई उपयोगकर्ता पहली बार आपका PWA खोलता है, तो उसके सभी नेटवर्क पर अनुरोध सीधे आपके सर्वर पर जाते हैं, क्योंकि सर्विस वर्कर के पास अभी भी कंट्रोल किया जा सकता है.
ब्राउज़र, Service Worker API के साथ काम करता है या नहीं, इसकी जांच करने के बाद, आपका PWA सर्विस वर्कर रजिस्टर करने के लिए. इसके लोड होने के बाद, सर्विस वर्कर खुद को सेट अप करता है आपके PWA और नेटवर्क के बीच में, अनुरोधों को इंटरसेप्ट करके और संबंधित जवाब.
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register("/serviceworker.js");
}
सर्विस वर्कर के रजिस्टर होने की पुष्टि करें
सर्विस वर्कर रजिस्टर है या नहीं, इसकी पुष्टि करने के लिए अपने पसंदीदा ब्राउज़र चुनें.
Firefox और Chromium पर आधारित ब्राउज़र (Microsoft Edge, Google Chrome या Samsung इंटरनेट से जुड़ा हो):
- डेवलपर टूल खोलें, फिर ऐप्लिकेशन टैब पर क्लिक करें.
- बाएं पैनल में, सर्विस वर्कर चुनें.
- जांचें कि सर्विस वर्कर का स्क्रिप्ट यूआरएल, स्थिति के साथ दिखता है या नहीं "चालू है". (ज़्यादा जानकारी के लिए, लाइफ़साइकल देखें). Firefox पर, तो स्थिति "चल रही है" हो सकती है या "बंद हो गया".
Safari में:
- डेवलप करें पर क्लिक करें > सर्विस वर्कर.
- मौजूदा ऑरिजिन वाली एंट्री के लिए, यह मेन्यू देखें. उस एंट्री पर क्लिक करना सर्विस वर्कर के बारे में जानकारी देने वाले इंस्पेक्टर को खोलता है.
दायरा
आपका सर्विस वर्कर जिस फ़ोल्डर में होता है, उसका दायरा तय करता है. सर्विस वर्कर
जो example.com/my-pwa/sw.js में है वह इस पर या उससे कम में मौजूद किसी भी नेविगेशन को कंट्रोल कर सकता है
my-pwa पाथ, जैसे कि example.com/my-pwa/demos/. सर्विस वर्कर यह कर सकते हैं
केवल उनके दायरे में मौजूद आइटम (पेज, वर्कर, एक साथ "क्लाइंट") कंट्रोल कर सकते हैं.
यह स्कोप, ब्राउज़र टैब और पीडब्ल्यूए विंडो पर लागू होता है.
हर स्कोप के लिए सिर्फ़ एक सर्विस वर्कर की अनुमति है. सर्विस वर्कर के ऐक्टिव होने पर चलाने के लिए, आम तौर पर सिर्फ़ एक इंस्टेंस उपलब्ध होता है. इससे कोई फ़र्क़ नहीं पड़ता कि कितने क्लाइंट (पीडब्ल्यूए विंडो या ब्राउज़र टैब) मेमोरी में मौजूद होते हैं.
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");
});
सर्विस वर्कर को अपडेट करें
जब ब्राउज़र को यह पता चलता है कि सर्विस वर्कर अपडेट हो गया है, तो सर्विस वर्कर अपडेट हो जाते हैं क्लाइंट और सर्विस वर्कर फ़ाइल के नए वर्शन को सर्वर बाइट-अलग होते हैं.
इंस्टॉल हो जाने के बाद, नया सर्विस वर्कर तब तक सक्रिय रहता है, जब तक वह पुराना सर्विस वर्कर अब किसी क्लाइंट को कंट्रोल नहीं करता है. इस राज्य को कहा जाता है "इंतज़ार किया जा रहा है", और यह इस तरह ब्राउज़र पक्का करता है कि आपके ब्राउज़र का केवल एक वर्शन सर्विस वर्कर एक समय पर चल रहा है.
किसी पेज को रीफ़्रेश करने या पीडब्ल्यूए को फिर से खोलने पर, नया सर्विस वर्कर नियंत्रण. इसका इस्तेमाल करके उपयोगकर्ता को सभी टैब और विंडो बंद करना होगा या उनसे बाहर नेविगेट करना होगा मौजूदा सर्विस वर्कर को सेट कर सकता है और फिर नया सर्विस वर्कर देने के लिए वापस जा सकता है नियंत्रण. ज़्यादा जानकारी के लिए, सर्विस वर्कर का लाइफ़साइकल देखें.
सर्विस वर्कर की अवधि
इंस्टॉल किया गया और रजिस्टर किया गया सर्विस वर्कर, सभी नेटवर्क अनुरोधों को मैनेज कर सकता है उसके दायरे में आता है. यह अपने थ्रेड पर काम करता है. इसे चालू और बंद किया जाता है ब्राउज़र से कंट्रोल होता है. इससे, पीडब्ल्यूए के खुले होने से पहले ही यह काम कर पाता है या बंद हो जाता है. सर्विस वर्कर, अपने थ्रेड पर चलते हैं, लेकिन इन-मेमोरी स्थिति में हो सकता है कि सर्विस वर्कर के ट्रिगर होने के बीच कोई चीज़ न रहे, इसलिए या तो हर रन के लिए फिर से इस्तेमाल करना IndexedDB या फिर किसी दूसरे तरीके में उपलब्ध स्थायी स्टोरेज.
अगर यह पहले से नहीं चल रहा है, तो नेटवर्क के अनुरोध पर सर्विस वर्कर शुरू हो जाता है को उसके दायरे में भेजा जाता है या जब उसे किसी अवधि जैसा ट्रिगर करने वाला इवेंट मिलता है बैकग्राउंड सिंक या पुश मैसेज भेजा जा सकता है.
सर्विस वर्कर को कुछ सेकंड के लिए निष्क्रिय रहने पर या उन्हें खत्म कर दिया जाता है वे काफ़ी समय से व्यस्त हैं. ऐसा होने का समय अलग-अलग ब्राउज़र के हिसाब से अलग-अलग हो सकता है. अगर कोई सर्विस वर्कर को बंद कर दिया गया है और एक इवेंट होता है, जो शुरू हो जाता है, रीस्टार्ट हो जाता है.
मिलने वाली अनुमतियां
रजिस्टर किया गया और ऐक्टिव सर्विस वर्कर, पूरी तरह से अलग थ्रेड का इस्तेमाल करता है एक्ज़ीक्यूशन का लाइफ़साइकल. हालांकि, डिफ़ॉल्ट रूप से, सर्विस वर्कर फ़ाइल में कोई व्यवहार नहीं होता. यह न तो कैश मेमोरी में सेव करेगा और न ही किसी पेज को दिखाएगा संसाधन; आपके कोड को ये काम करने होंगे. आपको यह पता चलेगा कि इस नीचे दिए गए चैप्टर में से एक है.
सर्विस वर्कर की क्षमताएं सिर्फ़ प्रॉक्सी या एचटीटीपी अनुरोधों को पूरा करने के लिए नहीं होती हैं. इसके अलावा, बैकग्राउंड में अन्य कामों के लिए भी, इसके अलावा अन्य सुविधाएं भी उपलब्ध होती हैं और पेमेंट प्रोसेस करना. हम चर्चा करेंगे कि क्षमताओं में इन जोड़ों को शामिल नहीं कर पाएंगे.