भरोसेमंद वेब ऐप्लिकेशन बनाने में, दो एपीआई अहम भूमिका निभाते हैं: Service Worker और कैश मेमोरी. हालांकि, इनका इस्तेमाल असरदार तरीके से करना चुनौती भरा हो सकता है. ऐसा करने के लिए, आपको छोटे-मोटे गड़बड़ियों या असामान्य स्थितियों से बचना होगा. उदाहरण के लिए, आपके सर्विस वर्कर कोड में गड़बड़ियों की वजह से, कैश मेमोरी में डेटा सेव करने से जुड़ी समस्याएं हो सकती हैं. साथ ही, उपयोगकर्ताओं को पुराना कॉन्टेंट या काम न करने वाले लिंक दिख सकते हैं.
Workbox, एक बेहतरीन सेवा वर्कर टूलकिट है. इसे Service Worker और कैश स्टोरेज एपीआई के आधार पर बनाया गया है. यह वेब ऐप्लिकेशन में ऑफ़लाइन सुविधा जोड़ने के लिए, लाइब्रेरी का ऐसा सेट उपलब्ध कराता है जिसे प्रोडक्शन में इस्तेमाल किया जा सकता है. टूलकिट को दो कलेक्शन में बांटा गया है: ऐसे टूल जो आपके सेवा वर्कर में चलने वाले कोड को मैनेज करने में मदद करते हैं और ऐसे टूल जो आपकी बिल्ड प्रोसेस के साथ इंटिग्रेट होते हैं.
रनटाइम कोड
यह कोड आपकी सेवा वर्कर स्क्रिप्ट में चलता है. साथ ही, यह कंट्रोल करता है कि यह बाहर भेजे जाने वाले अनुरोधों को कैसे इंटरसेप्ट करता है और कैश स्टोरेज एपीआई के साथ कैसे इंटरैक्ट करता है. Workbox में कुल मिलाकर एक दर्जन लाइब्रेरी मॉड्यूल होते हैं. इनमें से हर मॉड्यूल, अलग-अलग तरह के इस्तेमाल के उदाहरणों को हैंडल करता है. सबसे अहम मॉड्यूल यह तय करते हैं कि सेवा वर्कर क्या जवाब देगा (इसे रूटिंग कहा जाता है) और कैसे जवाब देगा (इसे कैश मेमोरी में डेटा सेव करने की रणनीति कहा जाता है).
इंटिग्रेशन बनाना
Workbox में, कमांड-लाइन, Node.js मॉड्यूल, और webpack प्लग इन के टूल उपलब्ध हैं. इनकी मदद से, दो कामों को करने के अन्य तरीके मिलते हैं:
- कॉन्फ़िगरेशन के विकल्पों के सेट के आधार पर, सेवा वर्कर स्क्रिप्ट बनाएं. जनरेट किया गया सेवा वर्कर, कैश मेमोरी में डेटा सेव करने की उन रणनीतियों को लागू करने के लिए, Workbox की रनटाइम लाइब्रेरी का इस्तेमाल करता है जिन्हें आपने कॉन्फ़िगर किया है.
- कॉन्फ़िगर किए जा सकने वाले पैटर्न के आधार पर, ऐसे यूआरएल की सूची जनरेट करें जिन्हें "पहले से कैश मेमोरी में सेव" किया जाना चाहिए. इससे, आपकी बिल्ड प्रोसेस के दौरान जनरेट हुई फ़ाइलों को शामिल और बाहर रखा जा सकता है.
आपको Workbox का इस्तेमाल क्यों करना चाहिए?
सेवा वर्कर बनाते समय, Workbox का इस्तेमाल करना ज़रूरी नहीं है. "सामान्य" सेवा वर्कर के नज़रिए से, कैश मेमोरी में डेटा सेव करने की सामान्य रणनीतियों के बारे में बताने वाली कई गाइड उपलब्ध हैं. अगर आपको Workbox का इस्तेमाल करना है, तो यहां इसके कुछ फ़ायदे बताए गए हैं.
कैश मेमोरी मैनेजमेंट
Workbox आपके लिए कैश मेमोरी के अपडेट मैनेज करता है. यह अपडेट, पहले से कैश मेमोरी में सेव करने की सुविधा का इस्तेमाल करते समय, आपकी बिल्ड प्रोसेस से जुड़ा होता है. इसके अलावा, रनटाइम कैश मेमोरी का इस्तेमाल करते समय, कॉन्फ़िगर किए जा सकने वाले साइज़/उम्र की नीतियों के ज़रिए भी अपडेट मैनेज किए जाते हैं. कैश स्टोरेज एपीआई बहुत अच्छा है, लेकिन इसमें कैश मेमोरी की समयसीमा खत्म होने की सुविधा पहले से मौजूद नहीं है. Workbox जैसे टूल इस कमी को पूरा करते हैं.
ज़्यादा लॉगिंग और गड़बड़ी की रिपोर्टिंग
सर्विस वर्कर का इस्तेमाल शुरू करते समय, यह पता लगाना मुश्किल होता है कि किसी कॉन्टेंट को क्यों कैश मेमोरी में सेव किया जा रहा है. इसके अलावा, यह भी पता लगाना मुश्किल होता है कि किसी कॉन्टेंट को क्यों कैश मेमोरी में सेव नहीं किया जा रहा है.
जब localhost पर वेबसाइट का डेवलपमेंट वर्शन चलाया जा रहा हो, तब Workbox अपने-आप पता लगा लेता है. साथ ही, आपके ब्राउज़र के JavaScript कंसोल में डीबग लॉगिंग चालू कर देता है.
लॉग मैसेज को फ़ॉलो करके, कॉन्फ़िगरेशन या अमान्य होने से जुड़ी किसी भी समस्या की वजह का पता लगाने में, अकेले काम करने के मुकाबले ज़्यादा तेज़ी से मदद मिलती है.
जांचा गया, अलग-अलग ब्राउज़र पर काम करने वाला कोडबेस
Workbox को अलग-अलग ब्राउज़र के लिए टेस्ट किए गए सुइट के हिसाब से बनाया गया है. जब भी संभव हो, यह उन सुविधाओं के लिए अपने-आप वैकल्पिक तरीके लागू कर देता है जो कुछ ब्राउज़र में मौजूद नहीं हैं.
workbox-broadcast-cache-update module, उपलब्ध होने पर Broadcast Channel API का इस्तेमाल करता है. साथ ही, जिन ब्राउज़र पर यह काम नहीं करता उन परpostMessage()पर आधारित तरीके का इस्तेमाल करता है.- workbox-background-sync मॉड्यूल, अगर हो सके, तो Background Sync API का इस्तेमाल करता है. अगर ऐसा नहीं हो पाता है, तो सेवा वर्कर के हर बार शुरू होने पर, पंक्ति में लगे इवेंट को फिर से कोशिश करके सिंक किया जाता है.
आपको Workbox का इस्तेमाल कैसे करना चाहिए?
फ़्रेमवर्क इंटिग्रेशन
अगर आपको कोई नया प्रोजेक्ट शुरू करना है, तो कई लोकप्रिय स्टार्टर किट और ऐड-ऑन प्लग इन में मौजूद, Workbox इंटिग्रेशन का फ़ायदा लिया जा सकता है:
अपनी मौजूदा बिल्ड प्रोसेस में Workbox जोड़ना
अगर आपकी साइट के लिए पहले से ही कोई बिल्ड प्रोसेस मौजूद है, तो हो सकता है कि आपको Workbox का इस्तेमाल शुरू करने के लिए, सही कमांड-लाइन, Node.js मॉड्यूल या webpack प्लग इन टूल का इस्तेमाल करना पड़े.
खास तौर पर, Workbox कमांड-लाइन इंटरफ़ेस की मदद से, इसे आसानी से इस्तेमाल किया जा सकता है. इसमें wizard मोड होता है, जो आपके लोकल डेवलपमेंट एनवायरमेंट की जांच करता है और एक सही डिफ़ॉल्ट कॉन्फ़िगरेशन का सुझाव देता है. इसका इस्तेमाल आने वाले समय में किया जा सकता है:
workbox wizard
? What is the root of your web app (i.e. which directory do you deploy)? src/
? Which file types would you like to precache? css, js, html
? Where would you like your service worker file to be saved? build/sw.js
? Where would you like to save these configuration options? workbox-config.js
अपना सेवा वर्कर बनाने के लिए, workbox generateSW workbox-config.js को बिल्ड प्रोसेस के हिस्से के तौर पर चलाएं. ज़्यादा जानकारी के लिए, generateSW दस्तावेज़ देखें.
workbox-config.js में बदलाव करके, अपने सेवा वर्कर को और भी पसंद के मुताबिक बनाया जा सकता है.
ज़्यादा जानकारी के लिए, विकल्पों के दस्तावेज़ देखें.
किसी मौजूदा सेवा वर्कर में, रनटाइम के दौरान Workbox का इस्तेमाल करना
अगर आपके पास कोई मौजूदा सेवा वर्कर है और आपको Workbox की रनटाइम लाइब्रेरी आज़मानी हैं, तो Workbox को उसके आधिकारिक सीडीएन से इंपोर्ट करें और तुरंत रनटाइम कैश मेमोरी के लिए इसका इस्तेमाल शुरू करें. इस इस्तेमाल के उदाहरण का मतलब है कि आपको प्री-कैश मेमोरी का फ़ायदा नहीं मिलेगा. इसके लिए, आपको बिल्ड टाइम इंटिग्रेशन की ज़रूरत होती है. हालांकि, यह प्रोटोटाइप बनाने और कैश मेमोरी से जुड़ी अलग-अलग रणनीतियों को आज़माने के लिए बहुत अच्छा है.
// Replace 3.6.3 with the current version number of Workbox.
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js');
workbox.routing.registerRoute(
new RegExp('\.png$'),
workbox.strategies.cacheFirst({
cacheName: 'images-cache',
})
);