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-cli, workbox-build मॉड्यूल के चारों ओर एक रैपर है और दूसरा विकल्प 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 पहले से ही यह जानता है कि आपकी प्रोडक्शन ऐसेट कहां बंडल की गई हैं.

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

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

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

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

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

नतीजा

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