पेश है बैकग्राउंड सिंक

Jake Archibald

पब्लिश किया गया: 08 दिसंबर, 2015

बैकग्राउंड सिंक्रनाइज़ेशन एक वेब एपीआई है. इसकी मदद से, कार्रवाइयों को तब तक के लिए टाला जा सकता है, जब तक उपयोगकर्ता के पास स्थिर कनेक्टिविटी न हो. इससे आपको उपयोगकर्ताओं को उनकी पसंद की फ़ाइलें भेजने में मदद मिलती है. साथ ही, उन्हें जल्द से जल्द फ़ाइलें भेजने की सुविधा मिलती है.

समस्या

इंटरनेट, समय बर्बाद करने के लिए एक बेहतरीन जगह है. इंटरनेट पर समय बर्बाद किए बिना, हमें यह पता नहीं चलता कि बिल्लियों को फूल पसंद नहीं होते, गिरगिट को बुलबुले पसंद होते हैं या एरिक बिडेलमैन 90 के दशक के आखिर में, पुट पुट गोल्फ़ के हीरो थे.

हालांकि, कभी-कभी हमें समय बर्बाद नहीं करना होता. उपयोगकर्ताओं को बेहतर अनुभव देने के लिए, आपको इन बातों का ध्यान रखना चाहिए:

1. फ़ोन को जेब से बाहर निकालें.
2. छोटा लक्ष्य हासिल किया गया.
3. फ़ोन को वापस जेब में रख दिया गया हो.
4. फिर से शुरू करो.

माफ़ करें, कनेक्टिविटी ठीक न होने की वजह से यह सुविधा अक्सर काम नहीं करती. हम सभी के साथ ऐसा कभी न कभी हुआ है. आपको सफ़ेद स्क्रीन या स्पिनर दिख रहा है. आपको पता है कि अब आपको हार मान लेनी चाहिए और अपनी ज़िंदगी में आगे बढ़ना चाहिए. हालांकि, आप 10 सेकंड और इंतज़ार करते हैं. क्या 10 सेकंड के बाद भी ऐसा होता है? कुछ नहीं.

लेकिन अब क्यों हार माननी है? आपने पहले ही काफ़ी समय लगा दिया है. इसलिए, बिना कुछ पाए वापस जाना बेकार होगा. इसलिए, इंतज़ार जारी रखें. इस समय तक, आपका मन हार मानने का होता है. हालांकि, आपको पता होता है कि अगर आपने थोड़ा और इंतज़ार किया होता, तो सब कुछ लोड हो जाता.

सर्विस वर्कर, पेज लोड होने की समस्या को हल करते हैं. इसके लिए, वे आपको कैश मेमोरी से कॉन्टेंट दिखाने की सुविधा देते हैं. लेकिन, जब पेज को सर्वर पर कुछ भेजना होता है, तब क्या होता है?

फ़िलहाल, अगर कोई उपयोगकर्ता किसी मैसेज को "भेजें" पर क्लिक करता है, तो उसे तब तक स्पिनर को देखना होगा, जब तक वह पूरा नहीं हो जाता. अगर वे किसी दूसरी जगह पर जाने या टैब को बंद करने की कोशिश करते हैं, तो हम onbeforeunload का इस्तेमाल करके, उन्हें यह मैसेज दिखाते हैं, "नहीं, आपको इस स्पिनर को कुछ और देर तक देखना होगा. माफ़ करें". अगर उपयोगकर्ता का कोई कनेक्शन नहीं है, तो हम उसे बताते हैं कि "माफ़ करें, आपको कुछ समय बाद फिर से कोशिश करनी होगी".

बैकग्राउंड सिंक की सुविधा से, आपको बेहतर तरीके से काम करने में मदद मिलती है.

समाधान

इस वीडियो में, सिर्फ़ इमोजी वाली चैट का डेमो दिखाया गया है. इसे इमोजी चैट कहा जाता है. यह एक प्रोग्रेसिव वेब ऐप्लिकेशन है. यह ऑफ़लाइन-फ़र्स्ट सिद्धांत पर काम करता है. यह ऐप्लिकेशन, पुश मैसेज और सूचनाओं का इस्तेमाल करता है. साथ ही, यह बैकग्राउंड में सिंक करने की सुविधा का इस्तेमाल करता है.

अगर उपयोगकर्ता के पास कनेक्टिविटी नहीं है और वह मैसेज भेजने की कोशिश करता है, तो कनेक्टिविटी मिलने पर मैसेज बैकग्राउंड में भेज दिया जाता है.

इस तरह बैकग्राउंड में डेटा भेजने से, परफ़ॉर्मेंस में सुधार होता है. ऐप्लिकेशन को मैसेज भेजने के बारे में इतनी ज़्यादा जानकारी देने की ज़रूरत नहीं है. इसलिए, वह मैसेज को सीधे तौर पर आउटपुट में जोड़ सकता है.

बैकग्राउंड सिंक की सुविधा, Chrome 49 से उपलब्ध है.

बैकग्राउंड सिंक का अनुरोध करने का तरीका

एक्सटेंसिबल वेब के सिद्धांत के मुताबिक, यह एक लो-लेवल सुविधा है. इससे आपको अपनी ज़रूरत के हिसाब से काम करने की सुविधा मिलती है. आपने उपयोगकर्ता के डिवाइस में इंटरनेट कनेक्शन होने पर इवेंट ट्रिगर करने का अनुरोध किया है. अगर उपयोगकर्ता के डिवाइस में पहले से ही इंटरनेट कनेक्शन है, तो इवेंट तुरंत ट्रिगर हो जाएगा. इसके बाद, उस इवेंट को सुनें और ज़रूरी कार्रवाई करें.

पुश मैसेज की तरह, यह इवेंट टारगेट के तौर पर सर्विस वर्कर का इस्तेमाल करता है. इससे पेज बंद होने पर भी यह काम कर पाता है. सिंक करने के लिए, किसी पेज से रजिस्टर करें:

// 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') किसी दिए गए सिंक के लिए यूनीक होना चाहिए. अगर आपने किसी ऐसे टैग का इस्तेमाल करके सिंक करने के लिए रजिस्टर किया है जिसका इस्तेमाल करके सिंक करने का अनुरोध पहले ही किया जा चुका है, तो वह मौजूदा सिंक के साथ मर्ज हो जाएगा. इसका मतलब है कि जब भी उपयोगकर्ता कोई मैसेज भेजता है, तब "clear-outbox" सिंक के लिए रजिस्टर किया जा सकता है. हालांकि, अगर उपयोगकर्ता ऑफ़लाइन होने पर पांच मैसेज भेजता है, तो ऑनलाइन होने पर आपको सिर्फ़ एक सिंक मिलेगा. पांच अलग-अलग सिंक इवेंट पाने के लिए, यूनीक टैग का इस्तेमाल करें.

यहां एक डेमो दिया गया है. इसमें सूचना दिखाने के लिए, सिंक इवेंट का इस्तेमाल किया गया है.

बैकग्राउंड सिंक का इस्तेमाल

आदर्श रूप से, इसका इस्तेमाल ऐसे डेटा को भेजने के लिए शेड्यूल करने के लिए किया जाता है जो पेज के बंद होने के बाद भी आपके लिए ज़रूरी होता है. चैट मैसेज, ईमेल, दस्तावेज़ के अपडेट, सेटिंग में बदलाव, फ़ोटो अपलोड या कोई भी ऐसा कॉन्टेंट जिसे आपको सर्वर तक पहुंचाना है. भले ही, उपयोगकर्ता किसी दूसरे पेज पर चला जाए या टैब बंद कर दे. पेज, इन मैसेज को indexedDB में मौजूद "आउटबॉक्स" में सेव कर सकता है. इसके बाद, सर्विस वर्कर उन्हें वापस पाकर भेज देगा.

हालांकि, इसका इस्तेमाल डेटा के छोटे-छोटे हिस्सों को फ़ेच करने के लिए भी किया जा सकता है.

ऑफ़लाइन Wikipedia डेमो

यह ऑफ़लाइन विकिपीडिया का डेमो है. इसे मैंने पेज लोड होने की स्पीड बढ़ाने के लिए बनाया है. इसके बाद, मैंने इसमें बैकग्राउंड में सिंक करने की सुविधा जोड़ी है.

इसे खुद आज़माकर देखें:

1. अपने ब्राउज़र में इस टैब को खुला रखें.
2. फ़्लाइट मोड चालू करके या वाई-फ़ाई बंद करके ऑफ़लाइन हो जाएं.
3. किसी दूसरे लेख के लिंक पर क्लिक करें.
4. आपको यह सूचना मिलनी चाहिए कि पेज लोड नहीं हो सका. यह सूचना तब भी दिखेगी, जब पेज लोड होने में कुछ समय लग रहा हो.
5. सूचनाएं पाने की सुविधा के लिए सहमति दें.
6. ब्राउज़र बंद करें.
7. ऑनलाइन हो जाएं
8. जब लेख डाउनलोड हो जाता है, कैश मेमोरी में सेव हो जाता है, और देखने के लिए तैयार हो जाता है, तब आपको सूचना मिलती है!

इस पैटर्न का इस्तेमाल करके, उपयोगकर्ता अपने फ़ोन को जेब में रख सकता है और अपने काम में लग सकता है. उसे पता होता है कि जब फ़ोन को उसकी ज़रूरत की जानकारी मिल जाएगी, तब वह उसे सूचना देगा.

अनुमतियां

मैंने जो डेमो दिखाए हैं उनमें वेब सूचनाओं का इस्तेमाल किया गया है. इसके लिए अनुमति ज़रूरी होती है, लेकिन बैकग्राउंड सिंक के लिए अनुमति की ज़रूरत नहीं होती.

सिंक करने वाले इवेंट अक्सर तब पूरे होते हैं, जब उपयोगकर्ता ने साइट का कोई पेज खोला हो. इसलिए, उपयोगकर्ता से अनुमति मांगना एक खराब अनुभव होगा. इसके बजाय, हम सिंक को रजिस्टर करने और ट्रिगर करने की सुविधा को सीमित कर रहे हैं, ताकि इसका गलत इस्तेमाल न हो. उदाहरण के लिए:

• सिंक इवेंट के लिए सिर्फ़ तब रजिस्टर किया जा सकता है, जब उपयोगकर्ता ने साइट की विंडो खोली हो.
• इवेंट को तय समय में ही पूरा करना होता है. इसलिए, इनका इस्तेमाल हर x सेकंड में सर्वर को पिंग करने, बिटकॉइन माइन करने या किसी अन्य काम के लिए नहीं किया जा सकता.

हालांकि, असल दुनिया में इस्तेमाल के आधार पर इन पाबंदियों को कम या ज़्यादा किया जा सकता है.

प्रोग्रेसिव एन्हैंसमेंट

जब तक बैकग्राउंड सिंक की सुविधा डिफ़ॉल्ट रूप से उपलब्ध नहीं हो जाती, तब तक इसे प्रोग्रेसिव एन्हांसमेंट के तौर पर इस्तेमाल किया जा सकता है:

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 पर इस्तेमाल किए जा रहे सफल पैटर्न को धीरे-धीरे वेब पर ला रहे हैं. साथ ही, हम वेब की उन सुविधाओं को भी बनाए रख रहे हैं जो इसे खास बनाती हैं!