ऐसा अक्सर होता है कि जब कोई उपयोगकर्ता किसी पेज या ऐप्लिकेशन को बंद करता है, तब Analytics या अन्य डेटा सबमिट नहीं किया गया होता है. डेटा के नुकसान को रोकने के लिए, कुछ साइटें सिंक्रोनस कॉल का इस्तेमाल करती हैं. इससे XMLHttpRequest() को पेज या ऐप्लिकेशन को तब तक खुला रखने में मदद मिलती है, जब तक उसका डेटा सर्वर को नहीं भेज दिया जाता. डेटा सेव करने के बेहतर तरीके मौजूद हैं. साथ ही, इस तकनीक से उपयोगकर्ता को खराब अनुभव मिलता है, क्योंकि पेज को बंद होने में कई सेकंड लग जाते हैं.
इस तरीके में बदलाव करने की ज़रूरत है और ब्राउज़र इस पर काम कर रहे हैं. XMLHttpRequest() स्पेसिफ़िकेशन को बंद करने और हटाने का फ़ैसला पहले ही लिया जा चुका है. Chrome 80 ने इस दिशा में पहला कदम उठाया है. इसमें कई इवेंट हैंडलर के अंदर सिंक्रोनस कॉल की अनुमति नहीं दी गई है. खास तौर पर, beforeunload, unload, pagehide, और visibilitychange को खारिज किए जाने पर ऐसा होता है. हाल ही में, WebKit ने भी एक कमिट लागू किया है, जिसमें व्यवहार में हुए इसी बदलाव को शामिल किया गया है.
हम उन लोगों के लिए कुछ विकल्पों के बारे में कम शब्दों में जानकारी देंगे जिन्हें अपनी साइटों को अपडेट करने के लिए समय चाहिए. साथ ही, हम XMLHttpRequest() के विकल्पों के बारे में भी बताएंगे.
कुछ समय के लिए ऑप्ट-आउट करना
Chrome, डेवलपर को XMLHttpRequest() पर निर्भरता कम करने के लिए समय देना चाहता है. इसलिए, हमने कुछ समय के लिए ऑप्ट-आउट करने के विकल्प दिए हैं.
ऑरिजिन ट्रायल में शामिल हों. इसकी मदद से, अपने पेज के हेडर में ओरिजिन के हिसाब से टोकन जोड़ा जाता है. इससे सिंक्रोनस XMLHttpRequest() कॉल चालू हो जाते हैं. यह विकल्प, Chrome 89 के रिलीज़ होने से कुछ समय पहले बंद हो जाएगा. यह मार्च 2021 में बंद होगा. Enterprise Chrome के ग्राहक भी AllowSyncXHRInPageDismissal नीति फ़्लैग का इस्तेमाल कर सकते हैं. यह फ़्लैग भी उसी समय खत्म हो जाता है.
अन्य विकल्प
सर्वर को डेटा वापस भेजने का तरीका चाहे जो भी हो, एक साथ पूरा डेटा भेजने के लिए पेज के अनलोड होने तक इंतज़ार न करना सबसे अच्छा होता है. अनलोड करने से, उपयोगकर्ता अनुभव खराब होता है. साथ ही, आधुनिक ब्राउज़र पर यह भरोसेमंद नहीं होता. अगर कोई गड़बड़ी होती है, तो डेटा भी मिट सकता है. खास तौर पर, मोबाइल ब्राउज़र पर अनलोड इवेंट अक्सर ट्रिगर नहीं होते हैं. ऐसा इसलिए होता है, क्योंकि मोबाइल ऑपरेटिंग सिस्टम पर unload इवेंट ट्रिगर किए बिना, टैब या ब्राउज़र को कई तरीकों से बंद किया जा सकता है.
XMLHttpRequest() में, छोटे पेलोड का इस्तेमाल करना एक विकल्प था. अब यह ज़रूरी है. इसके दोनों विकल्पों में, हर कॉन्टेक्स्ट के लिए 64 केबी तक की फ़ाइल अपलोड की जा सकती है. यह स्पेसिफ़िकेशन के मुताबिक है.
कीपअलाइव फ़ेच करें
Fetch API, सर्वर इंटरैक्शन को मैनेज करने का एक बेहतर तरीका उपलब्ध कराता है. साथ ही, यह अलग-अलग प्लैटफ़ॉर्म एपीआई के लिए, एक जैसा इंटरफ़ेस उपलब्ध कराता है. इसके विकल्पों में keepalive भी शामिल है. इससे यह पक्का किया जाता है कि अनुरोध जारी रहे, भले ही अनुरोध करने वाला पेज खुला रहे या बंद हो जाए:
window.addEventListener('unload', {
fetch('/siteAnalytics', {
method: 'POST',
body: getStatistics(),
keepalive: true
});
}
fetch() तरीके का फ़ायदा यह है कि सर्वर को भेजे जाने वाले डेटा पर ज़्यादा कंट्रोल होता है. उदाहरण में यह नहीं दिखाया गया है कि fetch() एक प्रॉमिस भी दिखाता है, जो Response ऑब्जेक्ट के साथ रिज़ॉल्व होता है. मैं पेज को अनलोड करने के प्रोसेस में रुकावट नहीं डालना चाहता, इसलिए मैंने इसके साथ कुछ नहीं किया.
SendBeacon()
SendBeacon() असल में, Fetch API का इस्तेमाल करता है. इसलिए, इसमें 64 केबी के पेलोड की सीमा होती है. साथ ही, यह भी पक्का करता है कि पेज अनलोड होने के बाद भी अनुरोध जारी रहे. इसका मुख्य फ़ायदा यह है कि इसे इस्तेमाल करना आसान है. इसकी मदद से, कोड की एक लाइन का इस्तेमाल करके डेटा सबमिट किया जा सकता है:
window.addEventListener('unload', {
navigator.sendBeacon('/siteAnalytics', getStatistics());
}
नतीजा
ज़्यादा ब्राउज़र पर fetch() के उपलब्ध होने से, उम्मीद है कि XMLHttpRequest() को वेब प्लैटफ़ॉर्म से हटा दिया जाएगा. ब्राउज़र वेंडर इस बात से सहमत हैं कि इसे हटा दिया जाना चाहिए. हालांकि, इसमें समय लगेगा. इसके सबसे खराब इस्तेमाल के मामलों में से किसी एक को बंद करना, पहला ऐसा कदम है जिससे सभी लोगों के लिए उपयोगकर्ता अनुभव बेहतर होता है.