Workbox के तरीके

वर्कबॉक्स को किसी भी प्रोजेक्ट की बिल्ड प्रोसेस के साथ आसानी से इस्तेमाल किया जा सकता है. इसका मतलब है कि Workbox को इस्तेमाल करने के एक से ज़्यादा तरीके हैं. इससे आपको अपने प्रोजेक्ट के लिए सही इंटिग्रेशन चुनने में मदद मिलती है. चाहे आप Workbox के साथ किसी भी तरह इंटिग्रेट करें, अलग-अलग टूल एक जैसे एपीआई की सुविधा देते हैं.

generateSW बनाम injectManifest

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

injectManifest कुछ सादगी की लागत पर ज़्यादा सुविधा का इस्तेमाल करता है, क्योंकि आपको अपने सर्विस वर्कर के लिए खुद ही कोड लिखना होता है, जिसमें injectManifest एक प्रीकैश मेनिफ़ेस्ट देता है, जिसका इस्तेमाल Workbox की प्रीकैशिंग तरीकों से किया जा सकता है.

generateSW का इस्तेमाल कब करना चाहिए

आपको generateSW का इस्तेमाल तब करना चाहिए, जब:

  • बिल्ड प्रोसेस से जुड़ी फ़ाइलों को प्री-कैश करना चाहिए. इनमें वे फ़ाइलें भी शामिल हैं जिनके यूआरएल में ऐसे हैश होते हैं जिनके बारे में आपको पहले से पता नहीं होता.
  • आपके पास रनटाइम को कैश मेमोरी में सेव करने की आसान ज़रूरतें होती हैं, जिन्हें generateSW के विकल्पों से कॉन्फ़िगर किया जा सकता है.

generateSW का इस्तेमाल कब नहीं करना चाहिए

दूसरी ओर, आपको generateSW का इस्तेमाल नहीं करना चाहिए, अगर:

  • आप अन्य सर्विस वर्कर सुविधाओं (जैसे वेब पुश) का इस्तेमाल करना चाहते हैं.
  • अपने सर्विस वर्कर को अपने ऐप्लिकेशन की ज़रूरतों के मुताबिक बनाने के लिए, आपको अतिरिक्त स्क्रिप्ट इंपोर्ट करने या खास Workbox मॉड्यूल का इस्तेमाल करने के लिए, ज़्यादा सुविधा की ज़रूरत है.

injectManifest का इस्तेमाल कब करना चाहिए

आपको injectManifest का इस्तेमाल तब करना चाहिए, जब:

  • आपको फ़ाइलों को प्री-कैश करना है, लेकिन खुद का सर्विस वर्कर लिखना है.
  • आपके पास कैश मेमोरी में सेव करने या रूटिंग की ऐसी जटिल ज़रूरतें हैं जिनकी जानकारी generateSW के कॉन्फ़िगरेशन विकल्पों से नहीं दी जा सकती
  • आप अपने सर्विस वर्कर में अन्य API (जैसे वेब पुश) का उपयोग करना चाहते हैं.

injectManifest, generateSW से इस तरह अलग है कि इसके लिए आपको सोर्स सर्विस वर्कर फ़ाइल तय करनी होती है. इस वर्कफ़्लो में, सोर्स सर्विस वर्कर फ़ाइल में एक खास self.__WB_MANIFEST स्ट्रिंग होनी चाहिए, ताकि injectManifest उसे प्रीकैश मेनिफ़ेस्ट से बदल सके.

injectManifest का इस्तेमाल कब नहीं करना चाहिए

आपको injectManifest का इस्तेमाल नहीं करना चाहिए, अगर:

  • आप अपने सर्विस वर्कर में प्री-कैशिंग का इस्तेमाल नहीं करना चाहते.
  • हमारे सर्विस वर्कर की ज़रूरतें इतनी आसान हैं कि इन्हें पूरा किया जा सकता है. generateSW और इसके कॉन्फ़िगरेशन के विकल्पों से क्या-क्या मिल सकता है.
  • आपको लचीलेपन के बजाय आसानी से इस्तेमाल करने को प्राथमिकता देनी चाहिए.

Workbox के बिल्ड टूल का इस्तेमाल करना

अगर आपको बिल्ड प्रोसेस में Workbox का इस्तेमाल करने के लिए, फ़्रेमवर्क-एग्नोस्टिक तरीका चाहिए, तो आपके पास तीन विकल्प हैं:

  1. workbox-cli
  2. workbox-build. कमांड-लाइन टूल.
  3. किसी बंडलर (जैसे कि workbox-webpack-plugin) का इस्तेमाल करना.

इनमें से हर बिल्ड टूल में, मिलते-जुलते विकल्पों के साथ generateSW और injectManifest, दोनों मोड उपलब्ध हैं. ये सभी अच्छे विकल्प तब हैं, जब आपको अपने Workbox से चलने वाले सर्विस वर्कर को किसी खास फ़्रेमवर्क से जोड़ना न हो. यह जानने के लिए कि इनमें से कौनसा विकल्प आपके लिए सबसे काम का है, आइए हर एक पर फटाफट नज़र डालते हैं.

workbox-cli

अगर आपको Workbox के ज़रिए, एंट्री में कम से कम रुकावट का पता लगाना है, तो सीएलआई का इस्तेमाल करें:

npm install workbox-cli --save-dev

सीएलआई इस्तेमाल करने के लिए, npx workbox wizard के साथ विज़र्ड चलाएं. विज़र्ड कुछ सवाल पूछेगा और उन सवालों के जवाबों का इस्तेमाल, workbox-config.js फ़ाइल के साथ एक प्रोजेक्ट सेट अप करने के लिए किया जाएगा. इस प्रोजेक्ट को अपनी ज़रूरत के हिसाब से बनाया जा सकता है. यह कुछ ऐसा दिखाई देगा:

// A config for `generateSW`
export default {
  globDirectory: 'dist/',
  globPatterns: [
    '**/*.{css,woff2,png,svg,jpg,js}'
  ],
  swDest: 'dist/sw.js'
};

कॉन्फ़िगरेशन फ़ाइल बनने के बाद, सीएलआई आपके लिए generateSW या injectManifest तरीके चला सकता है. सीएलआई के सहायता टेक्स्ट में, इस्तेमाल के बारे में ज़्यादा जानकारी और उदाहरण दिए गए हैं.

workbox-build

workbox-build मॉड्यूल के चारों ओर workbox-cli एक रैपर होता है. साथ ही, सीधे workbox-build का इस्तेमाल किया जा सकता है. workbox-build का इस्तेमाल करते समय, workbox-config.js फ़ाइल का इस्तेमाल करके विकल्प तय करने के बजाय, आपको generateSW या injectManifest तरीकों का इस्तेमाल करके, सीधे नोड स्क्रिप्ट के हिस्से के तौर पर इस्तेमाल करना होगा. साथ ही, विकल्पों के मिलते-जुलते सेट को पास करना होगा:

// build-sw.mjs
import {generateSW} from 'workbox-build';

generateSW({
  globDirectory: 'dist/',
  globPatterns: [
    '**/*.{css,woff2,png,svg,jpg,js}'
  ],
  swDest: 'dist/sw.js'
});

ऊपर दिए गए उदाहरण में, node build-sw.mjs निर्देश चलाए जाने पर workbox-build, जनरेट किए गए सर्विस वर्कर को dist डायरेक्ट्री में जोड़ेगा.

बंडलर का इस्तेमाल करना

अलग-अलग बंडलर के पास अपने Workbox प्लगिन होते हैं. हालांकि, Workbox की टीम के साथ आधिकारिक तौर पर सिर्फ़ workbox-webpack-plugin के ज़रिए काम करने वाला webpack एक ही बंडलर होता है. workbox-cli और workbox-build की तरह, workbox-webpack-plugin, generateSW या injectManifest तरीकों को चलाएगा. हालांकि, प्लगिन उन तरीकों के नामों को GenerateSW या InjectManifest के तौर पर बड़ा करता है. अगर ऐसा नहीं है, तो इसका इस्तेमाल workbox-build के जैसा ही है:

// webpack.config.js
import {GenerateSW} from 'workbox-webpack-plugin';

export default {
  // Other webpack config options omitted for brevity...
  plugins: [
    new GenerateSW({
      swDest: './dist/sw.js'
    })
  ]
};

GenerateSW या InjectManifest के लिए दिए गए विकल्प, generateSW या injectManifest जैसे नहीं हैं. हालांकि, ये विकल्प काफ़ी ओवरलैप हैं. खास तौर पर, आपको GenerateSW के लिए globDirectory का विकल्प बताने की ज़रूरत नहीं है, न ही , क्योंकि webpack पहले से ही यह जानता है कि आपकी प्रोडक्शन ऐसेट कहां बंडल की गई हैं.

फ़्रेमवर्क का इस्तेमाल करना

इस पॉइंट पर किए गए सभी कामों के लिए, Workspace के इस्तेमाल पर फ़ोकस किया गया है. भले ही, किसी भी फ़्रेमवर्क की प्राथमिकता तय की गई हो. हालांकि, अगर किसी खास फ़्रेमवर्क में Workbox को इस्तेमाल करने में आसानी होती है, तो इसका इस्तेमाल किया जा सकता है. उदाहरण के लिए, create-react-app डिफ़ॉल्ट रूप से Workbox के साथ शिप किया जाता है. वर्कबॉक्स के साथ अलग-अलग फ़्रेमवर्क इंटिग्रेशन के बारे में, बाद में दिए गए लेख में बताया गया है.

ध्यान दें कि Workbox के फ़्रेमवर्क के हिसाब से होने वाले इंटिग्रेशन की वजह से, हो सकता है कि Workbox को आपके हिसाब से कॉन्फ़िगर न किया जा सके. ऐसे मामलों में, यहां बताए गए तरीकों को आज़माया जा सकता है.

अगर मेरे पास बिल्ड प्रोसेस नहीं है, तो क्या होगा?

यह दस्तावेज़ मानता है कि आपके प्रोजेक्ट में एक बिल्ड प्रोसेस है, लेकिन असल में आपके प्रोजेक्ट में ऐसा नहीं हो सकता. अगर यह आपकी स्थिति के बारे में बताता है, तो अब भी workbox-sw मॉड्यूल के साथ Workbox का इस्तेमाल किया जा सकता है. workbox-sw का इस्तेमाल करके, सीडीएन या लोकल स्टोरेज से Workbox रनटाइम को लोड किया जा सकता है. साथ ही, अपना सर्विस वर्कर बनाया जा सकता है.

नतीजा

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