आम तौर पर, वेब पेजों के लिए अपने सर्वर पर वापस डेटा (या "बीकन") भेजना ज़रूरी होता है. उदाहरण के लिए, उपयोगकर्ता के मौजूदा सेशन का ऐनलिटिक्स डेटा. डेवलपर के लिए, इसमें संतुलन बनाए रखने की ज़रूरत होती है: वे अनुरोध जो हमेशा बने रहते हैं और शायद गैर-ज़रूरी हैं. साथ ही, टैब बंद होने या बीकन भेजने से पहले ही उपयोगकर्ता नेविगेट कर जाने पर ऐसे अनुरोध करते हैं जिनमें डेटा छूटने का जोखिम नहीं होता.
आम तौर पर डेवलपर, पेज के अनलोड होने पर उसे कैच करने के लिए pagehide और visibilitychange इवेंट का इस्तेमाल करते हैं. इसके बाद, बीकन डेटा के लिए navigator.sendBeacon() या keepalive के साथ fetch() का इस्तेमाल करते हैं. हालांकि, इन दोनों इवेंट में मुश्किल कॉर्नर केस होते हैं, जो उपयोगकर्ता के ब्राउज़र के हिसाब से अलग-अलग होते हैं. कई बार इवेंट कभी भी नहीं मिलते—खास तौर पर मोबाइल पर.
इस जटिलता को सिंगल एपीआई कॉल से बदलने का प्रस्ताव fetchLater() है. यह ठीक वैसे ही काम करता है जैसा इसके नाम से पता चलता है: यह ब्राउज़र से यह पक्का करने के लिए कहता है कि आने वाले समय में किसी समय पेज बंद किया जाए या उपयोगकर्ता यहां से चला जाए.
fetchLater(), Chrome में ऑरिजिन ट्रायल के बाद टेस्टिंग के लिए उपलब्ध है. इसके वर्शन 121 (जनवरी 2024 में रिलीज़ किया गया) का शुरुआती वर्शन, Chrome 126 (जुलाई 2024) तक का है.
fetchLater() एपीआई
const fetchLaterResult = fetchLater(request, options);
fetchLater() में दो आर्ग्युमेंट इस्तेमाल किए जाते हैं. ये आम तौर पर, fetch() के आर्ग्युमेंट के जैसे होते हैं:
request, या तो एक स्ट्रिंग यूआरएल या एकRequestइंस्टेंस.- एक वैकल्पिक
optionsऑब्जेक्ट, जोactivateAfterनाम के टाइम आउट के साथfetch()सेoptionsको बढ़ाता है.
fetchLater() से एक FetchLaterResult मिलता है, जिसमें फ़िलहाल सिर्फ़ एक रीड-ओनली प्रॉपर्टी activated है. "बाद में" पास होने और फ़ेच हो जाने पर, इसे true पर सेट किया जाएगा. fetchLater() अनुरोध का कोई भी जवाब खारिज कर दिया जाता है.
request
सबसे आसान इस्तेमाल अपने-आप में यूआरएल है:
fetchLater('/endpoint/');
हालांकि, fetch() की तरह ही, fetchLater() के अनुरोध पर बहुत सारे विकल्प सेट किए जा सकते हैं. इनमें कस्टम हेडर, क्रेडेंशियल व्यवहार, POST का मुख्य भाग, और AbortController signal को रद्द करने के लिए शामिल किया जा सकता है.
fetchLater('/endpoint/', {
method: 'GET',
cache: 'no-store',
mode: 'same-origin',
headers: {Authorization: 'SUPER_SECRET'},
});
options
विकल्प ऑब्जेक्ट, fetch() के विकल्पों को टाइम आउट activateAfter के साथ बढ़ा देता है. ऐसा इसलिए किया जाता है, ताकि आप टाइम आउट के बाद या पेज अनलोड होने के बाद अनुरोध ट्रिगर कर सकें, इनमें से जो भी पहले हो.
इससे आपको यह तय करने में मदद मिलती है कि डेटा मिलने के आखिरी समय पर या सही समय पर डेटा कब आएगा.
उदाहरण के लिए, अगर आपके पास कोई ऐसा ऐप्लिकेशन है, जिसे आपके उपयोगकर्ता आम तौर पर पूरे कामकाजी दिन खुला रखते हैं, तो आप ज़्यादा आंकड़े हासिल करने के लिए एक घंटे का टाइम आउट रखना चाहेंगे. साथ ही, यह भी हो सकता है कि अगर उपयोगकर्ता उस घंटे के खत्म होने से पहले ही किसी भी समय ऐप्लिकेशन से बाहर निकल जाए, तो आपको बीकन की गारंटी दी जा सके. इसके बाद, अगले घंटे के आंकड़ों के लिए एक नया fetchLater() सेट अप किया जा सकता है.
const hourInMilliseconds = 60 * 60 * 1000;
fetchLater('/endpoint/', {activateAfter: hourInMilliseconds});
इस्तेमाल का उदाहरण
फ़ील्ड में वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को मेज़र करते समय एक समस्या यह है कि जब तक उपयोगकर्ता पेज नहीं छोड़ता, तब तक परफ़ॉर्मेंस मेट्रिक में बदलाव हो सकता है. उदाहरण के लिए, किसी भी समय बड़े लेआउट शिफ़्ट हो सकते हैं या पेज को किसी इंटरैक्शन का जवाब देने में और भी ज़्यादा समय लग सकता है.
हालांकि, पेज अनलोड करने में किसी गड़बड़ी या अधूरे बीकन की वजह से, परफ़ॉर्मेंस का पूरा डेटा खोने का जोखिम नहीं होना चाहिए. fetchLater() के चुनाव के लिए यह सही उम्मीदवार है.
इस उदाहरण में, web-vitals.js लाइब्रेरी का इस्तेमाल मेट्रिक पर नज़र रखने के लिए किया गया है. वहीं, fetchLater() का इस्तेमाल, Analytics एंडपॉइंट पर नतीजों को रिपोर्ट करने के लिए किया गया है:
import {onCLS, onINP, onLCP} from 'web-vitals';
const queue = new Set();
let fetchLaterController;
let fetchLaterResult;
function updateQueue(metricUpdate) {
// If there was an already complete request for whatever
// reason, clear out the queue of already-sent updates.
if (fetchLaterResult?.activated) {
queue.clear();
}
queue.add(metricUpdate);
// JSON.stringify used here for simplicity and will likely include
// more data than you need. Replace with a preferred serialization.
const body = JSON.stringify([...queue]);
// Abort any existing `fetchLater()` and schedule a new one with
// the update included.
fetchLaterController?.abort();
fetchLaterController = new AbortController();
fetchLaterResult = fetchLater('/analytics', {
method: 'POST',
body,
signal: fetchLaterController.signal,
activateAfter: 60 * 60 * 1000, // Timeout to ensure timeliness.
});
}
onCLS(updateQueue);
onINP(updateQueue);
onLCP(updateQueue);
जब भी कोई मेट्रिक अपडेट आता है, तो AbortController के साथ शेड्यूल किया गया कोई भी मौजूदा fetchLater() रद्द कर दिया जाता है और शामिल किए गए अपडेट के साथ एक नया fetchLater() बना दिया जाता है.
fetchLater() को आज़माएं
जैसा कि बताया गया है, fetchLater(), Chrome 126 तक ऑरिजिन ट्रायल में उपलब्ध है. ऑरिजिन ट्रायल के बारे में बैकग्राउंड की जानकारी के लिए, "ऑरिजिन ट्रायल का इस्तेमाल शुरू करना" देखें
लोकल टेस्टिंग के लिए, fetchLater को chrome://flags/#enable-experimental-web-platform-features पर एक्सपेरिमेंट वाले वेब प्लैटफ़ॉर्म के फ़ीचर फ़्लैग के साथ चालू किया जा सकता है. इसे --enable-experimental-web-platform-features की मदद से कमांड लाइन से Chrome चलाकर या ज़्यादा टारगेट किए गए --enable-features=FetchLaterAPI फ़्लैग का इस्तेमाल करके भी चालू किया जा सकता है.
अगर इसे किसी सार्वजनिक पेज पर इस्तेमाल किया जाता है, तो इस सुविधा का इस्तेमाल करने से पहले, यह जांच लें कि ग्लोबल fetchLater को परिभाषित किया गया है या नहीं, इसकी पहचान ज़रूर करें:
if (globalThis.fetchLater) {
// Set up beaconing using fetchLater().
// ...
}
सुझाव/राय दें या शिकायत करें
नए वेब एपीआई को सही करने के लिए डेवलपर का सुझाव देना ज़रूरी है, इसलिए कृपया GitHub पर समस्याएं और सुझाव दें.