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