बैकग्राउंड सिंक करना एक नया वेब एपीआई है. इसकी मदद से, जब तक उपयोगकर्ता की इंटरनेट कनेक्शन की स्थिति ठीक नहीं होती, तब तक कार्रवाइयों को रोका जा सकता है. इससे यह पक्का होता है कि उपयोगकर्ता जो भी भेजना चाहता है वह असल में भेजा जाए.
समस्या
इंटरनेट पर समय बर्बाद करने के लिए बहुत सारी चीज़ें उपलब्ध हैं. इंटरनेट पर समय बर्बाद किए बिना, हमें यह पता नहीं चलता कि बिल्लियों को फूल पसंद नहीं हैं, गिरगिट को बबल्स पसंद हैं या हमारे एरिक बिडलमैन 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') किसी दिए गए सिंक के लिए यूनीक होना चाहिए. अगर आपने सिंक के लिए उसी टैग का इस्तेमाल किया है जिसका सिंक होना बाकी है, तो यह मौजूदा सिंक के साथ जुड़ जाता है. इसका मतलब है कि जब भी उपयोगकर्ता कोई मैसेज भेजता है, तो "आउटबॉक्स खाली करें" सिंक के लिए रजिस्टर किया जा सकता है. हालांकि, अगर वह ऑफ़लाइन रहते हुए पांच मैसेज भेजता है, तो ऑनलाइन होने पर सिर्फ़ एक सिंक होगा. अगर आपको पांच अलग-अलग सिंक इवेंट चाहिए, तो सिर्फ़ यूनीक टैग का इस्तेमाल करें!
यहां एक आसान डेमो दिया गया है, जिसमें सिर्फ़ ज़रूरी काम किए गए हैं. इसमें सूचना दिखाने के लिए, सिंक इवेंट का इस्तेमाल किया गया है.
बैकग्राउंड सिंक की सुविधा का इस्तेमाल किस लिए किया जा सकता है?
आम तौर पर, इसका इस्तेमाल ऐसे डेटा को भेजने के लिए किया जाता है जो पेज के बंद होने के बाद भी आपके लिए अहम है. चैट मैसेज, ईमेल, दस्तावेज़ के अपडेट, सेटिंग में बदलाव, फ़ोटो अपलोड... ऐसी कोई भी चीज़ जिसे आपको सर्वर पर सेव करना है, भले ही उपयोगकर्ता किसी दूसरे पेज पर चला जाए या टैब बंद कर दे. पेज, इन फ़ाइलों को indexedDB में "आउटबॉक्स" स्टोर में सेव कर सकता है. इसके बाद, सर्विस वर्कर उन्हें वापस लाकर भेजेगा.
हालांकि, इसका इस्तेमाल थोड़े-बहुत डेटा को फ़ेच करने के लिए भी किया जा सकता है...
एक और डेमो!
यह ऑफ़लाइन 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 के स्टेबल वर्शन में बैकग्राउंड सिंक की सुविधा को लॉन्च करना है. साथ ही, हम "समय-समय पर होने वाला बैकग्राउंड सिंक" सुविधा पर भी काम कर रहे हैं. समय-समय पर बैकग्राउंड में सिंक करने की सुविधा की मदद से, समय के अंतराल, बैटरी की स्थिति, और नेटवर्क की स्थिति के हिसाब से, किसी इवेंट के सिंक होने पर पाबंदी लगाई जा सकती है. इसके लिए, उपयोगकर्ता की अनुमति ज़रूरी होगी. साथ ही, यह ब्राउज़र पर निर्भर करेगा कि ये इवेंट कब और कितनी बार ट्रिगर होंगे. दूसरे शब्दों में, कोई न्यूज़ साइट हर घंटे सिंक करने का अनुरोध कर सकती है, लेकिन ब्राउज़र को पता हो सकता है कि आपने सिर्फ़ सुबह 7:00 बजे उस साइट को पढ़ा था. इसलिए, सिंक करने की प्रोसेस हर दिन सुबह 6:50 बजे शुरू होगी. यह सुविधा, एक बार सिंक करने की सुविधा से थोड़ी अलग है. हालांकि, यह सुविधा जल्द ही उपलब्ध होगी.
हम धीरे-धीरे Android और iOS के काम के पैटर्न को वेब पर ला रहे हैं. हालांकि, वेब को बेहतर बनाने वाली चीज़ों को हम बरकरार रखेंगे!