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