फ़ेचLater API का ऑरिजिन ट्रायल

Brendan Kenny

आम तौर पर, वेब पेजों को अपने सर्वर पर डेटा (या "बीकन") भेजना पड़ता है. उदाहरण के लिए, उपयोगकर्ता के मौजूदा सेशन का आंकड़ों का डेटा. डेवलपर को इस बात का ध्यान रखना होगा कि वे लगातार और ज़रूरत से ज़्यादा अनुरोधों को कम करें. ऐसा करने से, अगर टैब बंद हो जाता है या बीकन भेजे जाने से पहले उपयोगकर्ता किसी दूसरे पेज पर चला जाता है, तो डेटा मिटने का खतरा नहीं होगा.

आम तौर पर, डेवलपर पेज के अनलोड होने पर उसे कैप्चर करने के लिए, 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

विकल्प ऑब्जेक्ट, fetch() के विकल्पों को टाइम आउट, activateAfter के साथ बढ़ाता है. ऐसा तब किया जाता है, जब आपको टाइम आउट के बाद या पेज के अनलोड होने के बाद, अनुरोध ट्रिगर करना हो.

इससे, आपको यह तय करने में मदद मिलती है कि डेटा को आखिरी समय पर या समय से पहले कब पाना है.

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

ज़्यादा जानकारी