वर्कबॉक्स-विंडो

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

workbox-window की मुख्य सुविधाएं/लक्ष्य ये हैं:

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

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

workbox-window पैकेज का मुख्य एंट्री पॉइंट Workbox क्लास है और तो आप इसे हमारे सीडीएन से या किसी लोकप्रिय टैग का इस्तेमाल करके अपने कोड में इंपोर्ट कर सकते हैं JavaScript बंडलिंग टूल.

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

हमारे सीडीएन से, अपनी साइट पर Workbox क्लास को आसानी से इंपोर्ट करने का तरीका:

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

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

    wb.register();
  }
</script>

ध्यान दें कि इस उदाहरण में <script type="module"> और import स्टेटमेंट का इस्तेमाल इन कामों के लिए किया गया है Workbox क्लास लोड करें. हो सकता है कि आपको लगे कि आपको इसे ट्रांसपाइल करना होगा कोड को पुराने ब्राउज़र में काम करने के लिए डिज़ाइन करना होगा, जो असल में ज़रूरी नहीं है.

सर्विस वर्कर के साथ काम करने वाले सभी प्रमुख ब्राउज़र भी नेटिव JavaScript मॉड्यूल के साथ काम करते हैं, इसलिए यह किसी भी ब्राउज़र पर इस कोड को प्रस्तुत करना ठीक है (पुराने ब्राउज़र इसे अनदेखा कर देंगे).

JavaScript बंडलर के साथ Workbox लोड किया जा रहा है

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

पहला कदम यह है कि इंस्टॉल करें workbox-window आपके ऐप्लिकेशन की डिपेंडेंसी के तौर पर:

npm install workbox-window

इसके बाद, अपने ऐप्लिकेशन की किसी एक JavaScript फ़ाइल में, इसके हिसाब से import वर्कबॉक्स workbox-window पैकेज नाम का संदर्भ दे रहे हैं:

import {Workbox} from 'workbox-window';

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

  wb.register();
}

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

भले ही workbox-window बहुत छोटा है, लेकिन इसकी कोई वजह नहीं है को आपकी साइट के कोर ऐप्लिकेशन लॉजिक के साथ लोड करना ज़रूरी है, जैसे कि सर्विस वर्कर, स्वाभाविक रूप से, ये लगातार बढ़ने वाले होते हैं.

if ('serviceWorker' in navigator) {
  const {Workbox} = await import('workbox-window');

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

बंडल करने के बेहतर सिद्धांत

सर्विस वर्कर में चलने वाले Workbox पैकेज के उलट, बिल्ड फ़ाइलें workbox-window ने रेफ़र किया main और इसमें module फ़ील्ड package.json को ES5 में ट्रांसपिल किया गया है. इससे वे मौजूदा ऐप्लिकेशन के साथ काम करते हैं बनाने वाले टूल—इनमें से कुछ डेवलपर को ऐसा कुछ भी ट्रांसपाइल करने नहीं देते node_module डिपेंडेंसी.

अगर आपका बिल्ड सिस्टम आपको अपनी डिपेंडेंसी को ट्रांसपाइल करने की अनुमति देता है (या अगर की आवश्यकता नहीं है), तो किसी विशिष्ट कोड को आयात करना सोर्स फ़ाइल का इस्तेमाल करें.

यहां Workbox को इंपोर्ट करने के अलग-अलग तरीकों के बारे में बताया गया है. साथ ही, इसकी जानकारी भी दी गई है हर एक चीज़ क्या लौटाएगी:

// Imports a UMD version with ES5 syntax
// (pkg.main: "build/workbox-window.prod.umd.js")
const {Workbox} = require('workbox-window');

// Imports the module version with ES5 syntax
// (pkg.module: "build/workbox-window.prod.es5.mjs")
import {Workbox} from 'workbox-window';

// Imports the module source file with ES2015+ syntax
import {Workbox} from 'workbox-window/Workbox.mjs';

उदाहरण

Workbox क्लास इंपोर्ट करने के बाद, उसका इस्तेमाल रजिस्टर करने और सर्विस वर्कर से इंटरैक्ट करने में मदद करता है. यहां कुछ ऐसे तरीकों के उदाहरण दिए गए हैं जिन्हें इस्तेमाल किया जा सकता है आपके आवेदन में Workbox:

सर्विस वर्कर को रजिस्टर करें और सर्विस वर्कर के पहली बार चालू होने पर, उपयोगकर्ता को इसकी सूचना दें

कई वेब ऐप्लिकेशन उपयोगकर्ता सर्विस वर्कर, ऐसेट को प्रीकैश मेमोरी में सेव करते हैं, ताकि उनका ऐप्लिकेशन काम कर सके को ऑफ़लाइन होने पर भी अपग्रेड नहीं किया जा सकता. कुछ मामलों में, इसके बारे में जानकारी देने से इस बात का ध्यान रखें कि ऐप्लिकेशन अब ऑफ़लाइन उपलब्ध है.

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

wb.addEventListener('activated', event => {
  // `event.isUpdate` will be true if another version of the service
  // worker was controlling the page when this version was registered.
  if (!event.isUpdate) {
    console.log('Service worker activated for the first time!');

    // If your service worker is configured to precache assets, those
    // assets should all be available now.
  }
});

// Register the service worker after event listeners have been added.
wb.register();

अगर किसी सर्विस वर्कर ने इंस्टॉल किया हो, लेकिन उसके चालू होने के इंतज़ार में अटक जाए, तो उपयोगकर्ता को सूचित करें

जब किसी मौजूदा सर्विस वर्कर के कंट्रोल वाले पेज पर नई सेवा रजिस्टर की जाती है वर्कर, डिफ़ॉल्ट रूप से वह सर्विस वर्कर तब तक चालू नहीं होगा, जब तक सभी क्लाइंट यह पूरी तरह से अनलोड हो गया है.

आम तौर पर, इससे डेवलपर को भ्रम हो सकता है. खास तौर पर, उन मामलों में जहां मौजूदा पेज को फिर से लोड करने से नया सर्विस वर्कर चालू नहीं होता.

भ्रम की स्थिति को कम करने और स्थिति को साफ़ तौर पर बताने के लिए, Workbox क्लास एक waiting इवेंट उपलब्ध कराती है. आपके पास इसे सुनने का विकल्प है:

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

wb.addEventListener('waiting', event => {
  console.log(
    `A new service worker has installed, but it can't activate` +
      `until all tabs running the current version have fully unloaded.`
  );
});

// Register the service worker after event listeners have been added.
wb.register();

उपयोगकर्ता को workbox-broadcast-update पैकेज से कैश मेमोरी अपडेट होने की सूचना दें

workbox-broadcast-update पैकेज, कैश मेमोरी से कॉन्टेंट दिखाने (तेज़ डिलीवरी के लिए) करने का शानदार तरीका है. साथ ही, इसकी मदद से उपयोगकर्ता को उस कॉन्टेंट के अपडेट के बारे में बता पाएं. इसके लिए, फिर से पुष्टि करने के दौरान पुरानी रणनीति).

विंडो से ये अपडेट पाने के लिए, इसके message इवेंट सुनें CACHE_UPDATED टाइप करें:

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

wb.addEventListener('message', event => {
  if (event.data.type === 'CACHE_UPDATED') {
    const {updatedURL} = event.data.payload;

    console.log(`A newer version of ${updatedURL} is available!`);
  }
});

// Register the service worker after event listeners have been added.
wb.register();

सर्विस वर्कर को कैश मेमोरी में सेव करने के लिए यूआरएल की सूची भेजना

कुछ ऐप्लिकेशन के लिए, यह मुमकिन है कि आप उन सभी ऐसेट के बारे में जानें जो बिल्ड के समय प्री-कैश किया जाता है, लेकिन कुछ ऐप्लिकेशन पूरी तरह से अलग पेज पर काम करते हैं, उपयोगकर्ता किस यूआरएल पर सबसे पहले पहुंचता है.

बाद वाली कैटगरी के ऐप्लिकेशन के लिए, सिर्फ़ ऐसेट को कैश मेमोरी में सेव करना सही रहता है जिसके लिए उपयोगकर्ता को उस खास पेज की ज़रूरत होती है जिस पर वे गए थे. इसका इस्तेमाल करते समय: workbox-routing पैकेज, तो आप यह कर सकते है: आपके राऊटर को कैश मेमोरी में सेव करने के लिए यूआरएल की सूची भेजता है. यह उन यूआरएल को, कैश मेमोरी के हिसाब से कैश मेमोरी में सेव करेगा पर लागू होता है.

यह उदाहरण किसी भी समय, पेज पर लोड किए गए यूआरएल की सूची राऊटर को भेजता है नया सर्विस वर्कर चालू किया गया. ध्यान दें, सभी यूआरएल भेजना ठीक है, क्योंकि सर्विस वर्कर में किसी तय रूट से मेल खाने वाले यूआरएल कैश मेमोरी में सेव किए जाएंगे:

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

wb.addEventListener('activated', event => {
  // Get the current page URL + all resources the page loaded.
  const urlsToCache = [
    location.href,
    ...performance.getEntriesByType('resource').map(r => r.name),
  ];
  // Send that list of URLs to your router in the service worker.
  wb.messageSW({
    type: 'CACHE_URLS',
    payload: {urlsToCache},
  });
});

// Register the service worker after event listeners have been added.
wb.register();

सर्विस वर्कर के लाइफ़साइकल से जुड़े खास पल

सर्विस वर्कर का लाइफ़साइकल जटिल है और उसे पूरी तरह से समझना मुश्किल हो सकता है. इसकी एक वजह यह है इतना जटिल यह है कि इसे सभी संभावित उपयोगों के लिए सभी किनारे के मामलों को हैंडल करना चाहिए सर्विस वर्कर (उदाहरण के लिए, एक से ज़्यादा सर्विस वर्कर का पंजीकरण करना, अलग-अलग फ़्रेम में अलग-अलग सर्विस वर्कर, इनके साथ सर्विस वर्कर को रजिस्टर करना अलग-अलग नाम वगैरह).

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

सर्विस वर्कर लाइफ़साइकल के लिए Workbox क्लास इस आसान व्यू को अपनाती है सभी सर्विस वर्कर के रजिस्ट्रेशन को दो कैटगरी में बांटकर: इंस्टेंस का मालिक, रजिस्टर किया गया सर्विस वर्कर, और बाहरी सर्विस वर्कर:

• रजिस्टर किया गया सर्विस वर्कर: ऐसा सर्विस वर्कर जो register() को कॉल करने वाले Workbox इंस्टेंस का नतीजा या पहले से चालू अगर register() को कॉल करने से रजिस्ट्रेशन पर updatefound इवेंट ट्रिगर नहीं होता, तो सर्विस वर्कर.
• बाहरी सर्विस वर्कर: कोई सर्विस वर्कर, जिसने इंस्टॉल करना शुरू कर दिया अलग से कॉल किया जा रहा है. यह Workbox इंस्टेंस से अलग है, जो register() को कॉल करता है. आम तौर पर यह तब होता है, जब कोई उपयोगकर्ता आपकी साइट का नया वर्शन किसी दूसरे टैब में खोलता है. जब कोई इवेंट किसी बाहरी सर्विस वर्कर से शुरू हुआ है, यानी इवेंट का isExternal प्रॉपर्टी को true पर सेट किया जाएगा.

इन दो तरह के सर्विस वर्कर को ध्यान में रखते हुए, यहां सभी सर्विस वर्कर के लाइफ़साइकल के दौरान मिलने वाले खास पल, और डेवलपर के सुझाव और उन्हें कैसे मैनेज करें:

पहली बार सर्विस वर्कर इंस्टॉल होने पर

हो सकता है कि पहली बार किसी सर्विस वर्कर को इंस्टॉल करने पर आप उसे ठीक करना चाहें यह काम करने के तरीके से अलग है.

workbox-window में, पहले वर्शन के बीच अंतर किया जा सकता है इनमें से किसी भी जगह पर isUpdate प्रॉपर्टी को देखकर, इंस्टॉल करने और आने वाले समय में होने वाले अपडेट डालें. पहली बार इंस्टॉलेशन के लिए, isUpdate false.

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

wb.addEventListener('installed', event => {
  if (!event.isUpdate) {
    // First-installed code goes here...
  }
});

wb.register();

सर्विस वर्कर का अपडेट किया गया वर्शन मिलने पर

जब कोई नया सर्विस वर्कर इंस्टॉल करना शुरू करता है, लेकिन मौजूदा वर्शन वर्तमान में इंस्टॉल होता है पेज को कंट्रोल करने से, इन सभी इवेंट की isUpdate प्रॉपर्टी true होना चाहिए.

आम तौर पर, इस स्थिति में आपकी प्रतिक्रिया, पहली रिपोर्ट से अलग होती है को इंस्टॉल किया जा सकता है, क्योंकि आपको यह प्रबंधित करना होता है कि उपयोगकर्ता को यह अपडेट कब और कैसे मिलेगा.

सर्विस वर्कर का अनचाहा वर्शन मिलने पर

कभी-कभी उपयोगकर्ता आपकी साइट को बैकग्राउंड टैब में काफ़ी देर तक खुला रख सकते हैं समय. वे आपकी साइट पर, नया टैब खोल सकते हैं और नेविगेट करने के लिए, वेबसाइट पर जा सकते हैं तो बैकग्राउंड टैब में आपकी साइट पहले से ही खुली हुई हो. ऐसे मामलों में, एक ही समय पर आपकी साइट के दो वर्शन का इस्तेमाल किया जा सकता है और डेवलपर के रूप में आपके लिए कुछ दिलचस्प समस्याएं पेश कर सकता है.

ऐसी स्थिति पर विचार करें जिसमें आपकी साइट के v1 और टैब B का टैब A चल रहा हो v2. टैब B के लोड होने पर, उसे आपकी सेवा के वर्शन से कंट्रोल किया जाएगा वह वर्कर जो v1 के साथ शिप किया गया था, लेकिन सर्वर से वापस मिला पेज (अगर नेटवर्क को प्राथमिकता देने के लिए कैश मेमोरी की रणनीति में आपके सभी v2 एसेट शामिल होंगे.

आम तौर पर, टैब B में कोई समस्या नहीं होती, क्योंकि जब आपने वर्शन 2 लिखा था, तब से कोड की तरह, आपको अपने v1 कोड के काम करने का तरीका पता था. हालांकि, यह टैब A के लिए समस्या है, क्योंकि आपके v1 कोड ने यह अनुमान नहीं लगाया जा सका कि आपके v2 कोड में बदलाव हो सकते हैं.

इन स्थितियों से निपटने के लिए, workbox-window लाइफ़साइकल को भी डिस्पैच करता है इवेंट जब यह किसी "बाहरी" से अपडेट का पता लगाता है सर्विस वर्कर, जहां बाहरी का मतलब, ऐसे किसी भी वर्शन से है जो मौजूदा Workbox का वर्शन नहीं है इंस्टेंस रजिस्टर किया गया.

Workbox v6 और इसके बाद के वर्शन में, ये इवेंट रिकॉर्ड किए गए इवेंट के बराबर हैं इसमें हर इवेंट के लिए isExternal: true प्रॉपर्टी सेट की जाती है ऑब्जेक्ट है. अगर आपके वेब ऐप्लिकेशन को "बाहरी सोर्स से" सर्विस वर्कर में जोड़ा जाता है, तो आप अपने इवेंट हैंडलर में उस प्रॉपर्टी की जांच कर सकते हैं.

सामान्य गलतियों से बचना

Workbox की सबसे अच्छी सुविधाओं में से एक है डेवलपर के लिए डेटा लॉग करना. और यह खास तौर पर workbox-window के लिए सही है.

हम जानते हैं कि सर्विस वर्कर के साथ डेवलप करना अक्सर भ्रम की स्थिति पैदा कर सकता है. आपकी उम्मीद के उलट होता है, लेकिन यह जानना मुश्किल हो सकता है कि ऐसा क्यों हुआ.

उदाहरण के लिए, सर्विस वर्कर में कोई बदलाव करने और पेज को फिर से लोड करने पर, हो सकता है कि आपको अपने ब्राउज़र में वह बदलाव न दिखे. इसकी सबसे संभावित वजह, आपका सर्विस वर्कर अब भी चालू होने का इंतज़ार कर रहा है.

हालांकि, Workbox क्लास में सर्विस वर्कर को रजिस्टर करने पर आपको डेवलपर कंसोल में लाइफ़साइकल की स्थिति में हुए सभी बदलावों की सूचना दी जाती है, जिन्हें इससे यह समझने में मदद मिलती है कि चीज़ें आपकी उम्मीद के मुताबिक क्यों नहीं हैं.

इसके अलावा, पहली बार सर्विस वर्कर का इस्तेमाल करते समय डेवलपर एक आम गलती कर देते हैं उस सेवा कर्मचारी को गलत दायरा.

ऐसा होने से रोकने के लिए, Workbox क्लास आपको चेतावनी देगी कि सर्विस वर्कर को दर्ज करने वाला पेज उस सर्विस वर्कर के दायरे में नहीं आता. यह आपको उन मामलों में भी चेतावनी देगा जहां आपका सर्विस वर्कर सक्रिय है, लेकिन अभी तक नहीं पेज को कंट्रोल कर रही हूँ:

विंडो टू सर्विस वर्कर कम्यूनिकेशन

सबसे बेहतर सर्विस वर्कर के इस्तेमाल में, सर्विस वर्कर और विंडो. Workbox क्लास इसमें भी मदद करती है messageSW() तरीका देने से, इंस्टेंस का postMessage() हो जाएगा रजिस्टर्ड सर्विस वर्कर से कनेक्ट होते हैं और उनके जवाब का इंतज़ार करते हैं.

सर्विस वर्कर को किसी भी फ़ॉर्मैट में डेटा भेजा जा सकता है. हालांकि, शेयर किए गए फ़ॉर्मैट में सभी Workbox पैकेज में तीन प्रॉपर्टी वाला एक ऑब्जेक्ट है (बाद के दो पैकेज, वैकल्पिक):

messageSW() तरीके से भेजे गए मैसेज, MessageChannel का इस्तेमाल करते हैं. इसलिए, मैसेज पाने वाला व्यक्ति उनका जवाब दे सकती है. किसी मैसेज का जवाब देने के लिए कॉल किया जा सकता है आपके मैसेज इवेंट लिसनर में event.ports[0].postMessage(response). कॉन्टेंट बनाने messageSW() तरीका ऐसा प्रॉमिस प्रॉमिस करता है जो response का समाधान कर देगा जिसे आपने जवाब दिया हो.

यहां विंडो से सर्विस वर्कर को मैसेज भेजने का एक उदाहरण दिया गया है और मैं जवाब नहीं दे पा रही हूँ. पहला कोड ब्लॉक, मैसेज लिसनर है जो सर्विस वर्कर और दूसरा ब्लॉकWorkbox से लिंक करें और उत्तर की इंतज़ार करें:

sw.js में मौजूद कोड:

const SW_VERSION = '1.0.0';

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

main.js में कोड (विंडो में चल रहा है):

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

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

वर्शन के साथ काम न करने वाले वर्शन को मैनेज करना

ऊपर दिया गया उदाहरण दिखाता है कि सर्विस वर्कर की जांच कैसे की जा सकती है खोलें. इस उदाहरण का इस्तेमाल किया गया है, क्योंकि विंडो और सर्विस वर्कर के बीच मैसेज पाना और रोकना बेहद ज़रूरी है, हो सकता है कि आपका सर्विस वर्कर और इस समस्या को हल करने का तरीका भी बताएंगे कि आपकी साइट पर आपका पेज कोड चल रहा है या नहीं की समस्या इस बात पर निर्भर करती है कि आप पेजों को नेटवर्क से पहले दिखाते हैं या नहीं या कैश मेमोरी को प्राथमिकता दें.

नेटवर्क पहले

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

इस संभावना को समझना ज़रूरी है, क्योंकि अगर JavaScript लोड होती है आपके पेज के एक पुराने वर्शन को एक संदेश भेजता है, तो सर्विस वर्कर, हो सकता है कि उस वर्शन को प्रतिक्रिया देने का तरीका न पता हो (या वह असंगत फ़ॉर्मैट है).

इस वजह से, हमेशा अपने सर्विस वर्कर के बारे में जानकारी देना और उसकी जांच करना अच्छा रहता है इस्तेमाल करने से पहले, अपने ऐप्लिकेशन के वर्शन के साथ काम करते हैं.

उदाहरण के लिए, ऊपर दिए गए कोड में, अगर उसके द्वारा लौटाया गया सर्विस वर्कर वर्शन messageSW() कॉल, उम्मीद किए गए वर्शन से पुराना है. इसलिए, इंतज़ार करना बेहतर होगा जब तक कोई अपडेट नहीं मिलता (यह तब होता है जब आप register() को कॉल करते हैं). पर फिर आप उपयोगकर्ता को सूचित कर सकते हैं या अपडेट भेज सकते हैं या आप मैन्युअल रूप से इंतज़ार करने वाले चरण को छोड़ें नए सर्विस वर्कर को तुरंत सक्रिय कर सकें.

पहले कैश मेमोरी

पेज की कैश मेमोरी को दिखाते समय, पेजों को नेटवर्क को प्राथमिकता देने के मामले में ये काम किए जाते हैं- पहले, आप जानते हैं कि आपका पेज शुरुआत में हमेशा अपना सर्विस वर्कर (जैसा कि इसे ही बनाया गया है). इस वजह से, यह सुरक्षित है messageSW() को तुरंत इस्तेमाल करने के लिए.

हालांकि, अगर आपके सर्विस वर्कर का अपडेट किया गया वर्शन मिलता है और वह चालू हो जाता है जब आपके पेज पर register() पर कॉल किया जाता है (मतलब, जान-बूझकर इंतज़ार करने वाले चरण को छोड़ना), इस पर मैसेज भेजना शायद सुरक्षित न हो.

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

इंतज़ार करने के विकल्प को स्किप करें

विंडो टू सर्विस वर्कर के लिए मैसेज भेजने का एक सामान्य इस्तेमाल तरीका है {type: 'SKIP_WAITING'} मैसेज, जो इंस्टॉल किए गए सर्विस वर्कर को निर्देश देता है इंतज़ार की प्रक्रिया को छोड़ें और चालू करें.

Workbox v6 में, messageSkipWaiting() तरीके का इस्तेमाल {type: 'SKIP_WAITING'} मौजूदा सर्विस वर्कर का रजिस्ट्रेशन. अगर वह भी इंतज़ार कर रहा है.

workbox-window.messageSW(
  sw: ServiceWorker,
  data: object,
)