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

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

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

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

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

लोकल बंडल बनाया जा रहा है

अगर आपके टूलचेन में वेबपैक या रोलअप जैसा कोई बंडलर शामिल है, तो 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 वैल्यू के साथ एक मैसेज भेजता है.