इस पेज का अनुवाद Cloud Translation API से किया गया है.

समय-समय पर बैकग्राउंड सिंक एपीआई की मदद से, ऑफ़लाइन होने का बेहतर अनुभव पाएं

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

Jeff Posnick

Joe Medley

क्या आपको कभी इनमें से किसी स्थिति का सामना करना पड़ा है?

ट्रेन या मेट्रो में यात्रा करते समय, इंटरनेट कनेक्शन ठीक से काम न कर रहा हो या उपलब्ध न हो
बहुत सारे वीडियो देखने के बाद, मोबाइल और इंटरनेट सेवा देने वाली कंपनी ने इंटरनेट की स्पीड कम कर दी हो
ऐसे देश में रहना जहां बैंडविथ की स्पीड, मांग के हिसाब से कम है

अगर आपने ऐसा किया है, तो आपको वेब पर कुछ काम करने में ज़रूर परेशानी हुई होगी. साथ ही, आपने सोचा होगा कि इन मामलों में, प्लैटफ़ॉर्म के हिसाब से बनाए गए ऐप्लिकेशन अक्सर बेहतर तरीके से काम क्यों करते हैं. प्लैटफ़ॉर्म के हिसाब से बनाए गए ऐप्लिकेशन, समय से पहले नया कॉन्टेंट फ़ेच कर सकते हैं. जैसे, समाचार लेख या मौसम की जानकारी. मेट्रो में नेटवर्क न होने पर भी, खबरें पढ़ी जा सकती हैं.

Periodic Background Sync की मदद से, वेब ऐप्लिकेशन बैकग्राउंड में समय-समय पर डेटा सिंक कर सकते हैं. इससे वेब ऐप्लिकेशन, किसी प्लैटफ़ॉर्म के लिए बने ऐप्लिकेशन की तरह काम करते हैं.

इसे आज़माएं

DevTools Tips एक PWA है, जो Periodic Background Sync API का इस्तेमाल करता है. DevTools Tips PWA, डेवलपर टूल से जुड़ी नई सलाह हर दिन फ़ेच करता है और उन्हें कैश मेमोरी में सेव करता है. इससे उपयोगकर्ता अगली बार ऐप्लिकेशन खोलने पर, इन सलाह को ऐक्सेस कर सकते हैं. भले ही, वे ऑनलाइन हों या न हों. Periodic Background Sync API का इस्तेमाल करने के लिए, ऐप्लिकेशन इंस्टॉल करना न भूलें.

GitHub पर सोर्स कोड पर जाएं. खास तौर पर, ऐप्लिकेशन registerPeriodicSync() फ़ंक्शन में समय-समय पर होने वाले सिंक को रजिस्टर करता है. सर्विस वर्कर कोड में, ऐप्लिकेशन periodicsync इवेंट को सुनता है.

कॉन्सेप्ट और इस्तेमाल

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

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

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

उपयोगकर्ता के जुड़ाव को सही तरीके से समझना

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

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

इसके अलावा, Chrome यह नहीं चाहता कि इस्तेमाल न किए गए या कभी-कभार इस्तेमाल किए गए वेब ऐप्लिकेशन, बैटरी या डेटा का इस्तेमाल करें. इसलिए, Chrome ने समय-समय पर बैकग्राउंड सिंक करने की सुविधा डिज़ाइन की है. इससे डेवलपर को अपने उपयोगकर्ताओं को बेहतर अनुभव देना होगा. Chrome, किसी वेब ऐप्लिकेशन के लिए यह तय करने के लिए कि समय-समय पर बैकग्राउंड सिंक की सुविधा कब और कितनी बार चालू की जा सकती है, साइट के साथ यूज़र ऐक्टिविटी के स्कोर (about://site-engagement/) का इस्तेमाल करता है. दूसरे शब्दों में कहें, तो periodicsync इवेंट तब तक ट्रिगर नहीं होगा, जब तक यूज़र ऐक्टिविटी का स्कोर शून्य से ज़्यादा न हो. साथ ही, इसकी वैल्यू से यह तय होता है कि periodicsync इवेंट कितनी बार ट्रिगर होगा. इससे यह पक्का होता है कि बैकग्राउंड में सिर्फ़ वे ऐप्लिकेशन सिंक हो रहे हैं जिनका इस्तेमाल किया जा रहा है.

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

अगर ब्राउज़र, इस कुकी को बार-बार और बिना किसी पाबंदी के सेट करने की अनुमति देता है, तो इससे निजता से जुड़ी कुछ समस्याएं हो सकती हैं. Chrome ने समय-समय पर होने वाले बैकग्राउंड सिंक से जुड़े इस जोखिम को इस तरह कम किया है:

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

इसका इस्तेमाल कब किया जा सकता है?

इन्हें इस्तेमाल करने के नियम, ब्राउज़र के हिसाब से अलग-अलग होते हैं. ऊपर दी गई जानकारी के आधार पर, Chrome समय-समय पर होने वाले बैकग्राउंड सिंक के लिए ये ज़रूरी शर्तें लागू करता है:

उपयोगकर्ता के जुड़ाव का कोई खास स्कोर.
पहले इस्तेमाल किए गए नेटवर्क की मौजूदगी.

सिंक करने का समय, डेवलपर कंट्रोल नहीं करते. सिंक करने की फ़्रीक्वेंसी, ऐप्लिकेशन के इस्तेमाल की फ़्रीक्वेंसी के हिसाब से तय होगी. (ध्यान दें कि प्लैटफ़ॉर्म के हिसाब से बनाए गए ऐप्लिकेशन ऐसा नहीं करते.) यह डिवाइस की बैटरी और कनेक्टिविटी की स्थिति को भी ध्यान में रखता है.

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

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

अनुमतियां

सर्विस वर्कर इंस्टॉल होने के बाद, periodic-background-sync के लिए क्वेरी करने के लिए Permissions API का इस्तेमाल करें. इसे किसी विंडो या सर्विस वर्कर कॉन्टेक्स्ट से किया जा सकता है.

const status = await navigator.permissions.query({
  name: 'periodic-background-sync',
});
if (status.state === 'granted') {
  // Periodic background sync can be used.
} else {
  // Periodic background sync cannot be used.
}

समय-समय पर होने वाले सिंक को रजिस्टर करना

जैसा कि पहले बताया गया है, समय-समय पर होने वाले बैकग्राउंड सिंक के लिए सर्विस वर्कर की ज़रूरत होती है. ServiceWorkerRegistration.periodicSync का इस्तेमाल करके PeriodicSyncManager को वापस पाएं और उस पर register() को कॉल करें. रजिस्टर करने के लिए, टैग और कम से कम सिंक्रनाइज़ेशन इंटरवल (minInterval), दोनों की ज़रूरत होती है. टैग, रजिस्टर किए गए सिंक की पहचान करता है, ताकि कई सिंक रजिस्टर किए जा सकें. यहां दिए गए उदाहरण में, टैग का नाम 'content-sync' है और minInterval एक दिन है.

const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
  try {
    await registration.periodicSync.register('content-sync', {
      // An interval of one day.
      minInterval: 24 * 60 * 60 * 1000,
    });
  } catch (error) {
    // Periodic background sync cannot be used.
  }
}

रजिस्ट्रेशन की पुष्टि करना

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

const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
  const tags = await registration.periodicSync.getTags();
  // Only update content if sync isn't set up.
  if (!tags.includes('content-sync')) {
    updateContentOnPageLoad();
  }
} else {
  // If periodic background sync isn't supported, always update.
  updateContentOnPageLoad();
}

getTags() का इस्तेमाल करके, अपने वेब ऐप्लिकेशन के सेटिंग पेज पर चालू रजिस्ट्रेशन की सूची भी दिखाई जा सकती है. इससे उपयोगकर्ता, खास तरह के अपडेट को चालू या बंद कर सकते हैं.

समय-समय पर होने वाले बैकग्राउंड सिंक इवेंट का जवाब देना

समय-समय पर होने वाले बैकग्राउंड सिंक इवेंट का जवाब देने के लिए, अपने सर्विस वर्कर में periodicsync इवेंट हैंडलर जोड़ें. इसे पास किया गया event ऑब्जेक्ट, रजिस्ट्रेशन के दौरान इस्तेमाल की गई वैल्यू से मेल खाने वाला tag पैरामीटर शामिल करेगा. उदाहरण के लिए, अगर किसी पीरियोडिक बैकग्राउंड सिंक को 'content-sync' नाम से रजिस्टर किया गया था, तो event.tag, 'content-sync' होगा.

self.addEventListener('periodicsync', (event) => {
  if (event.tag === 'content-sync') {
    // See the "Think before you sync" section for
    // checks you could perform before syncing.
    event.waitUntil(syncContent());
  }
  // Other logic for different tags as needed.
});

सिंक करने की सुविधा से ऑप्ट आउट करना

रजिस्टर किए गए सिंक को बंद करने के लिए, periodicSync.unregister() को कॉल करें. इसके लिए, उस सिंक का नाम बताएं जिसे आपको रजिस्टर नहीं करना है.

const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
  await registration.periodicSync.unregister('content-sync');
}

इंटरफ़ेस

यहां Periodic Background Sync API के ज़रिए उपलब्ध कराए गए इंटरफ़ेस के बारे में खास जानकारी दी गई है.

PeriodicSyncEvent. इसे ब्राउज़र के चुने गए समय पर, ServiceWorkerGlobalScope.onperiodicsync इवेंट हैंडलर को पास किया जाता है.
PeriodicSyncManager. यह कुकी, समय-समय पर होने वाले सिंक को रजिस्टर और अनरजिस्टर करती है. साथ ही, रजिस्टर किए गए सिंक के लिए टैग उपलब्ध कराती है. ServiceWorkerRegistration.periodicSync प्रॉपर्टी से, इस क्लास का इंस्टेंस वापस पाएं.
ServiceWorkerGlobalScope.onperiodicsync. यह PeriodicSyncEvent पाने के लिए, एक हैंडलर रजिस्टर करता है.
ServiceWorkerRegistration.periodicSync. यह PeriodicSyncManager का रेफ़रंस दिखाता है.

उदाहरण

यहां दिए गए सेक्शन में, समय-समय पर बैकग्राउंड में सिंक होने वाले एपीआई का इस्तेमाल करने के कुछ उदाहरण दिए गए हैं.

सामग्री अपडेट करें

यहां दिए गए उदाहरण में, किसी समाचार साइट या ब्लॉग के लिए समय-समय पर बैकग्राउंड सिंक का इस्तेमाल करके, नए लेख डाउनलोड और कैश किए जाते हैं. टैग के नाम पर ध्यान दें. इससे पता चलता है कि यह किस तरह का सिंक है ('update-articles'). updateArticles() को event.waitUntil() में रैप किया गया है, ताकि लेख डाउनलोड और सेव होने से पहले सर्विस वर्कर बंद न हो.

async function updateArticles() {
  const articlesCache = await caches.open('articles');
  await articlesCache.add('/api/articles');
}

self.addEventListener('periodicsync', (event) => {
  if (event.tag === 'update-articles') {
    event.waitUntil(updateArticles());
  }
});

किसी मौजूदा वेब ऐप्लिकेशन में समय-समय पर होने वाला बैकग्राउंड सिंक जोड़ना

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

Periodic Background Sync API को डीबग करना

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

स्थानीय गतिविधि रिकॉर्ड करना

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

रिकॉर्डिंग के दौरान, DevTools में इवेंट से जुड़ी एंट्री दिखेंगी. साथ ही, हर इवेंट के लिए कॉन्टेक्स्ट और मेटाडेटा लॉग किया जाएगा.

समय-समय पर होने वाले बैकग्राउंड सिंक के रिकॉर्ड किए गए डेटा का उदाहरण

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

इवेंट सिम्युलेट करना

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

इसके लिए, Chrome DevTools में मौजूद ऐप्लिकेशन पैनल में जाकर, Service Workers सेक्शन का इस्तेमाल करें. समय-समय पर होने वाले सिंक फ़ील्ड की मदद से, इवेंट के लिए इस्तेमाल किया जाने वाला टैग दिया जा सकता है. साथ ही, इसे अपनी ज़रूरत के हिसाब से कई बार ट्रिगर किया जा सकता है.

ऐप्लिकेशन पैनल के 'सर्विस वर्कर' सेक्शन में, 'समय-समय पर सिंक होने की सुविधा' वाला टेक्स्ट फ़ील्ड और बटन दिखाया गया है. — "ऐप्लिकेशन पैनल के 'Service Workers' सेक्शन में, 'Periodic Sync' टेक्स्ट फ़ील्ड और बटन दिखता है."

DevTools इंटरफ़ेस का इस्तेमाल

आपको DevTools के Application पैनल में, Periodic Background Sync सेक्शन दिखेगा.

ऐप्लिकेशन पैनल में, समय-समय पर होने वाला बैकग्राउंड सिंक सेक्शन दिख रहा है — Periodic Background Sync सेक्शन