ব্যবহারকারী যখন কোনো পেজ বা অ্যাপ বন্ধ করেন, তখন তাতে জমা না হওয়া অ্যানালিটিক্স বা অন্যান্য ডেটা থাকাটা একটি সাধারণ ব্যাপার। ডেটা নষ্ট হওয়া থেকে বাঁচাতে, কিছু সাইট XMLHttpRequest() ফাংশনে একটি সিনক্রোনাস কল ব্যবহার করে পেজ বা অ্যাপটিকে ততক্ষণ পর্যন্ত খোলা রাখে, যতক্ষণ না এর ডেটা সার্ভারে পাঠানো হয়। ডেটা সংরক্ষণের জন্য আরও ভালো উপায় তো আছেই, উপরন্তু এই কৌশলটি পেজ বন্ধ হতে কয়েক সেকেন্ড পর্যন্ত দেরি করিয়ে একটি খারাপ ব্যবহারকারী অভিজ্ঞতা তৈরি করে।
এই অভ্যাসটি পরিবর্তন করা প্রয়োজন, এবং ব্রাউজারগুলো তাতে সাড়া দিচ্ছে। XMLHttpRequest() স্পেসিফিকেশনটি ইতোমধ্যেই অপ্রচলিত ঘোষণা এবং অপসারণের জন্য নির্ধারিত হয়েছে। Chrome 80 প্রথম পদক্ষেপ হিসেবে কয়েকটি ইভেন্ট হ্যান্ডলারের ভেতরে সিনক্রোনাস কল নিষিদ্ধ করেছে; বিশেষত beforeunload , unload , pagehide , এবং visibilitychange যখন এগুলো ডিসমিস করার সময় ফায়ার হয়। WebKit-ও সম্প্রতি একই আচরণগত পরিবর্তন বাস্তবায়ন করে একটি কমিট যুক্ত করেছে।
যাদের সাইট আপডেট করার জন্য সময় প্রয়োজন, তাদের জন্য আমি সংক্ষেপে বিকল্পগুলো বর্ণনা করব এবং XMLHttpRequest() -এর বিকল্পগুলো তুলে ধরব।
অস্থায়ী অপ্ট-আউট
Chrome ডেভেলপারদের XMLHttpRequest() এর উপর নির্ভরতা কমাতে সময় দিতে চায়, তাই আমরা অস্থায়ীভাবে এটি থেকে বেরিয়ে আসার বিকল্প দিয়েছি।
একটি অরিজিন ট্রায়ালে যোগ দিন । এর মাধ্যমে, আপনি আপনার পেজ হেডারে একটি অরিজিন-নির্দিষ্ট টোকেন যোগ করতে পারবেন, যা সিনক্রোনাস XMLHttpRequest() কল সক্ষম করে। এই বিকল্পটি Chrome 89 প্রকাশের ঠিক আগে, ২০২১ সালের মার্চ মাসের কোনো এক সময়ে শেষ হয়ে যাবে। এন্টারপ্রাইজ Chrome গ্রাহকরা AllowSyncXHRInPageDismissal পলিসি ফ্ল্যাগটিও ব্যবহার করতে পারেন, যা একই সময়ে শেষ হয়ে যাবে।
বিকল্প
আপনি সার্ভারে যেভাবে ডেটা পাঠান না কেন, একবারে সমস্ত ডেটা পাঠানোর জন্য পেজ আনলোড হওয়া পর্যন্ত অপেক্ষা করা এড়িয়ে চলাই ভালো। ব্যবহারকারীর অভিজ্ঞতা খারাপ করা ছাড়াও, আধুনিক ব্রাউজারগুলিতে আনলোড নির্ভরযোগ্য নয় এবং কিছু ভুল হলে ডেটা হারানোর ঝুঁকি থাকে। বিশেষ করে, মোবাইল ব্রাউজারগুলিতে আনলোড ইভেন্ট প্রায়শই ফায়ার হয় না, কারণ মোবাইল অপারেটিং সিস্টেমে unload ইভেন্ট ফায়ার না করেই একটি ট্যাব বা ব্রাউজার বন্ধ করার অনেক উপায় রয়েছে। XMLHttpRequest() এর ক্ষেত্রে, ছোট পেলোড ব্যবহার করা একটি ঐচ্ছিক বিষয় ছিল। এখন এটি একটি আবশ্যিক শর্ত। স্পেসিফিকেশন অনুযায়ী, এর উভয় বিকল্পের ক্ষেত্রেই প্রতি কনটেক্সটে ৬৪ KB আপলোড সীমা রয়েছে।
ফেচ কিপঅ্যালাইভ
ফেচ এপিআই সার্ভারের সাথে মিথস্ক্রিয়া পরিচালনার জন্য একটি শক্তিশালী উপায় এবং বিভিন্ন প্ল্যাটফর্ম এপিআই জুড়ে ব্যবহারের জন্য একটি সামঞ্জস্যপূর্ণ ইন্টারফেস প্রদান করে। এর অপশনগুলোর মধ্যে একটি হলো keepalive , যা নিশ্চিত করে যে অনুরোধটি যে পেজ থেকে করা হয়েছে সেটি খোলা থাকুক বা না থাকুক, অনুরোধটি চলতে থাকবে।
window.addEventListener('unload', {
fetch('/siteAnalytics', {
method: 'POST',
body: getStatistics(),
keepalive: true
});
}
` fetch() ` মেথডের সুবিধা হলো, সার্ভারে কী পাঠানো হবে তার ওপর আরও বেশি নিয়ন্ত্রণ রাখা যায়। উদাহরণে আমি যা দেখাইনি তা হলো, fetch() ` একটি `promise`-ও রিটার্ন করে, যা একটি Response অবজেক্ট দিয়ে রিজলভ হয়। যেহেতু আমি পেজটি আনলোড হওয়ার প্রক্রিয়াটি এড়িয়ে যেতে চাইছি, তাই আমি এটি নিয়ে কিছু না করার সিদ্ধান্ত নিয়েছি।
SendBeacon()
SendBeacon() আসলে অভ্যন্তরীণভাবে Fetch API ব্যবহার করে, যে কারণে এটির পেলোডের সীমাবদ্ধতা ৬৪ KB এবং এটি পেজ আনলোড হওয়ার পরেও রিকোয়েস্টের ধারাবাহিকতা নিশ্চিত করে। এর প্রধান সুবিধা হলো এর সরলতা। এটি আপনাকে কোডের মাত্র একটি লাইনে আপনার ডেটা সাবমিট করার সুযোগ দেয়:
window.addEventListener('unload', {
navigator.sendBeacon('/siteAnalytics', getStatistics());
}
উপসংহার
বিভিন্ন ব্রাউজারে fetch() এর সহজলভ্যতা বাড়ার সাথে সাথে, আশা করা যায় XMLHttpRequest() ওয়েব প্ল্যাটফর্ম থেকে সরিয়ে দেওয়া হবে। ব্রাউজার নির্মাতারাও এটি সরিয়ে দেওয়ার ব্যাপারে একমত, কিন্তু এতে সময় লাগবে। এর সবচেয়ে খারাপ ব্যবহারগুলোর একটিকে অপ্রচলিত ঘোষণা করা হলো প্রথম পদক্ষেপ, যা সকলের জন্য ব্যবহারকারীর অভিজ্ঞতা উন্নত করবে।