ওয়েব পৃষ্ঠাগুলির জন্য তাদের সার্ভারে ডেটা (বা "বীকন") ফেরত পাঠানোর প্রয়োজন হয় - উদাহরণ হিসাবে একজন ব্যবহারকারীর বর্তমান সেশনের জন্য বিশ্লেষণ ডেটা মনে করুন৷ ডেভেলপারদের জন্য, এটির জন্য একটি ভারসাম্যমূলক কাজ প্রয়োজন: ট্যাবটি বন্ধ হয়ে গেলে বা বীকন পাঠানোর আগে ব্যবহারকারী নেভিগেট করলে মিসড ডেটা ঝুঁকি ছাড়াই ধ্রুবক, সম্ভবত অপ্রয়োজনীয়, অনুরোধগুলি হ্রাস করা।
প্রথাগতভাবে, বিকাশকারীরা pagehide এবং visibilitychange ইভেন্টগুলি ব্যবহার করে পেজটি আনলোড করার সাথে সাথে ধরতে এবং তারপরে navigator.sendBeacon() বা একটি fetch() ব্যবহার করে keepalive টু বীকন ডেটা সহ। যাইহোক, এই দুটি ইভেন্টেরই কঠিন কর্নার কেস রয়েছে যা ব্যবহারকারীর ব্রাউজারের উপর ভিত্তি করে আলাদা, এবং কখনও কখনও ইভেন্টগুলি কখনই আসে না—বিশেষ করে মোবাইলে।
fetchLater() একটি একক API কল দিয়ে এই জটিলতা প্রতিস্থাপন করার একটি প্রস্তাব। এটি ঠিক তার নাম অনুসারে কাজ করে: এটি ব্রাউজারকে ভবিষ্যতে কোনও সময়ে একটি অনুরোধ করা হয়েছে তা নিশ্চিত করতে বলে, এমনকি যদি পৃষ্ঠাটি বন্ধ থাকে বা ব্যবহারকারী চলে যান।
fetchLater() 121 সংস্করণ (জানুয়ারী 2024 এ প্রকাশিত) থেকে শুরু হওয়া একটি অরিজিন ট্রায়ালের পিছনে প্রকৃত ব্যবহারকারীদের সাথে পরীক্ষার জন্য Chrome-এ উপলব্ধ, Chrome 126 (জুলাই 2024) পর্যন্ত চলবে।
fetchLater() API
const fetchLaterResult = fetchLater(request, options);
fetchLater() দুটি আর্গুমেন্ট নেয়, সাধারণত fetch() এর মতই:
-
request, হয় একটি স্ট্রিং URL বা একটিRequestউদাহরণ৷ - একটি ঐচ্ছিক
optionsঅবজেক্ট, যাactivateAfterনামে একটি টাইমআউট সহfetch()থেকেoptionsপ্রসারিত করে।
fetchLater() একটি FetchLaterResult প্রদান করে, বর্তমানে শুধুমাত্র একটি মাত্র পঠনযোগ্য সম্পত্তি activated রয়েছে, যা "পরে" পাস হয়ে গেলে এবং আনয়ন করা হলে true হিসাবে সেট করা হবে। fetchLater() অনুরোধের কোনো প্রতিক্রিয়া বাতিল করা হয়।
request
সহজতম ব্যবহার নিজেই একটি URL:
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() একটি বিশ্লেষণের শেষ পয়েন্টে ফলাফল রিপোর্ট করতে ব্যবহার করা হয়:
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() ক্রোম 126 পর্যন্ত একটি অরিজিন ট্রায়ালে উপলব্ধ। মূল ট্রায়ালগুলির পটভূমির তথ্যের জন্য " অরিজিন ট্রায়াল দিয়ে শুরু করুন " দেখুন
স্থানীয় পরীক্ষার জন্য, chrome://flags/#enable-experimental-web-platform-features এ এক্সপেরিমেন্টাল ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্যের পতাকা দিয়ে fetchLater সক্ষম করা যেতে পারে। কমান্ড লাইন থেকে Chrome-কে --enable-experimental-web-platform-features , অথবা আরো টার্গেট করা --enable-features=FetchLaterAPI পতাকা দিয়েও এটি সক্রিয় করা যেতে পারে।
আপনি যদি এটি একটি সর্বজনীন পৃষ্ঠায় ব্যবহার করেন, তাহলে এটি ব্যবহার করার আগে গ্লোবাল fetchLater সংজ্ঞায়িত কিনা তা পরীক্ষা করে বৈশিষ্ট্য সনাক্তকরণ নিশ্চিত করুন:
if (globalThis.fetchLater) {
// Set up beaconing using fetchLater().
// ...
}
প্রতিক্রিয়া
নতুন ওয়েব API সঠিকভাবে পাওয়ার জন্য বিকাশকারীর প্রতিক্রিয়া অপরিহার্য, তাই অনুগ্রহ করে গিটহাব-এ সমস্যা এবং প্রতিক্রিয়া ফাইল করুন ।