ऐप्लिकेशन जैसा अनुभव पाने के लिए, अपने वेब ऐप्लिकेशन का डेटा बैकग्राउंड में सिंक करना
क्या आपने कभी इनमें से किसी स्थिति का सामना किया है?
- ट्रेन या मेट्रो में यात्रा करते समय, इंटरनेट कनेक्शन की समस्या होना या कनेक्शन न होना
- बहुत सारे वीडियो देखने के बाद, मोबाइल और इंटरनेट सेवा देने वाली कंपनी ने आपके इंटरनेट की स्पीड कम कर दी हो
- आप किसी ऐसे देश में हों जहां इंटरनेट की मांग के हिसाब से बैंडविड्थ उपलब्ध नहीं है
अगर आपने ऐसा किया है, तो आपको वेब पर कुछ काम करने में परेशानी हुई होगी. साथ ही, आपको यह भी आश्चर्य हुआ होगा कि इन स्थितियों में, प्लैटफ़ॉर्म के हिसाब से बने ऐप्लिकेशन अक्सर बेहतर क्यों काम करते हैं. प्लैटफ़ॉर्म के हिसाब से बनाए गए ऐप्लिकेशन, समय से पहले नया कॉन्टेंट फ़ेच कर सकते हैं. जैसे, समाचार लेख या मौसम की जानकारी. मेट्रो में इंटरनेट कनेक्शन न होने पर भी, खबरें पढ़ी जा सकती हैं.
समय-समय पर होने वाले बैकग्राउंड सिंक की सुविधा की मदद से, वेब ऐप्लिकेशन समय-समय पर बैकग्राउंड में डेटा सिंक कर सकते हैं. इससे वेब ऐप्लिकेशन, प्लैटफ़ॉर्म के हिसाब से काम करने वाले ऐप्लिकेशन की तरह काम करते हैं.
इसे आज़माएं
लाइव डेमो ऐप्लिकेशन की मदद से, समय-समय पर बैकग्राउंड में सिंक करने की सुविधा को आज़माया जा सकता है. इसका इस्तेमाल करने से पहले, पक्का करें कि:
- आपने Chrome 80 या उसके बाद के वर्शन का इस्तेमाल किया हो.
- समय-समय पर बैकग्राउंड में सिंक करने की सुविधा चालू करने से पहले, आपको वेब ऐप्लिकेशन इंस्टॉल करना होगा.
कॉन्सेप्ट और इस्तेमाल
बैकग्राउंड में समय-समय पर सिंक होने की सुविधा की मदद से, प्रगतिशील वेब ऐप्लिकेशन या सेवा वर्कर के साथ काम करने वाले पेज को लॉन्च करने पर, नया कॉन्टेंट दिखाया जा सकता है. यह तब होता है, जब ऐप्लिकेशन या पेज का इस्तेमाल न किया जा रहा हो. इससे ऐप्लिकेशन के कॉन्टेंट को लॉन्च करने के बाद, उसे देखते समय रीफ़्रेश होने से रोका जा सकता है. इससे बेहतर यह है कि यह ऐप्लिकेशन को रीफ़्रेश करने से पहले, कॉन्टेंट स्पिनर दिखाने से रोकता है.
बैकग्राउंड में समय-समय पर सिंक किए बिना, वेब ऐप्लिकेशन को डेटा डाउनलोड करने के लिए अन्य तरीकों का इस्तेमाल करना होगा. इसका एक सामान्य उदाहरण, सेवा वर्कर्स को जगाने के लिए पुश नोटिफ़िकेशन का इस्तेमाल करना है. उपयोगकर्ता को 'नया डेटा उपलब्ध है' जैसे किसी मैसेज से रुकावट आती है. डेटा अपडेट करना, असल में एक साइड इफ़ेक्ट है. हालांकि, आपके पास अब भी ज़रूरी अपडेट के लिए, पुश नोटिफ़िकेशन इस्तेमाल करने का विकल्प है. जैसे, अहम खबरें.
समय-समय पर होने वाले बैकग्राउंड सिंक को आसानी से बैकग्राउंड सिंक के साथ भ्रमित किया जा सकता है. इनके नाम एक जैसे हैं, लेकिन इनका इस्तेमाल अलग-अलग तरह से किया जाता है. बैकग्राउंड सिंक का इस्तेमाल कई कामों के लिए किया जाता है. जैसे, जब पिछला अनुरोध पूरा नहीं हो पाता है, तो सर्वर पर डेटा फिर से भेजने के लिए.
उपयोगकर्ता के जुड़ाव को सही तरीके से बढ़ाना
गलत तरीके से किया गया, बैकग्राउंड में समय-समय पर सिंक करने की सुविधा, उपयोगकर्ताओं के संसाधनों को बर्बाद कर सकती है. इसे रिलीज़ करने से पहले, Chrome ने इसे ट्रायल के तौर पर इस्तेमाल किया, ताकि यह पक्का किया जा सके कि यह सही है. इस सेक्शन में, इस सुविधा को ज़्यादा से ज़्यादा मददगार बनाने के लिए, Chrome के डिज़ाइन से जुड़े कुछ फ़ैसलों के बारे में बताया गया है.
Chrome ने डिज़ाइन से जुड़ा पहला फ़ैसला यह लिया है कि कोई वेब ऐप्लिकेशन, बैकग्राउंड में समय-समय पर सिंक करने की सुविधा का इस्तेमाल सिर्फ़ तब कर सकता है, जब कोई व्यक्ति उसे अपने डिवाइस पर इंस्टॉल कर लेता है और उसे अलग ऐप्लिकेशन के तौर पर लॉन्च कर लेता है. Chrome में किसी सामान्य टैब के लिए, समय-समय पर होने वाला बैकग्राउंड सिंक उपलब्ध नहीं है.
इसके अलावा, Chrome नहीं चाहता कि कभी इस्तेमाल नहीं किए गए या कभी-कभार इस्तेमाल किए जाने वाले वेब ऐप्लिकेशन, बैटरी या डेटा का गलत इस्तेमाल करें. इसलिए, Chrome ने बैकग्राउंड में डेटा सिंक करने की सुविधा को इस तरह से डिज़ाइन किया है कि डेवलपर को अपने उपयोगकर्ताओं को फ़ायदा पहुंचाना होगा. खास तौर पर, Chrome साइट पर यूज़र ऐक्टिविटी का स्कोर (about://site-engagement/) का इस्तेमाल करके यह तय करता है कि किसी वेब ऐप्लिकेशन के लिए, बैकग्राउंड में समय-समय पर सिंक की सुविधा कितनी बार चालू की जा सकती है. दूसरे शब्दों में, जब तक यूज़र ऐक्टिविटी का स्कोर शून्य से ज़्यादा नहीं होता, तब तक periodicsync इवेंट ट्रिगर नहीं होगा. साथ ही, इसकी वैल्यू से यह तय होता है कि periodicsync इवेंट कितनी बार ट्रिगर होगा. इससे यह पक्का होता है कि बैकग्राउंड में सिर्फ़ वे ऐप्लिकेशन सिंक हो रहे हों जिनका इस्तेमाल किया जा रहा है.
बैकग्राउंड में समय-समय पर सिंक करने की सुविधा, लोकप्रिय प्लैटफ़ॉर्म पर मौजूद एपीआई और तरीकों से मिलती-जुलती है. उदाहरण के लिए, एक बार में बैकग्राउंड में सिंक करने की सुविधा और पुश नोटिफ़िकेशन की मदद से, किसी व्यक्ति के पेज बंद करने के बाद भी, वेब ऐप्लिकेशन के लॉजिक को कुछ समय तक (इसके सेवा वर्कर की मदद से) चालू रखा जा सकता है. ज़्यादातर प्लैटफ़ॉर्म पर, लोगों के पास ऐसे ऐप्लिकेशन इंस्टॉल होते हैं जो समय-समय पर बैकग्राउंड में नेटवर्क को ऐक्सेस करते हैं. इससे, ज़रूरी अपडेट, कॉन्टेंट को पहले से लोड करने, डेटा सिंक करने वगैरह के लिए, उपयोगकर्ताओं को बेहतर अनुभव मिलता है. इसी तरह, समय-समय पर बैकग्राउंड में सिंक होने की सुविधा से, वेब ऐप्लिकेशन के लॉजिक का लाइफ़टाइम भी बढ़ जाता है. इससे, वेब ऐप्लिकेशन नियमित समय पर कुछ मिनट के लिए चलता रहता है.
अगर ब्राउज़र ने बिना किसी पाबंदी के, ऐसा बार-बार करने की अनुमति दी है, तो इससे निजता से जुड़ी कुछ समस्याएं हो सकती हैं. 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());
}
});
किसी मौजूदा वेब ऐप्लिकेशन में, समय-समय पर होने वाला बैकग्राउंड सिंक जोड़ना
मौजूदा PWA में, बैकग्राउंड में समय-समय पर सिंक करने की सुविधा जोड़ने के लिए, बदलावों का यह सेट ज़रूरी था. इस उदाहरण में, लॉगिंग के कई काम के स्टेटमेंट शामिल हैं. इनसे वेब ऐप्लिकेशन में, समय-समय पर बैकग्राउंड में सिंक होने की स्थिति के बारे में पता चलता है.
डीबग करना
स्थानीय तौर पर टेस्ट करते समय, समय-समय पर बैकग्राउंड में सिंक होने की प्रोसेस को एंड-टू-एंड व्यू में देखना मुश्किल हो सकता है. चालू रजिस्ट्रेशन, सिंक के अनुमानित इंटरवल, और सिंक किए गए पिछले इवेंट के लॉग की जानकारी, आपके वेब ऐप्लिकेशन के व्यवहार को डीबग करते समय अहम जानकारी देती है. हालांकि, Chrome DevTools में मौजूद एक्सपेरिमेंटल सुविधा की मदद से, यह सारी जानकारी देखी जा सकती है.
स्थानीय गतिविधि रिकॉर्ड करना
DevTools के समय-समय पर होने वाले बैकग्राउंड सिंक सेक्शन को, समय-समय पर होने वाले बैकग्राउंड सिंक के लाइफ़साइकल के मुख्य इवेंट के हिसाब से व्यवस्थित किया गया है: सिंक के लिए रजिस्टर करना, बैकग्राउंड सिंक करना, और अनरजिस्टर करना. इन इवेंट के बारे में जानकारी पाने के लिए, रिकॉर्डिंग शुरू करें पर क्लिक करें.
रिकॉर्डिंग के दौरान, DevTools में इवेंट से जुड़ी एंट्री दिखेंगी. साथ ही, हर इवेंट के लिए कॉन्टेक्स्ट और मेटाडेटा भी लॉग किया जाएगा.
रिकॉर्डिंग की सुविधा एक बार चालू करने के बाद, यह तीन दिन तक चालू रहेगी. इससे DevTools को बैकग्राउंड में होने वाले सिंक के बारे में, स्थानीय डीबगिंग की जानकारी कैप्चर करने में मदद मिलेगी. यह सिंक, आने वाले समय में भी हो सकता है.
इवेंट को सिम्युलेट करना
बैकग्राउंड गतिविधि को रिकॉर्ड करना मददगार हो सकता है. हालांकि, कभी-कभी आपको अपने periodicsync हैंडलर की तुरंत जांच करनी होगी. इसके लिए, आपको किसी इवेंट के सामान्य तरीके से ट्रिगर होने का इंतज़ार नहीं करना होगा.
ऐसा करने के लिए, Chrome DevTools में ऐप्लिकेशन पैनल में जाकर, सेवा वर्कर सेक्शन में जाएं. समय-समय पर सिंक करें फ़ील्ड की मदद से, इस्तेमाल किए जाने वाले इवेंट के लिए टैग दिया जा सकता है. साथ ही, इसे जितनी बार चाहें उतनी बार ट्रिगर किया जा सकता है.
DevTools इंटरफ़ेस का इस्तेमाल करना
Chrome 81 से, आपको DevTools के ऐप्लिकेशन पैनल में पीरियोडिक बैकग्राउंड सिंक सेक्शन दिखेगा.
