भरोसेमंद वेब ऐप्लिकेशन बनाने में दो एपीआई अहम भूमिका निभाते हैं: सर्विस वर्कर और कैश मेमोरी. हालांकि, इनका असरदार तरीके से इस्तेमाल करना एक चुनौती हो सकती है, क्योंकि इसमें छोटे-मोटे तौर-तरीकों में कोई गड़बड़ी नहीं होती या कुछ मामलों में गड़बड़ी होने की आशंका भी नहीं होती. उदाहरण के लिए, आपके सर्विस वर्कर कोड में होने वाली गड़बड़ियों की वजह से कैश मेमोरी में समस्याएं आ सकती हैं. उपयोगकर्ताओं को पुराना कॉन्टेंट या काम न करने वाले लिंक दिख सकते हैं.
Workbox एक हाई-लेवल सर्विस वर्कर टूलकिट है, जो सर्विस वर्कर और कैश स्टोरेज एपीआई पर बना है. यह वेब ऐप्लिकेशन में ऑफ़लाइन सपोर्ट जोड़ने के लिए, प्रोडक्शन के लिए तैयार लाइब्रेरी का सेट उपलब्ध कराता है. टूलकिट को दो कलेक्शन में बांटा गया है: ऐसे टूल जो आपके सर्विस वर्कर के अंदर चलने वाले कोड को मैनेज करने में मदद करते हैं. वहीं, टूलकिट को बनाने की प्रोसेस के साथ इंटिग्रेट किए जाने वाले टूल को मैनेज करने में मदद मिलती है.
रनटाइम कोड
यह कोड आपके सर्विस वर्कर स्क्रिप्ट के अंदर चलता है और कंट्रोल करता है कि यह आउटगोइंग अनुरोधों को कैसे बीच में रोकता है और कैश मेमोरी एपीआई के साथ इंटरैक्ट कैसे करता है. वर्कबॉक्स में कुल कई दर्जन लाइब्रेरी मॉड्यूल हैं. हर एक में अलग-अलग तरह के खास इस्तेमाल के उदाहरण हैं. सबसे अहम मॉड्यूल तय करते हैं कि सर्विस वर्कर क्या जवाब देगा (इसे रूटिंग कहा जाता है) और कैसे जवाब देगा (इसे कैश मेमोरी में सेव करने की रणनीति कहा जाता है).
इंटिग्रेशन बनाएं
Workbox में कमांड लाइन, Node.js मॉड्यूल, और वेबपैक प्लगिन जैसे टूल मिलते हैं. इनकी मदद से ये दो काम किए जा सकते हैं:
- कॉन्फ़िगरेशन विकल्पों के सेट के आधार पर सर्विस वर्कर स्क्रिप्ट बनाएं. जनरेट किया गया सर्विस वर्कर, आपकी कॉन्फ़िगर की गई कैश मेमोरी की रणनीतियों में कार्रवाई करने के लिए, Workbox की रनटाइम लाइब्रेरी "हुड के तहत" का इस्तेमाल करता है.
- बिल्ड प्रोसेस के दौरान जनरेट हुई फ़ाइलों को शामिल करने या बाहर रखने के लिए, कॉन्फ़िगर किए जा सकने वाले पैटर्न के आधार पर, ऐसे यूआरएल की सूची जनरेट करें जो "प्री-कैश" हों.
आपको Workbox का इस्तेमाल क्यों करना चाहिए?
अपना सर्विस वर्कर बनाते समय Workbox का इस्तेमाल करना ज़रूरी नहीं है—यहां ऐसे कई गाइड दिए गए हैं जो "वेनिला" सर्विस वर्कर के नज़रिए से, कैश मेमोरी में डेटा सेव करने की सामान्य रणनीतियों के बारे में बताते हैं. अगर आपने Workbox का इस्तेमाल करने का फ़ैसला लिया है, तो यहां इसके कुछ फ़ायदे बताए गए हैं.
कैश मैनेजमेंट
वर्कबॉक्स, कैश मेमोरी से जुड़े अपडेट आपके लिए मैनेज करता है. ये अपडेट या तो प्री-कैशिंग इस्तेमाल करते समय, बिल्ड प्रोसेस से जुड़े होते हैं या रनटाइम के दौरान कैश मेमोरी का इस्तेमाल करते समय, कॉन्फ़िगर करने लायक साइज़/उम्र नीतियों के ज़रिए होते हैं. मौजूदा कैश स्टोरेज एपीआई काफ़ी असरदार है, लेकिन इसमें कैश मेमोरी की समयसीमा खत्म होने की सुविधा पहले से मौजूद नहीं है. Workbox जैसे टूल की मदद से यह काम किया जा सकता है.
बड़े पैमाने पर लॉग इन करना और गड़बड़ियों की रिपोर्ट करना
जब सर्विस वर्कर से शुरुआत की जा रही होती है, तो यह पता लगाना काफ़ी मुश्किल होता है कि कोई चीज़ कैश मेमोरी में सेव क्यों नहीं हो रही है (या कैश मेमोरी में सेव क्यों नहीं किया जा रहा).
जब localhost पर अपनी वेबसाइट का डेवलपमेंट वर्शन चलाया जाता है, तो Workbox अपने-आप इसका पता लगाता है. साथ ही, यह आपके ब्राउज़र के JavaScript कंसोल में, डीबग लॉग करने की सुविधा चालू करता है.
लॉग मैसेज के साथ आगे बढ़ने से, किसी भी कॉन्फ़िगरेशन या अमान्य होने की समस्या के मूल तक पहुंचने की प्रोसेस, उसे अकेले करने की ज़रूरत से ज़्यादा जल्दी होती है.
जांचा गया क्रॉस-ब्राउज़र कोड बेस
Workbox को क्रॉस-ब्राउज़र टेस्ट सुइट के हिसाब से बनाया गया है. जहां भी संभव होता है, वहां उन सुविधाओं को लागू करने के विकल्प अपने-आप वापस चले जाते हैं जो कुछ ब्राउज़र में मौजूद नहीं होती हैं.
workbox-broadcast-cache-update moduleउपलब्ध होने पर, Broadcast Channel API का इस्तेमाल करता है. साथ ही, जिन ब्राउज़र पर यह सुविधा काम नहीं करती उनमेंpostMessage()के हिसाब से लागू किए गए तरीके को लागू किया जाता है.- अगर संभव हो, तो workbox-background-sync मॉड्यूल में, बैकग्राउंड सिंक एपीआई का इस्तेमाल किया जाता है. अगर ऐसा नहीं होता है, तो हर बार सर्विस वर्कर चालू होने पर, सूची में शामिल इवेंट फिर से कोशिश करने के लिए वापस चला जाता है.
आपको Workbox का इस्तेमाल कैसे करना चाहिए?
फ़्रेमवर्क इंटिग्रेशन
अगर नया प्रोजेक्ट शुरू से शुरू किया जा रहा है, तो कई लोकप्रिय स्टार्टर किट और ऐड-ऑन प्लगिन में मिलने वाले Workbox इंटिग्रेशन का फ़ायदा लिया जा सकता है:
अपनी मौजूदा बिल्ड प्रोसेस में Workbox जोड़ें
अगर आपकी साइट के लिए पहले से ही एक बिल्ड प्रोसेस तैयार है, तो Workbox का इस्तेमाल शुरू करने के लिए, सही कमांड लाइन, Node.js मॉड्यूल या वेबपैक प्लगिन टूल का इस्तेमाल करें.
खास तौर पर, 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',
})
);