একটি আংশিক প্রতিক্রিয়া অনুরোধ করা হলে কি করতে হবে তা আপনার পরিষেবা কর্মী জানেন তা নিশ্চিত করুন৷
কিছু 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: আদৌ। এটি অগত্যা কিছু "ব্রেক" করবে না, যেহেতু একটি সার্ভারকে 200 স্ট্যাটাস কোড সহ সম্পূর্ণ রেসপন্স বডি ফেরত দেওয়ার অনুমতি দেওয়া হয় , এমনকি যখন একটি Range: হেডার মূল অনুরোধে উপস্থিত থাকে। কিন্তু এর ফলে ব্রাউজারের দৃষ্টিকোণ থেকে কঠোরভাবে প্রয়োজনের চেয়ে বেশি ডেটা স্থানান্তরিত হবে।
বিকাশকারীরা যারা এই আচরণ সম্পর্কে সচেতন ছিল তারা স্পষ্টভাবে একটি 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));
});
এটা বলা নিরাপদ যে বেশিরভাগ বিকাশকারীরা এটি করার প্রয়োজনীয়তা সম্পর্কে সচেতন ছিলেন না। এবং কেন এটি প্রয়োজন হবে তা পরিষ্কার ছিল না। শেষ পর্যন্ত, এই সীমাবদ্ধতাটি ব্রাউজারগুলির অন্তর্নিহিত স্পেসিফিকেশনের পরিবর্তনগুলি ধরার প্রয়োজনের কারণে হয়েছিল, যা এই কার্যকারিতার জন্য সমর্থন যোগ করেছে৷
কি ঠিক করা হয়েছে?
যে ব্রাউজারগুলি সঠিকভাবে আচরণ করে Range: হেডার সংরক্ষণ করে যখন event.request fetch() এ পাস করা হয়। এর মানে আমার প্রাথমিক উদাহরণে পরিষেবা কর্মী কোডটি দূরবর্তী সার্ভারকে Range: হেডার দেখতে অনুমতি দেবে, যদি এটি ব্রাউজার দ্বারা সেট করা হয়:
self.addEventListener('fetch', (event) => {
// The Range: header will pass through in browsers
// that behave correctly.
event.respondWith(fetch(event.request));
});
সার্ভার এখন সঠিকভাবে পরিসীমা অনুরোধ পরিচালনা করার এবং একটি 206 স্ট্যাটাস কোড সহ একটি আংশিক প্রতিক্রিয়া ফেরত দেওয়ার সুযোগ পায়৷
কোন ব্রাউজার সঠিকভাবে আচরণ করে?
সাফারির সাম্প্রতিক সংস্করণগুলির সঠিক কার্যকারিতা রয়েছে। ক্রোম এবং এজ, সংস্করণ 87 দিয়ে শুরু, পাশাপাশি সঠিকভাবে আচরণ করে।
এই অক্টোবর 2020 থেকে, ফায়ারফক্স এখনও এই আচরণটি ঠিক করেনি, তাই আপনার পরিষেবা কর্মীর কোড উৎপাদনে মোতায়েন করার সময় আপনাকে এখনও এটির জন্য অ্যাকাউন্ট করতে হবে।
ওয়েব প্ল্যাটফর্ম টেস্ট ড্যাশবোর্ডের "নেটওয়ার্ক অনুরোধে পরিসরের শিরোনাম অন্তর্ভুক্ত করুন" সারিটি পরীক্ষা করা হল একটি প্রদত্ত ব্রাউজার এই আচরণটি সংশোধন করেছে কিনা তা নিশ্চিত করার সর্বোত্তম উপায়।
ক্যাশে থেকে পরিসীমা অনুরোধ পরিবেশন সম্পর্কে কি?
পরিষেবা কর্মীরা নেটওয়ার্কের মাধ্যমে একটি অনুরোধ পাস করার চেয়ে আরও অনেক কিছু করতে পারে। একটি সাধারণ ব্যবহারের ক্ষেত্রে স্থানীয় ক্যাশে অডিও এবং ভিডিও ফাইলের মতো সংস্থান যোগ করা। একজন পরিষেবা কর্মী তারপর নেটওয়ার্কটিকে সম্পূর্ণভাবে বাইপাস করে সেই ক্যাশে থেকে অনুরোধগুলি পূরণ করতে পারেন।
ফায়ারফক্স সহ সমস্ত ব্রাউজার, একটি fetch হ্যান্ডলারের ভিতরে একটি অনুরোধ পরিদর্শন করা, Range: হেডারের উপস্থিতি পরীক্ষা করা এবং তারপর ক্যাশে থেকে আসা 206 প্রতিক্রিয়া সহ স্থানীয়ভাবে অনুরোধটি পূরণ করা সমর্থন করে। Range: শিরোনাম এবং সম্পূর্ণ ক্যাশে করা প্রতিক্রিয়ার শুধুমাত্র উপযুক্ত সেগমেন্ট রিটার্ন করা তুচ্ছ নয়।
সৌভাগ্যবশত, ডেভেলপাররা যারা কিছু সাহায্য চান তারা Workbox- এ যেতে পারেন, যা লাইব্রেরির একটি সেট যা সাধারণ পরিষেবা কর্মীদের ব্যবহারের ক্ষেত্রে সহজ করে। workbox-range-request module ক্যাশে থেকে সরাসরি আংশিক প্রতিক্রিয়া পরিবেশনের জন্য প্রয়োজনীয় সমস্ত যুক্তি প্রয়োগ করে। এই ব্যবহারের ক্ষেত্রে একটি সম্পূর্ণ রেসিপি ওয়ার্কবক্স ডকুমেন্টেশনে পাওয়া যাবে।
এই পোস্টে নায়কের ছবি আনস্প্ল্যাশ-এ নাটালি রিয়া রিগস ।