बैकग्राउंड सिंक करने की सुविधा एक नया वेब एपीआई है. इससे आपको तब तक कार्रवाइयों को टालने देता है, जब तक उपयोगकर्ता की परफ़ॉर्मेंस अच्छी न हो जाए कनेक्टिविटी. इससे यह पक्का हो जाता है कि उपयोगकर्ता जो भी भेजना चाहता है उसे असल में भेजा जा रहा है.
समस्या
इंटरनेट समय बर्बाद करने के लिए बहुत बढ़िया जगह है. बिना इंटरनेट के समय बर्बाद किए बिना हमें पता नहीं होता कि बिल्लियां फूल पसंद करती हैं, गिरगिट को बुलबुले पसंद आते हैं. इसके अलावा, हमारे एरिक बिडलमैन भी 90 के दशक के आखिरी दौर में, पट शॉट बनाने वाले हीरो हैं.
हालांकि, कभी-कभी हमारा मकसद समय बर्बाद करने का नहीं होता. पसंदीदा उपयोगकर्ता अनुभव ऐसा है:
- फ़ोन जेब में नहीं है.
- मामूली लक्ष्य हासिल करें.
- फ़ोन पीछे की जेब में हो गया है.
- बैटरी लाइफ़ फिर से शुरू करें.
माफ़ करें, इंटरनेट कनेक्शन ठीक न होने की वजह से, अक्सर इस सुविधा में रुकावट आती है. हम सभी के साथ ऐसा कभी न कभी हुआ है. आप सफ़ेद स्क्रीन या स्पिनर की तरफ़ देख रहे हैं और आपको पता है कि आपको हार मानकर अपनी ज़िंदगी में शामिल होना चाहिए, लेकिन अगर ज़रूरत पड़े, तो आपको 10 सेकंड और देने चाहिए. 10 सेकंड के बाद? कुछ नहीं.
लेकिन, अब क्यों छोड़ दें? आपने पहले ही अपना समय दिया हुआ है. इसलिए, बिना कुछ किए आगे बढ़ना आपके लिए बेकार होगा, इसलिए आप इंतज़ार करते रहें. इस समय तक आप छोड़ना चाहते हैं, लेकिन आपको पता है कि दूसरी बार ऐसा करते समय, अगर आपने इंतज़ार किया होता, तो दूसरी बार सब कुछ लोड हो जाता.
सर्विस वर्कर, आपको कैश मेमोरी से कॉन्टेंट उपलब्ध कराने की अनुमति देकर, पेज लोड होने वाले हिस्से की समस्या हल करते हैं. हालांकि, जब पेज को सर्वर पर कुछ भेजने की ज़रूरत होती है, तब क्या होता है?
इस समय, अगर उपयोगकर्ता "भेजें" पर क्लिक करता है उन्हें स्पिनर की ओर तब तक घूरना पड़ता है, जब तक वह पूरा नहीं हो जाता. अगर वह टैब को बंद करने या किसी दूसरी जगह जाने की कोशिश करता है, तो हम onbeforeunload का इस्तेमाल करके यह मैसेज दिखाते हैं कि "नहीं, मैं चाहता/चाहती हूं कि तुम इस स्पिनर को कुछ और देखो. माफ़ करें". अगर उपयोगकर्ता का इंटरनेट कनेक्शन नहीं है, तो हम उसे बताते हैं कि "माफ़ करें, आपको कुछ देर बाद कोशिश करनी होगी".
यह बकवास है. बैकग्राउंड में सिंक करने की सुविधा से, आपको बेहतर काम करने में मदद मिलती है.
समाधान
नीचे दिए गए वीडियो में Emojoy दिखाया गया है. यह सिर्फ़ इमोजी से चैट का डेमो है. यह एक प्रोग्रेसिव वेब ऐप्लिकेशन है. यह ऑफ़लाइन मोड में काम करता है. यह ऐप्लिकेशन पुश मैसेज और सूचनाओं का इस्तेमाल करता है. साथ ही, यह बैकग्राउंड सिंक का इस्तेमाल करता है.
अगर उपयोगकर्ता शून्य कनेक्टिविटी होने पर मैसेज भेजने की कोशिश करता है, तो कनेक्टिविटी हो जाने पर मैसेज को बैकग्राउंड में भेजा जा सकता है.
मार्च 2016 से, बैकग्राउंड में सिंक करने की सुविधा Chrome के 49 और इसके बाद वाले वर्शन में उपलब्ध है. यह कार्रवाई देखने के लिए, यह तरीका अपनाएं:
- Emojoy खोलें.
- ऑफ़लाइन हो जाएं (या तो हवाई जहाज़ मोड का उपयोग करके या अपने स्थानीय फ़ैराडे केज पर जाएं).
- कोई मैसेज लिखें.
- अपनी होम स्क्रीन पर वापस जाएं (वैकल्पिक रूप से टैब या ब्राउज़र बंद करें).
- ऑनलाइन जाएं.
- मैसेज बैकग्राउंड में भेजा जाता है!
बैकग्राउंड में इस तरह से फ़ाइलें भेजने की सुविधा से, परफ़ॉर्मेंस में सुधार होता है. ऐप्लिकेशन को मैसेज भेजने के बारे में इतनी बड़ी बात करने की ज़रूरत नहीं है, इसलिए यह सीधे आउटपुट में मैसेज जोड़ सकता है.
बैकग्राउंड सिंक का अनुरोध करने का तरीका
असल एक्सटेंसिबल वेब स्टाइल में, यह लो-लेवल की सुविधा इस्तेमाल करें. इससे आपको अपने काम करने की आज़ादी मिलती है. आप कहते हैं उपयोगकर्ता के पास कनेक्टिविटी होने पर इवेंट ट्रिगर होता है. यह तभी होता है, जब उपयोगकर्ता में पहले से ही कनेक्टिविटी है. फिर, आप उस इवेंट को सुनते हैं और वह भी करते हैं करने की ज़रूरत है.
पुश मैसेज सेवा की तरह, यह इवेंट टारगेट के तौर पर सर्विस वर्कर का इस्तेमाल करता है. इससे पेज नहीं खुलने पर यह काम करता है. शुरू करने के लिए, किसी पेज से सिंक करने के लिए रजिस्टर करें:
// Register your service worker:
navigator.serviceWorker.register('/sw.js');
// Then later, request a one-off sync:
navigator.serviceWorker.ready.then(function(swRegistration) {
return swRegistration.sync.register('myFirstSync');
});
```
Then listen for the event in `/sw.js`:
```js
self.addEventListener('sync', function(event) {
if (event.tag == 'myFirstSync') {
event.waitUntil(doSomeStuff());
}
});
यह बहुत आसान है! ऊपर दिए गए विकल्पों में, doSomeStuff() को ऐसा प्रॉमिस देना चाहिए जिससे यह पता चले कि कौनसी चीज़ करने की कोशिश की जा रही है और क्या नहीं. अगर इससे काम पूरा हो जाता है, तो सिंक पूरा हो जाता है. अगर यह सुविधा काम नहीं करती, तो फिर से कोशिश करने के लिए दूसरा सिंक शेड्यूल किया जाएगा. फिर से प्रयास करें समन्वयन भी कनेक्टिविटी की इंतज़ार करते हैं, और घातांकीय बैक-ऑफ़ लागू करते हैं.
सिंक किए गए टैग का नाम (ऊपर दिए गए उदाहरण में 'myFirstSync') किसी दिए गए सिंक के लिए अलग होना चाहिए. अगर सिंक करने के लिए उसी टैग का इस्तेमाल किया जाता है जिससे सिंक होना बाकी है, तो यह मौजूदा सिंक के साथ मिलकर काम करता है. इसका मतलब है कि आप "क्लियर-आउटबॉक्स" के लिए रजिस्टर कर सकते हैं जब भी उपयोगकर्ता मैसेज भेजता है, तब सिंक किया जाता है. हालांकि, अगर ऑफ़लाइन होने के दौरान वह पांच मैसेज भेजते हैं, तो उनके ऑनलाइन होने पर आपको सिर्फ़ एक सिंक मिलेगा. अगर आपको पांच अलग-अलग सिंक इवेंट चाहिए, तो यूनीक टैग का इस्तेमाल करें!
यहां एक सामान्य डेमो दिया गया है, जो सामान्य से काफ़ी कम है; यह सूचना दिखाने के लिए सिंक इवेंट का इस्तेमाल करता है.
बैकग्राउंड में सिंक करने की सुविधा का इस्तेमाल किन कामों के लिए किया जा सकता है?
आम तौर पर, इसका इस्तेमाल ऐसे डेटा को शेड्यूल करने के लिए किया जा सकता है जो पेज के बंद होने के बाद भी आपके लिए अहम है. चैट मैसेज, ईमेल, दस्तावेज़ के अपडेट, सेटिंग में बदलाव, फ़ोटो अपलोड... ऐसी कोई भी चीज़ जो उपयोगकर्ता के सर्वर से बाहर जाने या टैब बंद करने के बाद भी सर्वर पर पहुंचनी है. पेज इन्हें किसी "आउटबॉक्स" में सेव कर सकता है इंडेक्स किए गए दस्तावेज़ में स्टोर करने के लिए कहा जाता है और सर्विस वर्कर उन्हें फिर से हासिल करके भेजेगा.
हालांकि, इसका इस्तेमाल छोटे-छोटे डेटा को फ़ेच करने के लिए भी किया जा सकता है...
एक और डेमो!
यह ऑफ़लाइन Wikipedia का डेमो है. इसे मैंने सुपरचार्जिंग पेज लोड के लिए बनाया है. इसलिए, मैंने इसमें बैकग्राउंड सिंक की सुविधा इस्तेमाल की है.
इसे खुद आज़माकर देखें. पक्का करें कि Chrome 49 और उसके बाद के वर्शन का इस्तेमाल किया जा रहा हो. इसके बाद:
- किसी भी लेख पर जाएं, शायद Chrome.
- ऑफ़लाइन हो जाएं (या तो हवाई जहाज़-मोड का इस्तेमाल करके या मेरी तरह ख़राब मोबाइल सेवा देने वाली कंपनी में शामिल हो जाइए).
- किसी दूसरे लेख के लिंक पर क्लिक करें.
- आपको यह बताया जाना चाहिए कि पेज लोड नहीं हो सका (अगर पेज को लोड होने में कुछ समय लगता है, तब भी यह दिखेगा).
- सूचनाओं के लिए सहमति दें.
- ब्राउज़र बंद करें.
- ऑनलाइन हो जाएं
- लेख के डाउनलोड, कैश मेमोरी, और देखने के लिए तैयार होने पर आपको सूचना मिलेगी!
इस पैटर्न का इस्तेमाल करके, उपयोगकर्ता अपने फ़ोन को जेब में रखकर, अपनी ज़िंदगी को आसान बना सकता है. हालांकि, इस सुविधा के चालू होने पर फ़ोन जब चाहे, उसे सूचना दे पाएगा.
अनुमतियां
मैंने जो डेमो दिखाए हैं वे वेब सूचनाओं का इस्तेमाल करते हैं. इनके लिए अनुमति की ज़रूरत होती है, लेकिन बैकग्राउंड सिंक में ऐसा नहीं होता.
उपयोगकर्ता के साइट पर पेज खुला होने पर सिंक इवेंट अक्सर पूरे हो जाते हैं. इस वजह से, उपयोगकर्ता की अनुमति ज़रूरी नहीं होनी चाहिए. इससे खराब अनुभव मिलेगा. इसके बजाय, हम यह सीमित कर रहे हैं कि गलत इस्तेमाल को रोकने के लिए, सिंक को कब रजिस्टर और ट्रिगर किया जा सकता है. उदाहरण के लिए:
- किसी सिंक इवेंट के लिए सिर्फ़ तब रजिस्टर किया जा सकता है, जब उपयोगकर्ता ने साइट पर जाने के लिए कोई विंडो खोली हो.
- इवेंट चलाने का समय सीमित है, इसलिए उनका इस्तेमाल सर्वर को हर x सेकंड पर पिंग करने के लिए नहीं किया जा सकता. साथ ही, बिटकॉइन या कुछ और भी इस्तेमाल नहीं किया जा सकता.
बेशक, असल दुनिया में इस्तेमाल के आधार पर, इन पाबंदियों को कम या ज़्यादा किया जा सकता है.
प्रोग्रेसिव एन्हैंसमेंट
हालांकि, सभी ब्राउज़र पर बैकग्राउंड सिंक करने में कुछ समय लग सकता है. खास तौर पर, ऐसा इसलिए होता है, क्योंकि Safari और Edge में फ़िलहाल सर्विस वर्कर काम नहीं करते. हालांकि, प्रोग्रेसिव एन्हैंसमेंट की सुविधा से यहां मदद मिलती है:
if ('serviceWorker' in navigator && 'SyncManager' in window) {
navigator.serviceWorker.ready.then(function(reg) {
return reg.sync.register('tag-name');
}).catch(function() {
// system was unable to register for a sync,
// this could be an OS-level restriction
postDataFromThePage();
});
} else {
// serviceworker/sync not supported
postDataFromThePage();
}
अगर सर्विस वर्कर या बैकग्राउंड सिंक करने की सुविधा उपलब्ध न हो, तो कॉन्टेंट पोस्ट करें पेज से लाने में मदद मिलेगी.
अगर उपयोगकर्ता की कनेक्टिविटी अच्छी है, तब भी बैकग्राउंड में सिंक करने की सुविधा का इस्तेमाल किया जा सकता है. इससे डेटा भेजने के दौरान, नेविगेशन और टैब बंद होने से बचा जा सकता है.
आने वाला समय
हमारा लक्ष्य 2016 के शुरुआती छह महीनों में, "समय-समय पर बैकग्राउंड सिंक" वैरिएंट पर काम करते हुए, Chrome के स्टेबल वर्शन में बैकग्राउंड सिंक को भेजना है. समय-समय पर बैकग्राउंड में सिंक होने की सुविधा का इस्तेमाल करके, किसी ऐसे इवेंट का अनुरोध किया जा सकता है जो समय अंतराल, बैटरी की स्थिति, और नेटवर्क की स्थिति के हिसाब से सीमित हो. इसके लिए उपयोगकर्ता की अनुमति की ज़रूरत होगी. साथ ही, यह ब्राउज़र पर भी निर्भर करेगा कि ये इवेंट कब और कितनी बार ट्रिगर होते हैं. दूसरे शब्दों में, कोई समाचार साइट हर घंटे सिंक करने का अनुरोध कर सकती है, लेकिन ब्राउज़र को पता हो सकता है कि आपने उस साइट को सिर्फ़ 07:00 बजे ही पढ़ा है. इसलिए, सिंक रोज़ाना 06:50 बजे ही ट्रिगर होगा. यह तरीका, एक बार में डेटा सिंक करने के टूल से थोड़ा और बेहतर है. हालांकि, यह सुविधा जल्द ही उपलब्ध होगी.
हम धीरे-धीरे Android और iOS से वेब पर बेहतर पैटर्न ला रहे हैं. साथ ही, हम वेब को शानदार बनाने वाली चीज़ों को भी बनाए रख रहे हैं!