সেবা কর্মী উন্নয়ন অভিজ্ঞতা উন্নত

যদিও পরিষেবা কর্মী লাইফসাইকেল একটি অনুমানযোগ্য ইনস্টলেশন এবং আপডেট প্রক্রিয়া নিশ্চিত করে, এটি স্থানীয় উন্নয়ন চক্রকে আরও সূক্ষ্ম করে তুলতে পারে।

সাধারণ স্থানীয় উন্নয়ন চক্রে, বিকাশকারীরা একটি টেক্সট এডিটরে ফাইলগুলিতে পরিবর্তনগুলি সংরক্ষণ করে, তারপর পরিবর্তনগুলি যাচাই করতে ব্রাউজারে স্যুইচ করে এবং প্রক্রিয়াটি পুনরাবৃত্তি হয়। যখন একজন পরিষেবা কর্মী সংমিশ্রণে থাকে, তখন এই চক্রটি অনেকাংশে একই, তবে বিকাশকারীর প্রত্যাশা এবং ব্রাউজার যা করে তার মধ্যে পার্থক্য থাকতে পারে।

স্থানীয় উন্নয়নের জন্য ব্যতিক্রম

সাধারণভাবে, পরিষেবা কর্মী APIগুলি শুধুমাত্র HTTPS-এর মাধ্যমে পরিবেশিত পৃষ্ঠাগুলিতে উপলব্ধ, তবে এই নিয়মের ব্যতিক্রম রয়েছে যেখানে সেগুলি HTTP-তে উপলব্ধ হতে পারে৷ একটি উল্লেখযোগ্য ব্যতিক্রম হল localhost পরিবেশিত পৃষ্ঠাগুলির জন্য, যা স্থানীয় উন্নয়নের জন্য ভাল কাজ করে।

যাইহোক, একটি হোস্ট ফাইলে localhost ছাড়াও স্থানীয় হোস্টনামগুলি নির্দিষ্ট করা ডেভেলপারদের পক্ষে অস্বাভাবিক নয়। স্থানীয় উন্নয়ন পরিবেশে এটি প্রয়োজন হয় যখন একাধিক প্রকল্পের জন্য পৃথক হোস্টনামের প্রয়োজন হয়। এই ক্ষেত্রে, একটি স্ব-স্বাক্ষরিত শংসাপত্রের বিধান করা হবে।

একটি আরও সুবিধাজনক সমাধান হল ব্রাউজারকে পরিষেবা কর্মী পরীক্ষার জন্য ব্যতিক্রম করার নির্দেশ দেওয়া। ক্রোমের জন্য, chrome://flags/#unsafely-treat-insecure-origin-as-secure নেভিগেট করুন এবং নিরাপদ উত্স হিসাবে বিবেচনা করার জন্য অনিরাপদ উত্স নির্দিষ্ট করুন৷ ফায়ারফক্স devtools.serviceWorkers.testing.enabled সেটিংস about:config এর মাধ্যমে অনিরাপদ উত্স সম্পর্কে পরিষেবা কর্মীদের পরীক্ষা করার একটি উপায় অফার করে।

সেবা কর্মী উন্নয়ন সহায়ক

মিশ্রিত একটি পরিষেবা কর্মীর সাথে স্থানীয় উন্নয়ন আপাতদৃষ্টিতে অপ্রত্যাশিত আচরণের দিকে নিয়ে যেতে পারে। উদাহরণ স্বরূপ, ধরা যাক, পরিবর্তনবিহীন স্ট্যাটিক অ্যাসেটের জন্য একটি ক্যাশে-অনলি কৌশল রয়েছে, অথবা একটি প্রিক্যাচড "আপনি অফলাইন" পৃষ্ঠা যা পরিবর্তন করার পরে পুনরায় লোড করার সময় আপডেট হবে বলে আশা করা হচ্ছে। কারণ এই সম্পদগুলির একটি বাসি সংস্করণ সর্বদা একটি Cache উদাহরণ থেকে পরিবেশিত হয়, সেগুলি আপাতদৃষ্টিতে কখনই আপডেট হয় না! এই হিসাবে হতাশাজনক, পরিষেবা কর্মী কেবল তাই করছে যা করার জন্য এটি তৈরি করা হয়েছিল, তবে পরীক্ষাকে আরও সহজ করার কিছু উপায় রয়েছে।

একজন পরিষেবা কর্মীকে পরীক্ষা করার সবচেয়ে কার্যকর উপায় হল ব্যক্তিগত ব্রাউজিং উইন্ডোর উপর নির্ভর করা , যেমন Chrome-এর ছদ্মবেশী উইন্ডো বা ফায়ারফক্সের ব্যক্তিগত ব্রাউজিং বৈশিষ্ট্য। আপনি যখনই একটি ব্যক্তিগত ব্রাউজিং উইন্ডো খুলবেন, আপনি নতুন করে শুরু করবেন। কোন সক্রিয় সেবা কর্মী নেই, এবং কোন খোলা Cache উদাহরণ নেই। এই ধরনের পরীক্ষার জন্য রুটিন হল:

1. একটি ব্যক্তিগত ব্রাউজিং উইন্ডো খুলুন।
2. একটি পৃষ্ঠাতে নেভিগেট করুন যা একজন পরিষেবা কর্মীকে নিবন্ধন করে।
3. পরিষেবা কর্মী আপনার প্রত্যাশা অনুযায়ী আচরণ করেন কিনা তা যাচাই করুন।
4. ছদ্মবেশী উইন্ডোটি বন্ধ করুন।
5. পুনরাবৃত্তি করুন।

এই প্রক্রিয়ার মাধ্যমে, আপনি বিশ্বস্তভাবে পরিষেবা কর্মী জীবনচক্রের অনুকরণ করছেন।

Chrome DevTools অ্যাপ্লিকেশান প্যানেলে উপলব্ধ অন্যান্য পরীক্ষার সরঞ্জামগুলি সাহায্য করতে পারে-যদিও তারা পরিষেবা কর্মী জীবনচক্রকে কিছু উপায়ে পরিবর্তন করতে পারে৷

অ্যাপ্লিকেশন প্যানেলে সার্ভিস ওয়ার্কার্স লেবেলযুক্ত একটি সাবপ্যানেল রয়েছে, যা বর্তমান পৃষ্ঠার জন্য সক্রিয় পরিষেবা কর্মীদের দেখায়। প্রতিটি সক্রিয় পরিষেবা কর্মীকে ম্যানুয়ালি আপডেট করা যেতে পারে বা এমনকি সম্পূর্ণভাবে অনিবন্ধিত করা যেতে পারে। এছাড়াও শীর্ষে তিনটি টগল রয়েছে যা উন্নয়নে সহায়তা করে।

1. অফলাইন অফলাইন শর্ত অনুকরণ করে। একজন সক্রিয় পরিষেবা কর্মী অফলাইন সামগ্রী পরিবেশন করছেন কিনা তা পরীক্ষা করার সময় এটি সাহায্য করে৷
2. পুনরায় লোডের উপর আপডেট : যখন টগল করা হয়, পৃষ্ঠাটি পুনরায় লোড করা হয় তখন বর্তমান পরিষেবা কর্মীকে রিফেচ করে এবং প্রতিস্থাপন করে।
3. নেটওয়ার্কের জন্য বাইপাস , যখন টগল করা হয়, একটি পরিষেবা কর্মীদের fetch ইভেন্টে যেকোন কোডকে বাধা দেয় এবং সর্বদা নেটওয়ার্ক থেকে সামগ্রী নিয়ে আসে।

এইগুলি সহায়ক টগলগুলি, বিশেষ করে নেটওয়ার্কের জন্য বাইপাস , যেটি দুর্দান্ত যখন আপনি একটি সক্রিয় পরিষেবা কর্মীর সাথে একটি প্রকল্প তৈরি করছেন, তবে এটিও নিশ্চিত করতে চান যে কোনও পরিষেবা কর্মী ছাড়াই প্রত্যাশিতভাবে অভিজ্ঞতা কাজ করে৷

ফায়ারফক্সের ডেভেলপার টুলগুলিতে একই ধরনের অ্যাপ্লিকেশন প্যানেল রয়েছে, তবে কার্যকারিতাটি দেখানোর জন্য সীমাবদ্ধ যে কোন পরিষেবা কর্মী ইনস্টল করা আছে, সেইসাথে বর্তমান পৃষ্ঠার জন্য কোনও সক্রিয় পরিষেবা কর্মীদের ম্যানুয়ালি আনরেজিস্টার করার ক্ষমতা। এটি ঠিক তেমনই সহায়ক, তবে স্থানীয় উন্নয়ন চক্রে এটির জন্য আরও ম্যানুয়াল প্রচেষ্টা প্রয়োজন।

স্থানান্তর এবং পুনরায় লোড

নেটওয়ার্ক সরবরাহের জন্য রিফ্রেশ বা বাইপাস-এ আপডেট হওয়া কার্যকারিতার প্রয়োজন ছাড়াই একজন সক্রিয় পরিষেবা কর্মীর সাথে স্থানীয়ভাবে বিকাশ করার সময়, শিফট ধরে রাখা এবং রিফ্রেশ বোতাম টিপুন।

একে জোর করে রিফ্রেশ বলা হয়, যা নেটওয়ার্কের জন্য HTTP ক্যাশে বাইপাস করে। যখন একজন পরিষেবা কর্মী সক্রিয় থাকে, তখন একটি বাধ্যতামূলক রিফ্রেশ পরিষেবা কর্মীকে সম্পূর্ণভাবে বাইপাস করবে।

এই কার্যকারিতাটি দুর্দান্ত যদি কোনও নির্দিষ্ট ক্যাশিং কৌশলটি উদ্দেশ্য অনুসারে কাজ করছে কিনা তা নিয়ে অনিশ্চয়তা থাকে এবং পরিষেবা কর্মীর সাথে এবং তার ছাড়া আচরণের তুলনা করার জন্য নেটওয়ার্ক থেকে সবকিছু দখল করা দরকারী। আরও ভাল, এটি একটি নির্দিষ্ট আচরণ, তাই পরিষেবা কর্মীদের সমর্থন করে এমন সমস্ত ব্রাউজার এটি পর্যবেক্ষণ করবে।

ক্যাশে বিষয়বস্তু পরিদর্শন

ক্যাশে পরিদর্শন করা না গেলে ক্যাশিং কৌশলটি উদ্দেশ্য অনুযায়ী কাজ করছে কিনা তা বলা কঠিন। অবশ্যই, কোডে ক্যাশে পরিদর্শন করা যেতে পারে , তবে এটি একটি প্রক্রিয়া যা ডিবাগার এবং/অথবা console বিবৃতিগুলিকে জড়িত করে যখন একটি ভিজ্যুয়াল টুলটি কাজের জন্য আরও উপযুক্ত হবে। Chrome DevTools-এর অ্যাপ্লিকেশন প্যানেল Cache ইনস্ট্যান্সের বিষয়বস্তু পরীক্ষা করার জন্য একটি সাবপ্যানেল অফার করে।

এই সাবপ্যানেলটি কার্যকারিতা প্রদানের মাধ্যমে পরিষেবা কর্মীদের বিকাশকে সহজ করে তোলে যেমন:

• Cache ইনস্ট্যান্সের নাম দেখুন।
• ক্যাশে করা সম্পদের প্রতিক্রিয়া বডি এবং তাদের সম্পর্কিত প্রতিক্রিয়া শিরোনাম পরিদর্শন করার ক্ষমতা।
• ক্যাশে থেকে এক বা একাধিক আইটেম উচ্ছেদ করুন, বা এমনকি সম্পূর্ণ Cache দৃষ্টান্ত মুছুন।

এই গ্রাফিকাল ইউজার ইন্টারফেস পরিষেবা কর্মী ক্যাশে থেকে আইটেমগুলি যোগ করা, আপডেট করা বা সম্পূর্ণভাবে সরানো হয়েছে কিনা তা দেখতে পরিষেবা কর্মী ক্যাশে পরীক্ষা করা সহজ করে তোলে। ফায়ারফক্স একই ধরনের কার্যকারিতা সহ নিজস্ব ক্যাশে ভিউয়ার অফার করে, যদিও এটি একটি পৃথক স্টোরেজ প্যানেলে থাকে।

একটি স্টোরেজ কোটা অনুকরণ করা হচ্ছে

অনেক বড় স্ট্যাটিক সম্পদ (যেমন উচ্চ-রেজোলিউশন ছবি) সহ ওয়েবসাইটগুলিতে, স্টোরেজ কোটা আঘাত করা সম্ভব। যখন এটি ঘটবে, ব্রাউজার সেই আইটেমগুলিকে ক্যাশে থেকে উচ্ছেদ করবে যা এটি বাসি বলে মনে করে, বা অন্যথায় নতুন সম্পদের জন্য জায়গা তৈরি করতে বলিদানের যোগ্য।

স্টোরেজ কোটা নিয়ে কাজ করা পরিষেবা কর্মী উন্নয়নের একটি অংশ হওয়া উচিত এবং ওয়ার্কবক্স সেই প্রক্রিয়াটিকে নিজে পরিচালনা করার চেয়ে সহজ করে তোলে। ওয়ার্কবক্স সহ বা ছাড়া, যদিও, ক্যাশে পরিচালনার যুক্তি পরীক্ষা করার জন্য একটি কাস্টম স্টোরেজ কোটা অনুকরণ করা একটি ভাল ধারণা হতে পারে।

Chrome-এর DevTools-এর অ্যাপ্লিকেশন প্যানেলে একটি স্টোরেজ সাবপ্যানেল রয়েছে যা বর্তমান সঞ্চয়স্থান কোটা কতটা পৃষ্ঠাটি ব্যবহার করছে তার তথ্য প্রদান করে। এটি একটি কাস্টম কোটা মেগাবাইটে নির্দিষ্ট করার অনুমতি দেয়। কার্যকর হলে, Chrome কাস্টম স্টোরেজ কোটা প্রয়োগ করবে যাতে এটি পরীক্ষা করা যায়।

ঘটনাক্রমে, এই সাবপ্যানেলে একটি সাফ সাইট ডেটা বোতাম এবং বোতামটি ক্লিক করার পরে কী পরিষ্কার করা উচিত তার জন্য সংশ্লিষ্ট চেকবক্সগুলির একটি সম্পূর্ণ অ্যারে রয়েছে৷ এই আইটেমগুলির মধ্যে রয়েছে যে কোনও খোলা Cache উদাহরণ এবং পৃষ্ঠাটি নিয়ন্ত্রণকারী কোনও সক্রিয় পরিষেবা কর্মীদের নিবন্ধনমুক্ত করার ক্ষমতা।

সহজ উন্নয়ন, ভাল উত্পাদনশীলতা

যখন বিকাশকারীরা ভারমুক্ত থাকে, তখন তারা আরও আত্মবিশ্বাসের সাথে কাজ করতে পারে এবং আরও উত্পাদনশীল হতে পারে। একজন পরিসেবা কর্মীর সাথে স্থানীয় উন্নয়নের সূক্ষ্মতা হতে পারে, কিন্তু এটি বেদনাদায়ক হতে হবে না। এই টিপস এবং কৌশলগুলির সাথে, একজন সক্রিয় পরিষেবা কর্মীর সাথে বিকাশ করা আরও বেশি স্বচ্ছ এবং অনুমানযোগ্য হওয়া উচিত, যা একটি উন্নত বিকাশকারীর অভিজ্ঞতার দিকে নিয়ে যায়।