वर्कबॉक्स-sw

workbox-sw मॉड्यूल शुरू करने और चलाने का बहुत आसान तरीका उपलब्ध कराता है वर्कबॉक्स मॉड्यूल के साथ, Workbox मॉड्यूल को लोड करने की प्रोसेस को आसान बना सकता है और में कुछ आसान सहायक तरीके बताए गए हैं.

हमारे सीडीएन के ज़रिए या workbox-sw का इस्तेमाल वर्कबॉक्स फ़ाइलों के सेट के साथ किया जा सकता है भी डाउनलोड किया जा सकता है.

CDN के ज़रिए Workbox SW का इस्तेमाल करना

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

importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);

इसके साथ आपके सर्विस वर्कर में workbox नेमस्पेस होगा सभी Workbox मॉड्यूल का ऐक्सेस देती हो.

workbox.precaching.*
workbox.routing.*
etc

जैसे ही आप अतिरिक्त मॉड्यूल का इस्तेमाल शुरू करते हैं, वैसे ही कुछ जादू होता है.

पहली बार किसी मॉड्यूल का रेफ़रंस देने पर, workbox-sw इसका पता लगा लेगा और मॉड्यूल उपलब्ध कराने से पहले उसे लोड करें. इसमें जाकर देखें कि DevTools में नेटवर्क टैब.

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

सीडीएन के बजाय लोकल वर्कबॉक्स फ़ाइलों का इस्तेमाल करना

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

सबसे आसान तरीका है कि workbox-cli के copyLibraries कमांड से फ़ाइलों को हासिल किया जाए. इसके बाद, workbox-sw modulePathPrefix कॉन्फ़िगरेशन विकल्प की मदद से, ये फ़ाइलें कहां मिलेंगी.

अगर फ़ाइलों को /third_party/workbox-vX.Y.Z/ में रखा जाता है, तो उनका इस्तेमाल इस तरह करें:

importScripts('/third_party/workbox-vX.Y.Z/workbox-sw.js');

workbox.setConfig({
  modulePathPrefix: '/third_party/workbox-vX.Y.Z/',
});

एसिंक्रोनस इंपोर्ट से बचें

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

इस पाबंदी का उल्लंघन न हो, इसके लिए सबसे सही तरीका है कि आप workbox.* नेमस्पेस, जो किसी भी इवेंट हैंडलर या एसिंक्रोनस फ़ंक्शन के बाहर हैं.

उदाहरण के लिए, नीचे दिया गया टॉप-लेवल सर्विस वर्कर कोड ठीक है:

importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);

// This will work!
workbox.routing.registerRoute(
  ({request}) => request.destination === 'image',
  new workbox.strategies.CacheFirst()
);

हालांकि, अगर आपने workbox.strategies का रेफ़रंस कहीं और नहीं दिया है, तो नीचे दिए गए कोड से आपको समस्या हो सकती है सर्विस वर्कर:

importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);

self.addEventListener('fetch', event => {
  if (event.request.url.endsWith('.png')) {
    // Oops! This causes workbox-strategies.js to be imported inside a fetch handler,
    // outside of the initial, synchronous service worker execution.
    const cacheFirst = new workbox.strategies.CacheFirst();
    event.respondWith(cacheFirst.handle({request: event.request}));
  }
});

अगर आपको ऐसा कोड लिखना है जो इस पाबंदी का पालन न करता हो, तो इवेंट हैंडलर के बाहर importScripts() कॉल को ट्रिगर करने के लिए, workbox.loadModule() तरीका:

importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);

// This will trigger the importScripts() for workbox.strategies and its dependencies:
workbox.loadModule('workbox-strategies');

self.addEventListener('fetch', event => {
  if (event.request.url.endsWith('.png')) {
    // Referencing workbox.strategies will now work as expected.
    const cacheFirst = new workbox.strategies.CacheFirst();
    event.respondWith(cacheFirst.handle({request: event.request}));
  }
});

इसके अलावा, अपने इवेंट हैंडलर के बाहर भी काम के नेमस्पेस का रेफ़रंस बनाया जा सकता है, और फिर बाद में उस संदर्भ का इस्तेमाल करें:

importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);

// This will trigger the importScripts() for workbox.strategies and its dependencies:
const {strategies} = workbox;

self.addEventListener('fetch', event => {
  if (event.request.url.endsWith('.png')) {
    // Using the previously-initialized strategies will work as expected.
    const cacheFirst = new strategies.CacheFirst();
    event.respondWith(cacheFirst.handle({request: event.request}));
  }
});

डीबग या प्रोडक्शन बिल्ड का हर हाल में इस्तेमाल करें

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

डिफ़ॉल्ट रूप से, workbox-sw, लोकल होस्ट वाली साइटों के लिए डीबग बिल्ड का इस्तेमाल करेगा. लेकिन किसी भी दूसरे ऑरिजिन के लिए यह प्रोडक्शन बिल्ड का इस्तेमाल करेगा.

अगर आपको डीबग या प्रोडक्शन बिल्ड ज़बरदस्ती करना है, तो debug कॉन्फ़िगरेशन सेट किया जा सकता है विकल्प:

workbox.setConfig({
  debug: true,
});

workbox-sw का इस्तेमाल करने के लिए, इंपोर्ट स्टेटमेंट का इस्तेमाल करके कोड को बदलें

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

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

यह काम करता है क्योंकि npm पर प्रकाशित हर Workbox सर्विस वर्कर पैकेज वैश्विक workbox नेमस्पेस पर उपलब्ध है नाम का camelCase वर्शन (उदाहरण के लिए, workbox-precaching एनपीएम पैकेज से एक्सपोर्ट किए गए सभी मॉड्यूल यहां मिल सकते हैं workbox.precaching.*. साथ ही, यहां से एक्सपोर्ट किए गए सभी मॉड्यूल workbox-background-sync एनपीएम वाला पैकेज यहां मिल सकता है workbox.backgroundSync.*).

उदाहरण के लिए, यहां कुछ कोड दिया गया है, जो रेफ़रंस के तौर पर दिए गए import स्टेटमेंट का इस्तेमाल करता है वर्कबॉक्स मॉड्यूल:

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {CacheableResponse} from 'workbox-cacheable-response';

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    plugins: [new CacheableResponsePlugin({statuses: [0, 200]})],
  })
);

और यह वही कोड है जिसे workbox-sw का इस्तेमाल करने के लिए फिर से लिखा गया है (ध्यान दें कि सिर्फ़ इंपोर्ट स्टेटमेंट बदल गए हैं— लॉजिक को छू नहीं गया है):

importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);

const {registerRoute} = workbox.routing;
const {CacheFirst} = workbox.strategies;
const {CacheableResponse} = workbox.cacheableResponse;

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    plugins: [new CacheableResponsePlugin({statuses: [0, 200]})],
  })
);