वेब पेजों का डेटा (या "बीकन") वापस अपने सर्वर पर भेजना आम बात है—उदाहरण के तौर पर, उपयोगकर्ता के मौजूदा सेशन के आंकड़ों के डेटा के बारे में सोचें. डेवलपर को इस बात का ध्यान रखना होगा कि वे लगातार और ज़रूरत से ज़्यादा अनुरोधों को कम करें. ऐसा करने से, अगर टैब बंद हो जाता है या बीकन भेजे जाने से पहले उपयोगकर्ता किसी दूसरे पेज पर चला जाता है, तो डेटा मिटने का खतरा नहीं होगा.
आम तौर पर, डेवलपर पेज के अनलोड होने पर उसे कैप्चर करने के लिए, pagehide और visibilitychange इवेंट का इस्तेमाल करते हैं. इसके बाद, डेटा को बीकन करने के लिए keepalive के साथ navigator.sendBeacon() या fetch() का इस्तेमाल करते हैं. हालांकि, इन दोनों इवेंट में ऐसे मुश्किल मामले होते हैं जो उपयोगकर्ता के ब्राउज़र के हिसाब से अलग-अलग होते हैं. साथ ही, कभी-कभी इवेंट कभी नहीं आते, खास तौर पर मोबाइल पर.
fetchLater() एक ऐसा प्रस्ताव है जिससे इस जटिलता को एक ही एपीआई कॉल से बदला जा सकता है. यह ठीक वैसा ही करता है जैसा इसके नाम से पता चलता है: यह ब्राउज़र से यह पक्का करने के लिए कहता है कि आने वाले समय में किसी समय अनुरोध किया जाए. पेज बंद होने या उपयोगकर्ता वहां से चले जाने पर भी ऐसा करता है.
fetchLater(), Chrome में ऑरिजिन ट्रायल के तहत असल उपयोगकर्ताओं के साथ टेस्ट करने के लिए उपलब्ध है. यह ट्रायल, 121 वर्शन (जनवरी 2024 में रिलीज़ किया गया) से शुरू हुआ था और 3 सितंबर, 2024 तक चलेगा.
fetchLater() API
const fetchLaterResult = fetchLater(request, options);
fetchLater() में दो आर्ग्युमेंट होते हैं, जो आम तौर पर fetch() के आर्ग्युमेंट से मिलते-जुलते होते हैं:
request, स्ट्रिंग यूआरएल याRequestइंस्टेंस.optionsऑब्जेक्ट, जोoptionsकोfetch()से बढ़ाता है. इसके लिए,activateAfterनाम का टाइम आउट इस्तेमाल किया जाता है. हालांकि, यह ऑब्जेक्ट इस्तेमाल करना ज़रूरी नहीं है.
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
अगर आप टाइम आउट के बाद या पेज अनलोड होने के बाद अनुरोध को सक्रिय करना चाहते हैं, तो विकल्प ऑब्जेक्ट, टाइमआउट, activateAfter के साथ fetch() के विकल्पों को बढ़ाता है. इन विकल्पों में से जो भी पहले हो.
इसकी मदद से, आपको यह तय करने में मदद मिलती है कि आपको आखिरी समय पर डेटा हासिल करने के साथ-साथ, सही समय पर डेटा कैसे मिलेगा.
उदाहरण के लिए, अगर आपका कोई ऐसा ऐप्लिकेशन है जिसे उपयोगकर्ता आम तौर पर पूरे कामकाजी दिन के लिए खुला रखते हैं, तो हो सकता है कि आप एक घंटे का टाइम आउट सेट करना चाहें. इससे आपको ज़्यादा बेहतर आंकड़ों की जानकारी मिलती है. साथ ही, अगर उपयोगकर्ता उस एक घंटे के अंदर ऐप्लिकेशन से बाहर निकलता है, तो भी आपको बीकन भेजने की गारंटी मिलती है. इसके बाद, अगले घंटे के आंकड़े देखने के लिए, एक नया fetchLater() सेट अप किया जा सकता है.
const hourInMilliseconds = 60 * 60 * 1000;
fetchLater('/endpoint/', {activateAfter: hourInMilliseconds});
इस्तेमाल का उदाहरण
फ़ील्ड में वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को मेज़र करते समय एक समस्या आती है. यह समस्या यह है कि जब तक उपयोगकर्ता किसी पेज को छोड़कर नहीं जाता, तब तक परफ़ॉर्मेंस की कोई भी मेट्रिक बदल सकती है. उदाहरण के लिए, लेआउट में बड़े बदलाव कभी भी हो सकते हैं या किसी इंटरैक्शन का जवाब देने में पेज को ज़्यादा समय लग सकता है.
हालांकि, पेज अनलोड होने पर बग या अधूरी बीकनिंग की वजह से, परफ़ॉर्मेंस का पूरा डेटा खोने का जोखिम नहीं उठाया जा सकता. यह fetchLater() के लिए सबसे सही उम्मीदवार है.
इस उदाहरण में, मेट्रिक को मॉनिटर करने के लिए web-vitals.js लाइब्रेरी का इस्तेमाल किया गया है. साथ ही, नतीजों को Analytics एंडपॉइंट को रिपोर्ट करने के लिए fetchLater() का इस्तेमाल किया गया है:
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);
जब भी कोई मेट्रिक अपडेट मिलता है, तो शेड्यूल किया गया कोई भी मौजूदा fetchLater(), AbortController के साथ रद्द कर दिया जाता है. साथ ही, अपडेट के साथ एक नया fetchLater() बनाया जाता है.
fetchLater() को आज़माएं
जैसा कि बताया गया है, fetchLater() Chrome 126 तक ऑरिजिन ट्रायल में उपलब्ध है. ऑरिजिन ट्रायल के बारे में ज़्यादा जानने के लिए, "ऑरिजिन ट्रायल का इस्तेमाल शुरू करना" लेख पढ़ें
स्थानीय टेस्टिंग के लिए, fetchLater को chrome://flags/#enable-experimental-web-platform-features पर मौजूद एक्सपेरिमेंटल वेब प्लैटफ़ॉर्म की सुविधाओं के फ़्लैग की मदद से चालू किया जा सकता है. इसे कमांड लाइन से Chrome को --enable-experimental-web-platform-features या ज़्यादा टारगेट किए गए --enable-features=FetchLaterAPI फ़्लैग के साथ चलाकर भी चालू किया जा सकता है.
अगर इसका इस्तेमाल किसी सार्वजनिक पेज पर किया जाता है, तो पक्का करें कि आपने इस सुविधा का इस्तेमाल करने से पहले, ग्लोबल fetchLater तय किया हो:
if (globalThis.fetchLater) {
// Set up beaconing using fetchLater().
// ...
}
सुझाव/राय दें या शिकायत करें
नए वेब एपीआई को सही बनाने के लिए, डेवलपर का सुझाव या राय ज़रूरी है. इसलिए, कृपया GitHub पर समस्याएं और सुझाव सबमिट करें.