वर्कबॉक्स-बैकग्राउंड-सिंक

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

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

Workbox के बैकग्राउंड सिंक को इस तरह डिज़ाइन किया गया है कि बैकग्राउंड सिंक एपीआई को डाउनलोड करें और इसके इस्तेमाल को अन्य Workbox मॉड्यूल के साथ इंटिग्रेट करें. यह यह उन ब्राउज़र के लिए एक फ़ॉलबैक स्ट्रेटजी भी लागू करता है जो अभी तक लागू नहीं हुए हैं बैकग्राउंड सिंक.

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

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

बैकग्राउंड में वीडियो सिंक करने की सुविधा का इस्तेमाल करने के लिए, Plugin का इस्तेमाल करें. इससे पूरे न हो पाने वाले अनुरोधों की सूची अपने-आप बुक हो जाए और 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],
  }),
  'POST'
);

BackgroundSyncPlugin ने हुक को fetchDidFail प्लगिन कॉलबैक, और fetchDidFail का इस्तेमाल सिर्फ़ तब किया जाता है, जब कोई अपवाद मौजूद हो. इसकी सबसे ज़्यादा संभावना होती है नेटवर्क में गड़बड़ी हुई है. इसका मतलब है कि अगर के साथ जवाब मिला 4xx या 5xx गड़बड़ी की स्थिति. अगर आपको मिलने वाले सभी अनुरोधों को फिर से करना है, जैसे कि 5xx स्थिति, ऐसा करके यह पता लगाया जा सकता है कि fetchDidSucceed प्लगिन जोड़ना रणनीति को ध्यान में रखकर भी ऐसा किया जा सकता है:

const statusPlugin = {
  fetchDidSucceed: ({response}) => {
    if (response.status >= 500) {
      // Throwing anything here will trigger fetchDidFail.
      throw new Error('Server error.');
    }
    // If it's not 5xx, use the response as-is.
    return response;
  },
};

// Add statusPlugin to the plugins array in your strategy.

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

Workbox के बैकग्राउंड सिंक में एक Queue क्लास भी मिलती है. इसकी मदद से ये काम किए जा सकते हैं विफल अनुरोधों को इंस्टैंशिएट करें और जोड़ें. पूरे न हो पाने वाले अनुरोधों को सेव कर लिया गया है IndexedDB में और जब ब्राउज़र को लगता है कि कनेक्टिविटी पुनर्स्थापित हो गई है, तो पुनः प्रयास किया जाता है (यानी सिंक इवेंट मिलने पर).

कोई सूची बनाना

Workbox की बैकग्राउंड सिंक वाली सूची बनाने के लिए, आपको इसका इस्तेमाल करना होगा सूची का नाम (जो आपके चैनल के लिए यूनीक होना चाहिए शुरुआत की जगह):

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

const queue = new Queue('myQueueName');

सूची का नाम, उन टैग के नाम के हिस्से के रूप में इस्तेमाल किया जाता है जिन्हें register() से जुड़ा दुनिया भर के SyncManager. यह समय है इसका इस्तेमाल इस तरह से भी किया जाता है: इसके लिए Object Store नाम IndexedDB डेटाबेस.

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

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

वर्कबॉक्स बैकग्राउंड सिंक की जांच की जा रही है

अफ़सोस की बात है, BackdropSync की जांच करना कुछ हद तक आसान और मुश्किल है कई वजहों से ऐसा किया जा सकता है.

लागू होने की जांच करने का सबसे सही तरीका, यहां दिया गया तरीका है:

1. पेज लोड करें और अपने सर्विस वर्कर को रजिस्टर करें.
2. अपने कंप्यूटर का नेटवर्क या वेब सर्वर बंद कर दें.
   • Chrome DevTools का ऑफ़लाइन इस्तेमाल न करें. ऑफ़लाइन चेकबॉक्स DevTools सिर्फ़ पेज के अनुरोधों पर असर डालता है. सर्विस वर्कर के लिए अनुरोध पहले की तरह ही काम करता रहेगा.
3. ऐसे नेटवर्क अनुरोध करें जिन्हें वर्कबॉक्स बैकग्राउंड सिंक के साथ सूची में रखा जाना चाहिए.
   • आप Chrome DevTools > Application > IndexedDB > workbox-background-sync > requests अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
4. अब अपना नेटवर्क या वेब सर्वर चालू करें.

5. इस पर जाकर, sync इवेंट से पहले इसे ज़बरदस्ती चालू करें Chrome DevTools > Application > Service Workers, इसका टैग नाम डालकर workbox-background-sync:<your queue name> जहां <your queue name> होना चाहिए सूची का नाम डालें, और फिर 'सिंक करें' पर क्लिक करें बटन.

   

6. आपको पूरे न हो पाने वाले अनुरोधों के लिए पूरे नेटवर्क अनुरोध दिखेंगे और IndexedDB डेटा अब खाली होना चाहिए, क्योंकि अनुरोध किए गए फिर से चलाया गया.