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 ज़रूरी नहीं है
-
returns
-
-
कॉन्फ़िगरेशन
GenerateSWConfig
प्रॉपर्टी
-
additionalManifestEntries
(स्ट्रिंग | मेनिफ़ेस्टएंट्री)[] ज़रूरी नहीं
बिल्ड कॉन्फ़िगरेशन के हिस्से के तौर पर जनरेट की गई एंट्री के साथ-साथ, ऐसी एंट्री की सूची जिन्हें प्री-कैश किया जाना है.
-
babelPresetEnvTargets
स्ट्रिंग[] ज़रूरी नहीं है
डिफ़ॉल्ट वैल्यू यह है: ["chrome >= 56"]
सर्विस वर्कर बंडल को ट्रांसपाइल करते समय,
babel-preset-env
को पास किए जाने वाले टारगेट. -
cacheId
स्ट्रिंग ज़रूरी नहीं
एक वैकल्पिक आईडी, जिसे कैश मेमोरी के नामों के पहले जोड़ा जाएगा. यह मुख्य तौर पर, लोकल डेवलपमेंट के लिए काम का होता है, जहां एक ही
http://localhost:port
ऑरिजिन से कई साइटें दिखाई जा सकती हैं. -
हिस्से
स्ट्रिंग[] ज़रूरी नहीं है
एक या एक से ज़्यादा समूह के नाम जिनकी आउटपुट फ़ाइलों को प्रीकैश मेनिफ़ेस्ट में शामिल किया जाना चाहिए.
-
cleanupOutdatedCaches
बूलियन ज़रूरी नहीं
डिफ़ॉल्ट वैल्यू यह है: false
क्या Workbox को पुराने और इसके साथ काम न करने वाले वर्शन से बनाए गए किसी भी प्री-कैश को पहचानने और मिटाने की कोशिश करनी चाहिए.
-
clientsClaim
बूलियन ज़रूरी नहीं
डिफ़ॉल्ट वैल्यू यह है: false
सर्विस वर्कर के चालू होते ही, उसे किसी भी मौजूदा क्लाइंट को कंट्रोल करना शुरू करना चाहिए या नहीं.
-
directoryIndex
स्ट्रिंग ज़रूरी नहीं
अगर
/
पर खत्म होने वाले यूआरएल के लिए नेविगेशन अनुरोध, पहले से कैश मेमोरी में सेव किए गए यूआरएल से मैच नहीं कर पाता है, तो इस वैल्यू को यूआरएल में जोड़ दिया जाएगा. साथ ही, इसकी जांच की जाएगी कि पहले से कैश मेमोरी में सेव किए गए डेटा से मेल खा रहा है या नहीं. यह इस पर सेट होना चाहिए कि आपका वेब सर्वर अपने डायरेक्ट्री इंडेक्स के लिए किस चीज़ का इस्तेमाल कर रहा है. -
disableDevLogs
बूलियन ज़रूरी नहीं
डिफ़ॉल्ट वैल्यू यह है: false
-
dontCacheBustURLsMatching
RegExp ज़रूरी नहीं
इससे मेल खाने वाली एसेट को उनके यूआरएल के ज़रिए खास तौर पर वर्शन माना जाएगा. साथ ही, प्रीकैश मेमोरी में जानकारी अपने-आप भरने के दौरान, एचटीटीपी कैश-बस्टिंग की प्रोसेस नहीं की जाएगी. हालांकि, यह ज़रूरी नहीं है, लेकिन यह सुझाव दिया जाता है कि अगर आपकी मौजूदा बिल्ड प्रोसेस में हर फ़ाइल नाम में पहले से ही
[hash]
वैल्यू डाली गई है, तो आपको एक RegExp देना होगा जो इसका पता लगा लेगा. ऐसा इसलिए, क्योंकि यह प्रीकैशिंग के दौरान खर्च होने वाली बैंडविथ को कम कर देगा. -
छोड़ें
(स्ट्रिंग | RegExp | फ़ंक्शन)[] ज़रूरी नहीं
प्रीकैश मेनिफ़ेस्ट से एसेट को बाहर रखने के लिए, एक या एक से ज़्यादा खास जानकारी का इस्तेमाल किया गया. इसे
webpack
के स्टैंडर्डexclude
विकल्प के तौर पर, इन नियमों के हिसाब से ही समझा जाता है. अगर यह पैरामीटर उपलब्ध नहीं कराया जाता, तो डिफ़ॉल्ट तौर पर यह[/\.map$/, /^manifest.*\.js$]
वैल्यू होती है. -
excludeChunks
स्ट्रिंग[] ज़रूरी नहीं है
एक या एक से ज़्यादा समूह के नाम जिनकी आउटपुट फ़ाइलों को प्रीकैश मेनिफ़ेस्ट में शामिल नहीं किया जाना चाहिए.
-
ignoreURLParametersMatching
RegExp[] ज़रूरी नहीं
इस कैटगरी में मौजूद किसी भी RegExp से मेल खाने वाले खोज पैरामीटर के नाम, प्रीकैश मैच खोजने से पहले हटा दिए जाएंगे. यह तब फ़ायदेमंद होता है, जब आपके उपयोगकर्ता ऐसे यूआरएल के लिए अनुरोध करें जिनमें ट्रैफ़िक के सोर्स को ट्रैक करने के लिए इस्तेमाल किए गए यूआरएल पैरामीटर शामिल हों. अगर यह पैरामीटर उपलब्ध नहीं कराया गया है, तो डिफ़ॉल्ट वैल्यू
[/^utm_/, /^fbclid$/]
होती है. -
importScripts
स्ट्रिंग[] ज़रूरी नहीं है
उन JavaScript फ़ाइलों की सूची जिन्हें जनरेट की गई सर्विस वर्कर फ़ाइल में
importScripts()
को भेजा जाना चाहिए. यह तब काम आता है, जब आप Workbox को टॉप-लेवल सर्विस वर्कर फ़ाइल बनाने की अनुमति देना चाहते हों, लेकिन आपको कुछ अतिरिक्त कोड शामिल करने की अनुमति देनी हो, जैसे कि पुश इवेंट लिसनर. -
importScriptsViaChunks
स्ट्रिंग[] ज़रूरी नहीं है
वेबपैक डेटा के एक या एक से ज़्यादा नाम. इन हिस्सों का कॉन्टेंट,
importScripts()
को कॉल करके जनरेट किए गए सर्विस वर्कर में शामिल किया जाएगा. -
शामिल करें
(स्ट्रिंग | RegExp | फ़ंक्शन)[] ज़रूरी नहीं
प्रीकैश मेनिफ़ेस्ट में एसेट को शामिल करने के लिए, एक या एक से ज़्यादा जानकारी का इस्तेमाल किया गया. इसे
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', }
-
स्ट्रिंग ज़रूरी नहीं
डिफ़ॉल्ट वैल्यू यह है: शून्य
अगर बताया गया है, तो जो यूआरएल पहले से कैश नहीं किए गए हैं उनके सभी नेविगेशन अनुरोधों को, दिए गए यूआरएल पर एचटीएमएल के साथ पूरा किया जाएगा. आपको किसी ऐसे एचटीएमएल दस्तावेज़ का यूआरएल पास करना होगा जो आपके प्रीकैश मेनिफ़ेस्ट में शामिल हो. इसका इस्तेमाल सिंगल पेज ऐप्लिकेशन स्थिति में किया जा सकता है, जिसमें आपको सभी नेविगेशन में सामान्य ऐप्लिकेशन शेल एचटीएमएल का इस्तेमाल करना है.
-
RegExp[] ज़रूरी नहीं
रेगुलर एक्सप्रेशन का एक वैकल्पिक कलेक्शन, जो यह तय करता है कि कॉन्फ़िगर किया गया
navigateFallback
व्यवहार किन यूआरएल पर लागू होता है. यह तब मददगार होता है, जब आपकी साइट के यूआरएल के सिर्फ़ एक सबसेट को सिंगल पेज ऐप्लिकेशन का हिस्सा माना जाए. अगरnavigateFallbackDenylist
औरnavigateFallbackAllowlist
, दोनों को कॉन्फ़िगर किया गया हो, तो ब्लॉकलिस्ट से पहले उदाहरण लागू हो जाएगा.ध्यान दें: नेविगेशन के दौरान, इन रेगुलर एक्सप्रेशन का आकलन हर डेस्टिनेशन यूआरएल के हिसाब से किया जा सकता है. जटिल RegExps का इस्तेमाल न करें वरना आपके उपयोगकर्ताओं को आपकी साइट नेविगेट करने में देरी हो सकती है.
-
RegExp[] ज़रूरी नहीं
रेगुलर एक्सप्रेशन का एक वैकल्पिक कलेक्शन, जो यह तय करता है कि कॉन्फ़िगर किया गया
navigateFallback
व्यवहार किन यूआरएल पर लागू होता है. यह तब मददगार होता है, जब आपकी साइट के यूआरएल के सिर्फ़ एक सबसेट को सिंगल पेज ऐप्लिकेशन का हिस्सा माना जाए. अगरnavigateFallbackDenylist
औरnavigateFallbackAllowlist
, दोनों को कॉन्फ़िगर किया गया हो, तो ब्लॉकलिस्ट को प्राथमिकता दी जाएगी.ध्यान दें: नेविगेशन के दौरान, इन रेगुलर एक्सप्रेशन का आकलन हर डेस्टिनेशन यूआरएल के हिसाब से किया जा सकता है. जटिल RegExps का इस्तेमाल न करें वरना आपके उपयोगकर्ताओं को आपकी साइट नेविगेट करने में देरी हो सकती है.
-
बूलियन ज़रूरी नहीं
डिफ़ॉल्ट वैल्यू यह है: false
जनरेट किए गए सर्विस वर्कर में, नेविगेशन प्रीलोड चालू करना है या नहीं. अगर नीति को 'सही है' पर सेट किया जाता है, तो आपको जवाब देने की सही रणनीति सेट अप करने के लिए
runtimeCaching
का भी इस्तेमाल करना होगा. यह रणनीति नेविगेशन के अनुरोधों से मेल खानी चाहिए. साथ ही, पहले से लोड किए गए रिस्पॉन्स का इस्तेमाल भी किया जा सकता है. -
offlineGoogleAnalytics
बूलियन | GoogleAnalyticsInitializeOptions ज़रूरी नहीं
डिफ़ॉल्ट वैल्यू यह है: false
यह नीति कंट्रोल करती है कि ऑफ़लाइन Google Analytics के लिए सहायता शामिल की जाए या नहीं.
true
होने पर,workbox-google-analytics
केinitialize()
पर किया गया कॉल आपके जनरेट किए गए सर्विस वर्कर में जुड़ जाएगा. अगर ऑब्जेक्ट कोObject
पर सेट किया जाता है, तो इसेinitialize()
कॉल में पास कर दिया जाएगा. इससे आपको व्यवहार को अपनी पसंद के मुताबिक बनाने की सुविधा मिलेगी. -
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: '...',
});
प्रॉपर्टी
-
कंस्ट्रक्टर
void
इंजेक्ट मैनिफ़ेस्ट का इंस्टेंस बनाता है.
constructor
फ़ंक्शन ऐसा दिखता है:(config: WebpackInjectManifestOptions) => {...}
-
कॉन्फ़िगरेशन
WebpackInjectManifestOptions
-
returns
-
-
कॉन्फ़िगरेशन
WebpackInjectManifestOptions
प्रॉपर्टी
default
टाइप
ऑब्जेक्ट
प्रॉपर्टी
-
GenerateSW
query
-
InjectManifest
query