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

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

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

कौनसा प्लग-इन इस्तेमाल करना है

GenerateSW

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

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

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

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

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

InjectManifest

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

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

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

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

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

GenerateSW प्लग इन

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 प्लग इन

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: '...',
    }),
  ],
};

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

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

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

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

टाइप

GenerateSW

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

webpack कॉन्फ़िगरेशन के 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: ...,
});

प्रॉपर्टी

  • constructor

    अमान्य

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

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

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

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

    GenerateSWConfig

GenerateSWConfig

प्रॉपर्टी

  • additionalManifestEntries

    (string | ManifestEntry)[] ज़रूरी नहीं

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

  • babelPresetEnvTargets

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

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

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

  • cacheId

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

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

  • चंक

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

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

  • cleanupOutdatedCaches

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

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

    क्या किसी पुराने और काम न करने वाले वर्शन से बनाए गए प्रीकैश की पहचान करने और उन्हें मिटाने की कोशिश वर्कबॉक्स को करनी चाहिए.

  • clientsClaim

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

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

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

  • directoryIndex

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

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

  • disableDevLogs

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

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

  • dontCacheBustURLsMatching

    रेगुलर एक्सप्रेशन ज़रूरी नहीं है

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

  • छोड़ें

    (string | RegExp | function)[] ज़रूरी नहीं

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

  • excludeChunks

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

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

  • ignoreURLParametersMatching

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

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

  • importScripts

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

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

  • importScriptsViaChunks

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

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

  • शामिल होते हैं

    (string | RegExp | function)[] ज़रूरी नहीं

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

  • inlineWorkboxRuntime

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

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

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

  • manifestEntries

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

  • manifestTransforms

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

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

  • maximumFileSizeToCacheInBytes

    number ज़रूरी नहीं

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

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

  • मोड

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

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

  • modifyURLPrefix

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

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

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

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

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

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

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

  • navigateFallbackAllowlist

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

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

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

  • navigateFallbackDenylist

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

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

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

  • navigationPreload

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

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

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

  • offlineGoogleAnalytics

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

    डिफ़ॉल्ट वैल्यू: 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 के ज़रिए दी गई सेवा वर्कर फ़ाइल को कॉम्पाइल करने के साथ-साथ, उस सेवा वर्कर में यूआरएल की सूची और बदलाव की जानकारी को इंजेक्ट करने की सुविधा देती है. ऐसा, वेबपैक एसेट पाइपलाइन के आधार पर, पहले से कैश मेमोरी में सेव करने के लिए किया जाता है.

webpack कॉन्फ़िगरेशन के 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

    क्वेरी

  • InjectManifest

    क्वेरी