वर्कबॉक्स-विंडो का इस्तेमाल करना

इस दस्तावेज़ में, workbox-window को अब तक ज़्यादा कवरेज नहीं मिली है. यह window में चलने वाले मॉड्यूल का एक सेट है. इस मॉड्यूल के लक्ष्य हैं:

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

workbox-window को इंपोर्ट और इस्तेमाल करना

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

लोकल बंडल बनाना

अगर आपकी टूलचेन में webpack या Rollup जैसा बंडलर शामिल है, तो workbox-window को स्थानीय तौर पर बंडल किया जा सकता है.

सबसे पहले, अपने ऐप्लिकेशन की प्रोडक्शन डिपेंडेंसी के तौर पर workbox-window इंस्टॉल करें:

npm install workbox-window --save

इसके बाद, अपने ऐप्लिकेशन की JavaScript में, workbox-window से Workbox क्लास import की जा सकती है:

<script type="module">
import {Workbox} from 'workbox-window';

if ('serviceWorker' in navigator) {
  const wb = new Workbox('/sw.js');

  wb.register();
}
</script>

हालांकि, workbox-window काफ़ी छोटा है, लेकिन डाइनैमिक import का इस्तेमाल करके, इसे अपनी वेबसाइट के मुख्य ऐप्लिकेशन लॉजिक से अलग किया जा सकता है. इससे आपके पेज के मुख्य बंडल का साइज़ कम हो सकता है:

<script type="module">
if ('serviceWorker' in navigator) {
  const {Workbox} = await import('workbox-window');

  const wb = new Workbox('/sw.js');
  wb.register();
}
</script>

सीडीएन का इस्तेमाल करना

हमारा सुझाव है कि workbox-window का इस्तेमाल सीडीएन से इंपोर्ट करके करें. हालांकि, यह तरीका आसान नहीं है:

<script type="module">
  import {Workbox} from 'https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-window.prod.mjs';

  if ('serviceWorker' in navigator) {
    const wb = new Workbox('/sw.js');

    wb.register();
  }
</script>

ध्यान रखें कि ऊपर दिए गए उदाहरण में मौजूद <script> एलिमेंट, type="module" एट्रिब्यूट का इस्तेमाल करता है. अगर आपको ब्राउज़र में, बिल्ड चरण के बिना स्टैटिक import स्टेटमेंट का इस्तेमाल करना है, तो ऐसा करना ज़रूरी है. सर्विस वर्कर के साथ काम करने वाले सभी मुख्य ब्राउज़र, JavaScript मॉड्यूल के साथ भी काम करते हैं. इसलिए, किसी भी ब्राउज़र पर यह कोड दिखाया जा सकता है. इसकी वजह यह है कि पुराने ब्राउज़र, "module" एट्रिब्यूट की type वैल्यू वाले <script> एलिमेंट को अनदेखा कर देते हैं.

सर्विस वर्कर को रजिस्टर करना

workbox-window के साथ किसी सर्विस वर्कर को रजिस्टर करने के लिए, Workbox क्लास के register तरीके का इस्तेमाल किया जाता है. जैसे:

import {Workbox} from 'workbox-window';

const wb = new Workbox('/sw.js');
wb.register();

ऐसा लग सकता है कि यह navigator.serviceWorker.register का इस्तेमाल करके, खुद से सेवा वर्कर को रजिस्टर करने जैसा ही है. हालांकि, Workbox.register, सेवा वर्कर को रजिस्टर करने से पहले, window load इवेंट के होने तक इंतज़ार करता है. यह उन स्थितियों में ज़रूरी है जहां प्रीकैशिंग की प्रोसेस शामिल हो. ऐसे में, बैंडविथ के विवाद से पेज के शुरू होने में देरी हो सकती है.

window और सेवा वर्कर के दायरे के बीच कम्यूनिकेट करना

सेवा वर्कर का दायरा, window से अलग होता है. साथ ही, उनके पास window में उपलब्ध एपीआई के सिर्फ़ एक सबसेट का ऐक्सेस होता है. हालांकि, window और सेवा वर्कर के बीच कम्यूनिकेट किया जा सकता है. workbox-window, workbox-window मॉड्यूल के messageSW तरीके की मदद से, दो स्कोप के बीच आसानी से कम्यूनिकेशन की सुविधा देता है.

वर्कबॉक्स, मैसेज के लिए एक खास फ़ॉर्मैट का इस्तेमाल करता है. यह एक ऑब्जेक्ट होता है, जिसमें ये प्रॉपर्टी होती हैं:

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

यहां messageSW के काम करने के तरीके का उदाहरण दिया गया है. यह उदाहरण, आपके सेवा वर्कर में मौजूद कोड से शुरू होता है:

// sw.js
const SW_VERSION = '1.0.0';

self.addEventListener('message', (event) => {
  if (event.data.type === 'GET_VERSION') {
    event.ports[0].postMessage(SW_VERSION);
  }
});

इसके बाद, अपने वेबपेज में यह कोड डालें:

const wb = new Workbox('/sw.js');
wb.register();

const swVersion = await wb.messageSW({type: 'GET_VERSION'});
console.log('Service Worker version:', swVersion);

ऐसे कई मामले हो सकते हैं जिनमें सर्विस वर्कर और window के बीच बातचीत करना फ़ायदेमंद हो सकता है. जैसे, सर्विस वर्कर अपडेट उपलब्ध होने पर, उपयोगकर्ता को सूचना देना. वह रेसिपी self.skipWaiting के लिए messageSkipWaiting नाम के एक खास हेल्पर तरीके पर निर्भर करती है, जो SKIP_WAITING के type मान के साथ एक मैसेज भेजती है.