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