वर्कबॉक्स-sw

workbox-sw मॉड्यूल, Workbox मॉड्यूल के

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

सीडीएन के ज़रिए 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 कमांड की मदद से फ़ाइलें पाएं. इसके बाद, modulePathPrefix कॉन्फ़िगरेशन विकल्प की मदद से बताएं कि workbox-sw को ये फ़ाइलें कहां मिलेंगी.

अगर आप फ़ाइलों को /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/',
});

एक साथ काम नहीं करने वाली प्रोसेस से जुड़े डेटा को इंपोर्ट करने से बचें

हुड के तहत, पहली बार नए मॉड्यूल लोड करने में संबंधित JavaScript फ़ाइल के पाथ के साथ importScripts() को कॉल करना शामिल है (या तो सीडीएन पर होस्ट की गई हो या स्थानीय यूआरएल के ज़रिए). दोनों ही मामलों में, एक अहम पाबंदी लागू होती है: 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}));
  }
});

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

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}));
  }
});

ध्यान दें:Chrome के कुछ वर्शन पर यह पाबंदी लागू नहीं होती है. साथ ही, importScripts() को एसिंक्रोनस कॉल करने पर, उम्मीद के मुताबिक कार्रवाई नहीं होती है. डेवलपर को सलाह दी जाती है कि वे काम न करने वाले इस व्यवहार पर भरोसा न करें. Chrome इस इस्तेमाल को अस्वीकार करने की शुरुआत करने के लिए, बदलाव करने की प्लान करता है, ताकि दूसरे ब्राउज़र की सुविधाओं के हिसाब से काम किया जा सके.

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

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

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

डीबग या प्रोडक्शन बिल्ड लागू करने के लिए, debug कॉन्फ़िगरेशन विकल्प को सेट करें:

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

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

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

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

यह इसलिए काम करता है क्योंकि npm पर प्रकाशित किया गया हर Workbox सर्विस वर्कर पैकेज, नाम के camelCase वर्शन के ज़रिए ग्लोबल workbox नेमस्पेस पर भी उपलब्ध है (उदाहरण के लिए, 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]})],
  })
);