वापस ऑनलाइन होने पर, फिर से अनुरोध भेजने की कोशिश की जा रही है

जब किसी वेब सर्वर के लिए अनुरोध किया जाता है, तो उसकी गलती हो सकती है. ऐसा इसलिए हो सकता है, क्योंकि उपयोगकर्ता ने कनेक्टिविटी खो दी है या रिमोट सर्वर काम नहीं कर रहा है.

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

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

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

बुनियादी इस्तेमाल

BackgroundSyncPlugin को workbox-background-sync मॉड्यूल से एक्सपोर्ट किया जाता है. इसका इस्तेमाल फ़ेल हो चुके अनुरोधों की सूची बनाने और आने वाले समय में sync इवेंट ट्रिगर होने पर फिर से कोशिश करने के लिए किया जा सकता है:

import {BackgroundSyncPlugin} from 'workbox-background-sync';
import {registerRoute} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

const bgSyncPlugin = new BackgroundSyncPlugin('myQueueName', {
  maxRetentionTime: 24 * 60 // Retry for max of 24 Hours (specified in minutes)
});

registerRoute(
  /\/api\/.*\/*.json/,
  new NetworkOnly({
    plugins: [bgSyncPlugin]
  }),
  // An optional third parameter specifies the request method
  'POST'
);

यहां BackgroundSyncPlugin को एपीआई रूट के पीओएसटी अनुरोधों से मेल खाने वाले रूट पर लागू किया जाता है, जो JSON डेटा हासिल करता है. अगर उपयोगकर्ता ऑफ़लाइन है, तो उसके ऑनलाइन होने पर BackgroundSyncPlugin, फिर से अनुरोध करने की कोशिश करेगा. हालांकि, यह अनुरोध सिर्फ़ एक दिन तक किया जा सकता है.

बेहतर इस्तेमाल के लिए

workbox-background-sync से एक Queue क्लास भी मिलती है, जिसे आप इंस्टैंशिएट कर सकते हैं और फ़ेल हो चुके अनुरोधों को जोड़ सकते हैं. BackgroundSyncPlugin की तरह ही, फ़ेल हो चुके अनुरोधों को IndexedDB में सेव किया जाता है और जब ब्राउज़र को लगता है कि कनेक्टिविटी बहाल हो गई है, तब कोशिश की जाती है.

सूची बनाई जा रही है

सूची बनाने के लिए, सूची के नाम को दिखाने वाली स्ट्रिंग के साथ Queue ऑब्जेक्ट को इंस्टैंशिएट करें:

import {Queue} from 'workbox-background-sync';

const queue = new Queue('myQueueName');

सूची का नाम, टैग के नाम के हिस्से के रूप में इस्तेमाल किया जाता है. यह नाम, ग्लोबल SyncManager से मिलने वाले register() तरीके से बनाया जाता है. यह IndexedDB डेटाबेस से मिले ऑब्जेक्ट स्टोर के लिए भी इस्तेमाल किया जाने वाला नाम है.

सूची में अनुरोध जोड़े जा रहे हैं

Queue इंस्टेंस बनाने के बाद, उसके pushRequest() तरीके का इस्तेमाल करके, इसमें पूरे न हो पाने वाले अनुरोध जोड़े जा सकते हैं:

import {Queue} from 'workbox-background-sync';

const queue = new Queue('myQueueName');

self.addEventListener('fetch', (event) => {
  // Add in your own criteria here to return early if this
  // isn't a request that should use background sync.
  if (event.request.method !== 'POST') {
    return;
  }

  const bgSyncLogic = async () => {
    try {
      const response = await fetch(event.request.clone());
      return response;
    } catch (error) {
      await queue.pushRequest({request: event.request});
      return error;
    }
  };

  event.respondWith(bgSyncLogic());
});

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

workbox-background-sync को टेस्ट किया जा रहा है

बैकग्राउंड सिंक की सुविधा की जांच करना मुश्किल हो सकता है. हालांकि, Chrome DevTools में ऐसा किया जा सकता है. मौजूदा सबसे सही तरीका कुछ ऐसा है:

1. आपके सर्विस वर्कर को रजिस्टर करने वाला पेज लोड करें.
2. अपने कंप्यूटर का नेटवर्क कनेक्शन या वेब सर्वर बंद कर दें. Chrome DevTools में ऑफ़लाइन टॉगल का इस्तेमाल न करें! ऑफ़लाइन चेकबॉक्स सिर्फ़ पेज पर किए गए अनुरोधों पर असर डालता है, लेकिन सर्विस वर्कर के अनुरोध लगातार प्रोसेस होते रहेंगे.
3. ऐसे नेटवर्क अनुरोध करें जिन्हें workbox-background-sync के साथ सूची में होना चाहिए. आप Chrome DevTools > Application > IndexedDB > workbox-background-sync > requests में जाकर, सूची में दिए गए अनुरोधों की जांच कर सकते हैं.
4. अब या तो नेटवर्क कनेक्टिविटी को पहले जैसा करें या अपना वेब सर्वर फिर से चालू करें.
5. Chrome DevTools > Application > Service Workers पर जाकर, sync इवेंट को पहले ही ज़बरदस्ती चालू करें. workbox-background-sync:<your queue name> टैग का नाम डालें. यहां <your queue name> आपकी सेट की गई सूची का नाम होगा.
6. "सिंक करें" पर क्लिक करें बटन.
   
7. अब आपको ऐसे नेटवर्क अनुरोध दिखेंगे जो पूरे नहीं हो पाए. ऐसा होने पर, वे अनुरोध फिर से प्रोसेस हो जाएंगे. इस वजह से, IndexedDB स्टोर खाली होना चाहिए, क्योंकि अनुरोध सफलतापूर्वक फिर से चलाए गए हैं.

नतीजा

पूरे न हो पाने वाले नेटवर्क के अनुरोधों की फिर से कोशिश करने के लिए, workbox-background-sync का इस्तेमाल करना, उपयोगकर्ता के अनुभव को बेहतर बनाने और आपके ऐप्लिकेशन को भरोसेमंद बनाने का एक बेहतरीन तरीका हो सकता है. जैसे, उपयोगकर्ताओं को पूरे न हो पाने वाले एपीआई अनुरोधों को फिर से सबमिट करने की अनुमति देना, ताकि वे आपके एपीआई पर भेजा जाने वाला डेटा न खो दें. इसका इस्तेमाल आपके डेटा के गैप को भरने के लिए भी किया जा सकता है, जैसे कि आंकड़े. दरअसल, Google Analytics को डेटा भेजने के पूरे न हो पाने वाले अनुरोधों को फिर से भेजने के लिए, workbox-google-analytics मॉड्यूल हुड के तहत workbox-background-sync का इस्तेमाल करता है.

आप चाहे जो भी इस्तेमाल करें, workbox-background-sync इस तरह के काम को आसान बनाता है और डेवलपर के अनुभव को बेहतर बनाता है. साथ ही, आपको अपने वेब ऐप्लिकेशन के उपयोगकर्ता अनुभव और सुविधाओं को बेहतर बनाने के ज़्यादा मौके देता है.