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