প্রকাশিত: ৬ অক্টোবর, ২০২০
কিছু HTTP অনুরোধে একটি Range: হেডার থাকে, যা নির্দেশ করে যে সম্পূর্ণ রিসোর্সের কেবল একটি অংশই ফেরত দেওয়া হবে। এগুলি সাধারণত অডিও বা ভিডিও কন্টেন্ট স্ট্রিমিংয়ের জন্য ব্যবহৃত হয়, যাতে দূরবর্তী ফাইলের সম্পূর্ণ অংশ একবারে অনুরোধ না করে, চাহিদা অনুযায়ী মিডিয়ার ছোট ছোট অংশ লোড করা যায়।
সার্ভিস ওয়ার্কার হলো জাভাস্ক্রিপ্ট কোড যা আপনার ওয়েব অ্যাপ এবং নেটওয়ার্কের মাঝে অবস্থান করে, এবং এটি বহির্গামী নেটওয়ার্ক অনুরোধগুলো গ্রহণ করে সেগুলোর জন্য প্রতিক্রিয়া তৈরি করতে পারে।
ঐতিহাসিকভাবে, রেঞ্জ রিকোয়েস্ট এবং সার্ভিস ওয়ার্কার একসাথে ভালোভাবে কাজ করত না। আপনার সার্ভিস ওয়ার্কারে খারাপ ফলাফল এড়ানোর জন্য বিশেষ পদক্ষেপ নেওয়া প্রয়োজন হতো। সৌভাগ্যবশত, এই পরিস্থিতি বদলাতে শুরু করেছে। যেসব ব্রাউজার সঠিক আচরণ প্রদর্শন করে, সেগুলোতে সার্ভিস ওয়ার্কারের মধ্য দিয়ে যাওয়ার সময় রেঞ্জ রিকোয়েস্টগুলো স্বাভাবিকভাবেই কাজ করবে।
সমস্যাটা কী?
নিম্নলিখিত fetch ইভেন্ট লিসেনার সহ একটি সার্ভিস ওয়ার্কারের কথা বিবেচনা করুন, যা প্রতিটি আগত অনুরোধ গ্রহণ করে এবং সেটিকে নেটওয়ার্কে প্রেরণ করে:
self.addEventListener('fetch', (event) => {
// The Range: header will not pass through in
// browsers that behave incorrectly.
event.respondWith(fetch(event.request));
});
যেসব ব্রাউজারে ভুল আচরণ দেখা যায়, সেখানে event.request যদি একটি Range: হেডার অন্তর্ভুক্ত থাকে, তবে সেই হেডারটি নীরবে বাদ দেওয়া হয়। রিমোট সার্ভার যে রিকোয়েস্টটি গ্রহণ করে, তাতে Range: হেডারটি একেবারেই থাকে না। এতে অবশ্যম্ভাবীভাবে কোনো কিছু "ভেঙে" যাবে না, কারণ মূল রিকোয়েস্টে Range: হেডার উপস্থিত থাকলেও একটি সার্ভার প্রযুক্তিগতভাবে 200 স্ট্যাটাস কোড সহ সম্পূর্ণ রেসপন্স বডি ফেরত পাঠাতে পারে। কিন্তু এর ফলে ব্রাউজারের দৃষ্টিকোণ থেকে প্রয়োজনের চেয়ে বেশি ডেটা স্থানান্তরিত হবে।
যেসব ডেভেলপার এই আচরণ সম্পর্কে অবগত, তারা একটি Range: হেডারের উপস্থিতি স্পষ্টভাবে পরীক্ষা করে এবং সেটি উপস্থিত থাকলে event.respondWith() কল না করার মাধ্যমে এর একটি সমাধান করতে পারেন। এটি করার মাধ্যমে, সার্ভিস ওয়ার্কার কার্যকরভাবে রেসপন্স তৈরির প্রক্রিয়া থেকে নিজেকে সরিয়ে নেয় এবং এর পরিবর্তে ডিফল্ট ব্রাউজার নেটওয়ার্কিং লজিক ব্যবহৃত হয়, যা রেঞ্জ রিকোয়েস্ট সংরক্ষণ করতে জানে।
self.addEventListener('fetch', (event) => {
// Return without calling event.respondWith()
// if this is a range request.
if (event.request.headers.has('range')) {
return;
}
event.respondWith(fetch(event.request));
});
তবে এটা বলাই যায় যে, বেশিরভাগ ডেভেলপারই এটি করার প্রয়োজনীয়তা সম্পর্কে অবগত ছিলেন না। এবং কেন এটির প্রয়োজন হবে, সেটাও স্পষ্ট ছিল না। পরিশেষে, এই সীমাবদ্ধতার কারণ ছিল ব্রাউজারগুলোকে মূল স্পেসিফিকেশনের পরিবর্তনগুলোর সাথে তাল মেলাতে হচ্ছিল, যা এই কার্যকারিতার জন্য সমর্থন যোগ করেছিল।
কী ঠিক করা হয়েছে?
যেসব ব্রাউজার সঠিকভাবে কাজ করে, তারা fetch() ফাংশনে event.request পাস করার সময় Range: হেডারটি সংরক্ষণ করে। এর মানে হলো, আমার প্রথম উদাহরণের সার্ভিস ওয়ার্কার কোডটি রিমোট সার্ভারকে Range: হেডারটি দেখতে দেবে, যদি ব্রাউজার দ্বারা সেটি সেট করা হয়ে থাকে।
self.addEventListener('fetch', (event) => {
// The Range: header will pass through in browsers
// that behave correctly.
event.respondWith(fetch(event.request));
});
সার্ভারটি এখন রেঞ্জ রিকোয়েস্টটি যথাযথভাবে হ্যান্ডেল করার এবং 206 স্ট্যাটাস কোড সহ একটি আংশিক রেসপন্স ফেরত দেওয়ার সুযোগ পায়।
কোন ব্রাউজারগুলো সঠিকভাবে কাজ করে?
সাফারির সাম্প্রতিক সংস্করণগুলোতে সঠিক কার্যকারিতা রয়েছে। ক্রোম এবং এজ, সংস্করণ ৮৭ থেকে শুরু করে, একইভাবে সঠিকভাবে কাজ করে।
এই অক্টোবর ২০২০ পর্যন্ত, ফায়ারফক্স এখনও এই আচরণটি ঠিক করেনি, তাই আপনার সার্ভিস ওয়ার্কারের কোড প্রোডাকশনে স্থাপন করার সময় আপনাকে এখনও এটি বিবেচনায় রাখতে হতে পারে।
কোনো নির্দিষ্ট ব্রাউজার এই আচরণটি সংশোধন করেছে কি না, তা নিশ্চিত করার সর্বোত্তম উপায় হলো ওয়েব প্ল্যাটফর্ম টেস্টস ড্যাশবোর্ডের "নেটওয়ার্ক অনুরোধে রেঞ্জ হেডার অন্তর্ভুক্ত করুন" সারিটি পরীক্ষা করা।
ক্যাশ থেকে রেঞ্জ রিকোয়েস্টগুলো সার্ভ করার ব্যাপারে কী বলা যায়?
সার্ভিস ওয়ার্কাররা শুধু নেটওয়ার্কে অনুরোধ পাঠানোর চেয়েও আরও অনেক বেশি কিছু করতে পারে। এর একটি সাধারণ ব্যবহার হলো অডিও এবং ভিডিও ফাইলের মতো রিসোর্সগুলোকে লোকাল ক্যাশে যুক্ত করা। এরপর একটি সার্ভিস ওয়ার্কার সেই ক্যাশে থেকে অনুরোধগুলো পূরণ করতে পারে, যার ফলে নেটওয়ার্ককে পুরোপুরি এড়িয়ে যাওয়া যায়।
ফায়ারফক্স সহ সমস্ত ব্রাউজারই একটি fetch হ্যান্ডলারের ভিতরে কোনো রিকোয়েস্ট পরীক্ষা করা, Range: হেডারের উপস্থিতি যাচাই করা এবং তারপর ক্যাশ থেকে আসা একটি 206 রেসপন্স দিয়ে স্থানীয়ভাবে রিকোয়েস্টটি পূরণ করা সমর্থন করে। তবে Range: হেডারটিকে সঠিকভাবে পার্স করা এবং সম্পূর্ণ ক্যাশ করা রেসপন্সের শুধুমাত্র উপযুক্ত অংশটি ফেরত দেওয়ার জন্য সার্ভিস ওয়ার্কারের কোডটি সহজসাধ্য নয়।
সৌভাগ্যবশত, যেসব ডেভেলপার সাহায্য চান, তারা Workbox- এর সাহায্য নিতে পারেন, যা হলো এমন কিছু লাইব্রেরির সমষ্টি যা সাধারণ সার্ভিস ওয়ার্কার ব্যবহারের ক্ষেত্রগুলোকে সহজ করে তোলে। workbox-range-request module সরাসরি ক্যাশ থেকে আংশিক প্রতিক্রিয়া পরিবেশন করার জন্য প্রয়োজনীয় সমস্ত লজিক বাস্তবায়ন করে। এই ব্যবহারের ক্ষেত্রটির একটি সম্পূর্ণ বিবরণ Workbox ডকুমেন্টেশনে পাওয়া যাবে।