वर्कबॉक्स-वेबपैक-प्लगिन

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

प्लग इन को workbox-webpack-plugin मॉड्यूल में दो क्लास के तौर पर लागू किया जाता है. इनका नाम GenerateSW और InjectManifest है. यहां दिए गए सवालों के जवाब से, आपको सही प्लगिन और कॉन्फ़िगरेशन चुनने में मदद मिल सकती है.

किस प्लग इन का इस्तेमाल करें

GenerateSW

GenerateSW प्लगिन आपके लिए सर्विस वर्कर फ़ाइल बनाएगा और उसे webpack ऐसेट पाइपलाइन में जोड़ देगा.

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

  • आपको फ़ाइलों को प्री-कैश करना हो.
  • आपको रनटाइम को कैश मेमोरी में सेव करने की ज़रूरत पड़ती है.

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

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

InjectManifest

InjectManifest प्लगिन, प्रीकैश करने और उस प्रीकैश मेनिफ़ेस्ट को मौजूदा सर्विस वर्कर फ़ाइल में जोड़ने के लिए, यूआरएल की एक सूची जनरेट करेगा. अगर ऐसा नहीं होता है, तो यह फ़ाइल में मौजूद पहले जैसा ही रहेगा.

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

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

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

  • आपको अपनी साइट में सर्विस वर्कर जोड़ने का सबसे आसान पाथ चाहिए.

GenSW प्लगिन

अपने Webpack कॉन्फ़िगरेशन में GenerateSW प्लगिन को इस तरह जोड़ा जा सकता है:

// Inside of webpack.config.js:
const {GenerateSW} = require('workbox-webpack-plugin');

module.exports = {
  // Other webpack config...
  plugins: [
    // Other plugins...
    new GenerateSW({
      // These are some common options, and not all are required.
      // Consult the docs for more info.
      exclude: [/.../, '...'],
      maximumFileSizeToCacheInBytes: ...,
      navigateFallback: '...',
      runtimeCaching: [{
        // Routing via a matchCallback function:
        urlPattern: ({request, url}) => ...,
        handler: '...',
        options: {
          cacheName: '...',
          expiration: {
            maxEntries: ...,
          },
        },
      }, {
        // Routing via a RegExp:
        urlPattern: new RegExp('...'),
        handler: '...',
        options: {
          cacheName: '...',
          plugins: [..., ...],
        },
      }],
      skipWaiting: ...,
    }),
  ],
};

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

कॉन्फ़िगरेशन के विकल्पों का पूरा सेट, रेफ़रंस दस्तावेज़ में देखा जा सकता है.

InjectManifest प्लग इन

अपने Webpack कॉन्फ़िगरेशन में InjectManifest प्लगिन को इस तरह जोड़ा जा सकता है:

// Inside of webpack.config.js:
const {InjectManifest} = require('workbox-webpack-plugin');

module.exports = {
  // Other webpack config...
  plugins: [
    // Other plugins...
    new InjectManifest({
      // These are some common options, and not all are required.
      // Consult the docs for more info.
      exclude: [/.../, '...'],
      maximumFileSizeToCacheInBytes: ...,
      swSrc: '...',
    }),
  ],
};

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

कॉन्फ़िगरेशन के विकल्पों का पूरा सेट, रेफ़रंस दस्तावेज़ में देखा जा सकता है.

ज़्यादा जानकारी

बड़े वेबपैक बिल्ड के अंदर प्लगिन के इस्तेमाल के बारे में जानकारी, वेबपैक दस्तावेज़ के "प्रोग्रेसिव वेब ऐप्लिकेशन" सेक्शन में देखी जा सकती है.

टाइप

GenerateSW

इस क्लास के ज़रिए, वेबपैक कंपाइलेशन प्रोसेस के हिस्से के तौर पर, नई और इस्तेमाल के लिए तैयार सर्विस वर्कर फ़ाइल बनाई जा सकती है.

वेबपैक कॉन्फ़िगरेशन की plugins कलेक्शन में GenerateSW के इंस्टेंस का इस्तेमाल करें.

// The following lists some common options; see the rest of the documentation
// for the full set of options and defaults.
new GenerateSW({
  exclude: [/.../, '...'],
  maximumFileSizeToCacheInBytes: ...,
  navigateFallback: '...',
  runtimeCaching: [{
    // Routing via a matchCallback function:
    urlPattern: ({request, url}) => ...,
    handler: '...',
    options: {
      cacheName: '...',
      expiration: {
        maxEntries: ...,
      },
    },
  }, {
    // Routing via a RegExp:
    urlPattern: new RegExp('...'),
    handler: '...',
    options: {
      cacheName: '...',
      plugins: [..., ...],
    },
  }],
  skipWaiting: ...,
});

प्रॉपर्टी

  • कंस्ट्रक्टर

    void

    GenSW का इंस्टेंस बनाता है.

    constructor फ़ंक्शन ऐसा दिखता है: 

    (config?: GenerateSWConfig)=> {...}

    • कॉन्फ़िगरेशन

      GenerateSWConfig ज़रूरी नहीं है

  • कॉन्फ़िगरेशन

    GenerateSWConfig

GenerateSWConfig

प्रॉपर्टी

  • additionalManifestEntries

    (स्ट्रिंग|ManifestEntry)[] ज़रूरी नहीं

    बिल्ड कॉन्फ़िगरेशन के हिस्से के तौर पर जनरेट की गई एंट्री के साथ-साथ, ऐसी एंट्री की सूची जिन्हें प्री-कैश किया जाना है.

  • babelPresetEnvTargets

    स्ट्रिंग[] ज़रूरी नहीं है

    डिफ़ॉल्ट वैल्यू यह है: ["chrome >= 56"]

    सर्विस वर्कर बंडल को ट्रांसपाइल करते समय, babel-preset-env को पास किए जाने वाले टारगेट.

  • cacheId

    स्ट्रिंग ज़रूरी नहीं

    एक वैकल्पिक आईडी, जिसे कैश मेमोरी के नामों के पहले जोड़ा जाएगा. यह मुख्य तौर पर, लोकल डेवलपमेंट के लिए काम का होता है, जहां एक ही http://localhost:port ऑरिजिन से कई साइटें दिखाई जा सकती हैं.

  • हिस्से

    स्ट्रिंग[] ज़रूरी नहीं है

    एक या एक से ज़्यादा समूह के नाम जिनकी आउटपुट फ़ाइलों को प्रीकैश मेनिफ़ेस्ट में शामिल किया जाना चाहिए.

  • cleanupOutdatedCaches

    बूलियन ज़रूरी नहीं

    डिफ़ॉल्ट वैल्यू यह है: false

    क्या Workbox को पुराने और इसके साथ काम न करने वाले वर्शन से बनाए गए किसी भी प्री-कैश को पहचानने और मिटाने की कोशिश करनी चाहिए.

  • clientsClaim

    बूलियन ज़रूरी नहीं

    डिफ़ॉल्ट वैल्यू यह है: false

    सर्विस वर्कर के चालू होते ही, उसे किसी भी मौजूदा क्लाइंट को कंट्रोल करना शुरू करना चाहिए या नहीं.

  • directoryIndex

    स्ट्रिंग ज़रूरी नहीं

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

  • disableDevLogs

    बूलियन ज़रूरी नहीं

    डिफ़ॉल्ट वैल्यू यह है: false

  • dontCacheBustURLsMatching

    RegExp ज़रूरी नहीं

    इससे मेल खाने वाली एसेट को उनके यूआरएल के ज़रिए खास तौर पर वर्शन माना जाएगा. साथ ही, प्रीकैश मेमोरी में जानकारी अपने-आप भरने के दौरान, एचटीटीपी कैश-बस्टिंग की प्रोसेस नहीं की जाएगी. हालांकि, यह ज़रूरी नहीं है, लेकिन यह सुझाव दिया जाता है कि अगर आपकी मौजूदा बिल्ड प्रोसेस में हर फ़ाइल नाम में पहले से ही [hash] वैल्यू डाली गई है, तो आपको एक RegExp देना होगा जो इसका पता लगा लेगा. ऐसा इसलिए, क्योंकि यह प्रीकैशिंग के दौरान खर्च होने वाली बैंडविथ को कम कर देगा.

  • छोड़ें

    (string|RegExp|function)[] optional

    प्रीकैश मेनिफ़ेस्ट से एसेट को बाहर रखने के लिए, एक या एक से ज़्यादा खास जानकारी का इस्तेमाल किया गया. इसे webpack के स्टैंडर्ड exclude विकल्प के तौर पर, इन नियमों के हिसाब से ही समझा जाता है. अगर यह पैरामीटर उपलब्ध नहीं कराया जाता, तो डिफ़ॉल्ट तौर पर यह [/\.map$/, /^manifest.*\.js$] वैल्यू होती है.

  • excludeChunks

    स्ट्रिंग[] ज़रूरी नहीं है

    एक या एक से ज़्यादा समूह के नाम जिनकी आउटपुट फ़ाइलों को प्रीकैश मेनिफ़ेस्ट में शामिल नहीं किया जाना चाहिए.

  • ignoreURLParametersMatching

    RegExp[] ज़रूरी नहीं

    इस कैटगरी में मौजूद किसी भी RegExp से मेल खाने वाले खोज पैरामीटर के नाम, प्रीकैश मैच खोजने से पहले हटा दिए जाएंगे. यह तब फ़ायदेमंद होता है, जब आपके उपयोगकर्ता ऐसे यूआरएल के लिए अनुरोध करें जिनमें ट्रैफ़िक के सोर्स को ट्रैक करने के लिए इस्तेमाल किए गए यूआरएल पैरामीटर शामिल हों. अगर यह पैरामीटर उपलब्ध नहीं कराया गया है, तो डिफ़ॉल्ट वैल्यू [/^utm_/, /^fbclid$/] होती है.

  • importScripts

    स्ट्रिंग[] ज़रूरी नहीं है

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

  • importScriptsViaChunks

    स्ट्रिंग[] ज़रूरी नहीं है

    वेबपैक डेटा के एक या एक से ज़्यादा नाम. इन हिस्सों का कॉन्टेंट, importScripts() को कॉल करके जनरेट किए गए सर्विस वर्कर में शामिल किया जाएगा.

  • शामिल करें

    (string|RegExp|function)[] optional

    प्रीकैश मेनिफ़ेस्ट में एसेट को शामिल करने के लिए, एक या एक से ज़्यादा जानकारी का इस्तेमाल किया गया. इसे webpack के स्टैंडर्ड include विकल्प के तौर पर, इन नियमों के हिसाब से ही समझा जाता है.

  • inlineWorkboxRuntime

    बूलियन ज़रूरी नहीं

    डिफ़ॉल्ट वैल्यू यह है: false

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

  • manifestEntries

    ManifestEntry[] ज़रूरी नहीं

  • manifestTransforms

    ManifestTransform[] ज़रूरी नहीं

    एक या एक से ज़्यादा फ़ंक्शन जिन्हें जनरेट किए गए मेनिफ़ेस्ट के क्रम में लागू किया जाएगा. अगर modifyURLPrefix या dontCacheBustURLsMatching के बारे में भी बताया गया है, तो पहले उससे जुड़े ट्रांसफ़ॉर्मेशन लागू किए जाएंगे.

  • maximumFileSizeToCacheInBytes

    नंबर ज़रूरी नहीं

    डिफ़ॉल्ट वैल्यू यह है: 2097152

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

  • मोड

    स्ट्रिंग ज़रूरी नहीं

    अगर इसे 'प्रोडक्शन' पर सेट किया जाता है, तो ऑप्टिमाइज़ किया गया सर्विस वर्कर बंडल बनाया जाएगा. इसमें डीबग करने की जानकारी शामिल नहीं होगी. अगर यहां साफ़ तौर पर कॉन्फ़िगर नहीं किया गया है, तो मौजूदा webpack कंपाइलेशन में कॉन्फ़िगर की गई mode वैल्यू का इस्तेमाल किया जाएगा.

  • modifyURLPrefix

    ऑब्जेक्ट ज़रूरी नहीं

    ऑब्जेक्ट मैपिंग स्ट्रिंग के प्रीफ़िक्स, स्ट्रिंग की वैल्यू बदलने से जुड़े होते हैं. इसका इस्तेमाल किसी मेनिफ़ेस्ट एंट्री से पाथ प्रीफ़िक्स को हटाने या जोड़ने के लिए किया जा सकता है. ऐसा तब किया जा सकता है, जब वेब होस्टिंग का सेटअप आपके लोकल फ़ाइल सिस्टम के सेटअप से मेल नहीं खाता हो. ज़्यादा सुविधाजनक विकल्प के तौर पर, आपके पास manifestTransforms विकल्प का इस्तेमाल करने का विकल्प है. साथ ही, ऐसा फ़ंक्शन उपलब्ध कराया जा सकता है जो आपके दिए गए लॉजिक का इस्तेमाल करके, मेनिफ़ेस्ट में एंट्री में बदलाव करता है.

    इस्तेमाल के उदाहरण:

    // Replace a '/dist/' prefix with '/', and also prepend
// '/static' to every URL.
modifyURLPrefix: {
  '/dist/': '/',
  '': '/static',
}
  • navigateFallback

    स्ट्रिंग ज़रूरी नहीं

    डिफ़ॉल्ट वैल्यू यह है: शून्य

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

  • navigateFallbackAllowlist

    RegExp[] ज़रूरी नहीं

    रेगुलर एक्सप्रेशन का एक वैकल्पिक कलेक्शन, जो यह तय करता है कि कॉन्फ़िगर किया गया navigateFallback व्यवहार किन यूआरएल पर लागू होता है. यह तब मददगार होता है, जब आपकी साइट के यूआरएल के सिर्फ़ एक सबसेट को सिंगल पेज ऐप्लिकेशन का हिस्सा माना जाए. अगर navigateFallbackDenylist और navigateFallbackAllowlist, दोनों को कॉन्फ़िगर किया गया हो, तो ब्लॉकलिस्ट से पहले उदाहरण लागू हो जाएगा.

    ध्यान दें: नेविगेशन के दौरान, इन रेगुलर एक्सप्रेशन का आकलन हर डेस्टिनेशन यूआरएल के हिसाब से किया जा सकता है. जटिल RegExps का इस्तेमाल न करें वरना आपके उपयोगकर्ताओं को आपकी साइट नेविगेट करने में देरी हो सकती है.

  • navigateFallbackDenylist

    RegExp[] ज़रूरी नहीं

    रेगुलर एक्सप्रेशन का एक वैकल्पिक कलेक्शन, जो यह तय करता है कि कॉन्फ़िगर किया गया navigateFallback व्यवहार किन यूआरएल पर लागू होता है. यह तब मददगार होता है, जब आपकी साइट के यूआरएल के सिर्फ़ एक सबसेट को सिंगल पेज ऐप्लिकेशन का हिस्सा माना जाए. अगर navigateFallbackDenylist और navigateFallbackAllowlist, दोनों को कॉन्फ़िगर किया गया हो, तो ब्लॉकलिस्ट को प्राथमिकता दी जाएगी.

    ध्यान दें: नेविगेशन के दौरान, इन रेगुलर एक्सप्रेशन का आकलन हर डेस्टिनेशन यूआरएल के हिसाब से किया जा सकता है. जटिल RegExps का इस्तेमाल न करें वरना आपके उपयोगकर्ताओं को आपकी साइट नेविगेट करने में देरी हो सकती है.

  • navigationPreload

    बूलियन ज़रूरी नहीं

    डिफ़ॉल्ट वैल्यू यह है: false

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

  • offlineGoogleAnalytics

    boolean|GoogleAnalyticsInitializeOptions optional

    डिफ़ॉल्ट वैल्यू यह है: false

    यह नीति कंट्रोल करती है कि ऑफ़लाइन Google Analytics के लिए सहायता शामिल की जाए या नहीं. true होने पर, workbox-google-analytics के initialize() पर किया गया कॉल आपके जनरेट किए गए सर्विस वर्कर में जुड़ जाएगा. अगर ऑब्जेक्ट को Object पर सेट किया जाता है, तो इसे initialize() कॉल में पास कर दिया जाएगा. इससे आपको व्यवहार को अपनी पसंद के मुताबिक बनाने की सुविधा मिलेगी.

  • runtimeCaching

    RuntimeCaching[] ज़रूरी नहीं है

    अपने सर्विस वर्कर को जनरेट करने के लिए Workbox के बिल्ड टूल का इस्तेमाल करते समय, आपके पास एक या उससे ज़्यादा रनटाइम कैश मेमोरी कॉन्फ़िगरेशन तय करने का विकल्प होता है. इसके बाद, आपके तय किए गए मैच और हैंडलर कॉन्फ़िगरेशन का इस्तेमाल करके, इन्हें workbox-routing.registerRoute कॉल में बदल दिया जाता है.

    सभी विकल्पों के बारे में जानने के लिए, workbox-build.RuntimeCaching दस्तावेज़ देखें. नीचे दिए गए उदाहरण में एक सामान्य कॉन्फ़िगरेशन दिखाया गया है, जिसमें दो रनटाइम रूट तय किए गए हैं:

  • skipWaiting

    बूलियन ज़रूरी नहीं

    डिफ़ॉल्ट वैल्यू यह है: false

    जनरेट किए गए सर्विस वर्कर को skipWaiting() को बिना किसी शर्त के कॉल करना है या नहीं. अगर false है, तो इसके बजाय message लिसनर जोड़ा जाएगा. इससे क्लाइंट पेज, इंतज़ार करने वाले सर्विस वर्कर को postMessage({type: 'SKIP_WAITING'}) को कॉल करके skipWaiting() को ट्रिगर कर पाएंगे.

  • सोर्समैप

    बूलियन ज़रूरी नहीं

    डिफ़ॉल्ट वैल्यू यह है: true

    जनरेट की गई सर्विस वर्कर फ़ाइलों के लिए सोर्समैप बनाना है या नहीं.

  • swDest

    स्ट्रिंग ज़रूरी नहीं

    डिफ़ॉल्ट वैल्यू यह है: "service-worker.js"

    इस प्लग इन के ज़रिए बनाई गई सर्विस वर्कर फ़ाइल का एसेट नाम.

InjectManifest

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

वेबपैक कॉन्फ़िगरेशन की plugins कलेक्शन में InjectManifest के इंस्टेंस का इस्तेमाल करें.

यह प्लग इन, मेनिफ़ेस्ट इंजेक्ट करने के साथ-साथ, मुख्य वेबपैक कॉन्फ़िगरेशन के विकल्पों का इस्तेमाल करके, swSrc फ़ाइल को कंपाइल करेगा.

// The following lists some common options; see the rest of the documentation
// for the full set of options and defaults.
new InjectManifest({
  exclude: [/.../, '...'],
  maximumFileSizeToCacheInBytes: ...,
  swSrc: '...',
});

प्रॉपर्टी

प्रॉपर्टी

default

टाइप

ऑब्जेक्ट

प्रॉपर्टी

  • GenerateSW

    query

  • InjectManifest

    query