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