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