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

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

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

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

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

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

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 को एपीआई रूट के लिए POST अनुरोधों से मेल खाने वाले रूट पर लागू किया गया है, जो JSON डेटा को फिर से हासिल करता है. अगर उपयोगकर्ता ऑफ़लाइन है, तो BackgroundSyncPlugin उपयोगकर्ता के फिर से ऑनलाइन होने पर, फिर से अनुरोध करने की कोशिश करेगा. हालांकि, ऐसा सिर्फ़ एक दिन तक किया जा सकेगा.

चेतावनी: BackgroundSyncPlugin FetchDidFail प्लगिन के कॉलबैक को हुक करता है, इसलिए पूरे न होने वाले अनुरोध, नेटवर्क की गड़बड़ी की वजह से होने चाहिए. जिन अनुरोधों के जवाब में 400 या 500-लेवल की गड़बड़ी दिखती है उन्हें दोबारा नहीं आज़माया जाएगा. इस तरह की गड़बड़ियां पैदा करने वाले अनुरोधों के लिए फिर से कोशिश करें, अपनी रणनीति में FetchDidSucceed प्लगिन जोड़ें.

बेहतर इस्तेमाल

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 इस तरह के काम को आसान बनाता है. साथ ही, यह डेवलपर के अनुभव को बेहतर बनाता है. साथ ही, आपको अपने वेब ऐप्लिकेशन के उपयोगकर्ता अनुभव और फ़ंक्शन को बेहतर बनाने के ज़्यादा अवसर देता है.