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

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

Jeff Posnick

Joe Medley

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

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

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

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

इसे आज़माएं

DevTools के बारे में सलाह एक 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 इवेंट कितनी बार ट्रिगर होगा. इससे यह पक्का होता है कि बैकग्राउंड में सिर्फ़ वे ऐप्लिकेशन सिंक हो रहे हैं जिनका इस्तेमाल किया जा रहा है.

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

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

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

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

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

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

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

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

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

• Network Information API
• डेटा बचाने वाले मोड का पता लगाना
• उपलब्ध स्टोरेज का अनुमान लगाना

अनुमतियां

सर्विस वर्कर इंस्टॉल होने के बाद, 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());
  }
});

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

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

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

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

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

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

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

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

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

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

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

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

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