सिंक्रोनस XMLHttpRequest() में, पेज खारिज होने की स्थिति को बेहतर बनाना

नेविगेशन में लगने वाले समय को कम करना

Joe Medley
Joe Medley

आम तौर पर, जब कोई उपयोगकर्ता किसी पेज या ऐप्लिकेशन को बंद करता है, तो उसमें सबमिट नहीं किया गया आंकड़ा या अन्य डेटा मौजूद होता है. डेटा को मिटने से बचाने के लिए, कुछ साइटें 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 पर मैथ्यू हैमिल्टन की फ़ोटो