নির্ভরযোগ্য ওয়েব অ্যাপ তৈরিতে দুটি API গুরুত্বপূর্ণ ভূমিকা পালন করে: সার্ভিস ওয়ার্কার এবং ক্যাশে স্টোরেজ । কিন্তু সেগুলিকে কার্যকরভাবে ব্যবহার করা—সূক্ষ্ম বাগগুলি প্রবর্তন না করে বা প্রান্তের ক্ষেত্রে বাধা না দিয়ে—একটি চ্যালেঞ্জ হতে পারে৷ উদাহরণস্বরূপ, আপনার পরিষেবা কর্মী কোডে ত্রুটি ক্যাশিং সমস্যা সৃষ্টি করতে পারে; ব্যবহারকারীদের পুরানো বিষয়বস্তু বা ভাঙা লিঙ্ক দেখানো হতে পারে.
ওয়ার্কবক্স হল একটি উচ্চ-স্তরের পরিষেবা কর্মী টুলকিট যা পরিষেবা কর্মী এবং ক্যাশে স্টোরেজ API-এর উপরে তৈরি করা হয়েছে। এটি ওয়েব অ্যাপ্লিকেশানগুলিতে অফলাইন সমর্থন যোগ করার জন্য একটি উত্পাদন-প্রস্তুত লাইব্রেরি সরবরাহ করে৷ টুলকিটটি দুটি সংগ্রহের মধ্যে গঠন করা হয়েছে: সরঞ্জাম যা আপনার পরিষেবা কর্মীর ভিতরে চলে এমন কোড পরিচালনা করতে সহায়তা করে এবং আপনার বিল্ড প্রক্রিয়ার সাথে একীভূত হওয়া সরঞ্জামগুলি।
রানটাইম কোড
এটি এমন কোড যা আপনার পরিষেবা কর্মী স্ক্রিপ্টের ভিতরে চলে এবং এটি কীভাবে বহির্গামী অনুরোধগুলিকে বাধা দেয় এবং ক্যাশে স্টোরেজ API এর সাথে ইন্টারঅ্যাক্ট করে তা নিয়ন্ত্রণ করে৷ ওয়ার্কবক্সে মোট এক ডজন বা তার বেশি লাইব্রেরি মডিউল রয়েছে, যেগুলির প্রত্যেকটি বিভিন্ন ধরনের বিশেষ ব্যবহারের ক্ষেত্রে পরিচালনা করে। সর্বাধিক গুরুত্বপূর্ণ মডিউলগুলি নির্ধারণ করে যে পরিষেবা কর্মী সাড়া দেবে কিনা ( রাউটিং হিসাবে পরিচিত), এবং এটি কীভাবে প্রতিক্রিয়া জানাবে ( ক্যাশিং কৌশল নামে পরিচিত)।
ইন্টিগ্রেশন তৈরি করুন
ওয়ার্কবক্স কমান্ড লাইন , Node.js মডিউল এবং ওয়েবপ্যাক প্লাগইন টুল অফার করে যা দুটি জিনিস সম্পাদন করার বিকল্প উপায় প্রদান করে:
- কনফিগারেশন বিকল্পগুলির একটি সেটের উপর ভিত্তি করে একটি পরিষেবা কর্মী স্ক্রিপ্ট তৈরি করুন। জেনারেট করা পরিষেবা কর্মী আপনার কনফিগার করা ক্যাশিং কৌশলগুলিকে কার্যকর করতে "হুডের নীচে" ওয়ার্কবক্সের রানটাইম লাইব্রেরিগুলি ব্যবহার করে৷
- আপনার বিল্ড প্রক্রিয়া চলাকালীন উত্পন্ন ফাইলগুলিকে অন্তর্ভুক্ত এবং বাদ দেওয়ার জন্য কনফিগারযোগ্য প্যাটার্নের উপর ভিত্তি করে ইউআরএলগুলির একটি তালিকা তৈরি করুন যা " প্রিক্যাচড " হওয়া উচিত।
কেন আপনি ওয়ার্কবক্স ব্যবহার করা উচিত?
আপনার পরিষেবা কর্মী তৈরি করার সময় ওয়ার্কবক্স ব্যবহার করা ঐচ্ছিক—এখানে অনেকগুলি গাইড রয়েছে যা "ভ্যানিলা" পরিষেবা কর্মী দৃষ্টিকোণ থেকে সাধারণ ক্যাশিং কৌশলগুলির মাধ্যমে চলে৷ আপনি যদি ওয়ার্কবক্স ব্যবহার করার সিদ্ধান্ত নেন তবে এখানে এর কিছু সুবিধা রয়েছে।
ক্যাশে ব্যবস্থাপনা
ওয়ার্কবক্স আপনার জন্য ক্যাশে আপডেটগুলি পরিচালনা করে, হয় প্রিক্যাচিং ব্যবহার করার সময় আপনার বিল্ড প্রক্রিয়ার সাথে সংযুক্ত থাকে বা রানটাইম ক্যাশিং ব্যবহার করার সময় কনফিগারযোগ্য আকার/বয়স নীতির মাধ্যমে। অন্তর্নিহিত ক্যাশে স্টোরেজ API শক্তিশালী, কিন্তু ক্যাশের মেয়াদ শেষ হওয়ার জন্য এতে কোনো অন্তর্নির্মিত সমর্থন নেই। ওয়ার্কবক্সের মতো টুল সেই শূন্যতা পূরণ করে।
ব্যাপক লগিং এবং ত্রুটি রিপোর্টিং
আপনি যখন পরিষেবা কর্মীদের সাথে শুরু করছেন, তখন কেন কিছু ক্যাশে করা হচ্ছে তা খুঁজে বের করা (বা, সমানভাবে হতাশাজনক, কেন এটি ক্যাশে করা হচ্ছে না ) একটি চ্যালেঞ্জ। ওয়ার্কবক্স স্বয়ংক্রিয়ভাবে সনাক্ত করে যখন আপনি localhost আপনার ওয়েবসাইটের একটি বিকাশ সংস্করণ চালাচ্ছেন, এবং আপনার ব্রাউজারের জাভাস্ক্রিপ্ট কনসোলে ডিবাগ লগিং চালু করে।
লগ বার্তাগুলির সাথে অনুসরণ করে, আপনি যেকোন কনফিগারেশন বা অবৈধকরণের সমস্যার মূলে যেতে পারেন যদি আপনি একা যাচ্ছেন তার চেয়ে অনেক বেশি দ্রুত।
একটি পরীক্ষিত, ক্রস-ব্রাউজার কোডবেস
ওয়ার্কবক্স একটি ক্রস-ব্রাউজার টেস্ট স্যুটের বিপরীতে তৈরি করা হয়েছে এবং যখন সম্ভব, স্বয়ংক্রিয়ভাবে নির্দিষ্ট ব্রাউজার থেকে অনুপস্থিত বৈশিষ্ট্যগুলির বিকল্প বাস্তবায়নে ফিরে আসে।
-
workbox-broadcast-cache-update moduleব্রডকাস্ট চ্যানেল এপিআই ব্যবহার করে যখন উপলব্ধ, এবং সমর্থনের অভাব থাকা ব্রাউজারগুলিতেpostMessage()-ভিত্তিক বাস্তবায়নে ফিরে আসে। - ওয়ার্কবক্স-ব্যাকগ্রাউন্ড-সিঙ্ক মডিউলটি সম্ভব হলে ব্যাকগ্রাউন্ড সিঙ্ক এপিআই ব্যবহার করে, এবং যদি না হয়, প্রতিবার পরিষেবা কর্মী শুরু করার সময় সারিবদ্ধ ইভেন্টগুলি পুনরায় চেষ্টা করার জন্য ফিরে আসে।
কিভাবে আপনি Workbox ব্যবহার করা উচিত?
ফ্রেমওয়ার্ক ইন্টিগ্রেশন
আপনি যদি স্ক্র্যাচ থেকে একটি নতুন প্রকল্প শুরু করেন, আপনি অনেক জনপ্রিয় স্টার্টার কিট এবং অ্যাড-অন প্লাগইনগুলিতে পাওয়া ওয়ার্কবক্স ইন্টিগ্রেশনের সুবিধা নিতে পারেন:
আপনার বিদ্যমান বিল্ড প্রক্রিয়ায় ওয়ার্কবক্স যোগ করুন
আপনার যদি ইতিমধ্যেই আপনার সাইটের জন্য একটি বিল্ড প্রক্রিয়া থাকে, তাহলে যথাযথ কমান্ড লাইন , Node.js মডিউল , বা ওয়েবপ্যাক প্লাগইন টুলে নামলে ওয়ার্কবক্স ব্যবহার শুরু করার জন্য আপনার প্রয়োজন হতে পারে৷
বিশেষ করে, ওয়ার্কবক্স কমান্ড লাইন ইন্টারফেসটি উঠা এবং চালানো সহজ করে, একটি wizard মোড বৈশিষ্ট্যযুক্ত যা আপনার স্থানীয় উন্নয়ন পরিবেশ পরীক্ষা করবে এবং একটি যুক্তিসঙ্গত ডিফল্ট কনফিগারেশনের পরামর্শ দেবে যা আপনি এগিয়ে যেতে ব্যবহার করতে পারেন:
workbox wizard
? What is the root of your web app (i.e. which directory do you deploy)? src/
? Which file types would you like to precache? css, js, html
? Where would you like your service worker file to be saved? build/sw.js
? Where would you like to save these configuration options? workbox-config.js
আপনার পরিষেবা কর্মী তৈরি করতে, একটি বিল্ড প্রক্রিয়ার অংশ হিসাবে workbox generateSW workbox-config.js চালান। বিস্তারিত জানার জন্য generateSW ডকুমেন্টেশন দেখুন। আপনি workbox-config.js এ পরিবর্তন করে আপনার পরিষেবা কর্মীকে আরও কাস্টমাইজ করতে পারেন। বিস্তারিত জানার জন্য বিকল্পগুলির ডকুমেন্টেশন দেখুন।
একটি বিদ্যমান পরিষেবা কর্মীর রানটাইমে ওয়ার্কবক্স ব্যবহার করুন
আপনার যদি একটি বিদ্যমান পরিষেবা কর্মী থাকে এবং ওয়ার্কবক্সের রানটাইম লাইব্রেরিগুলি ব্যবহার করে দেখতে চান, তাহলে এর অফিসিয়াল CDN থেকে ওয়ার্কবক্স আমদানি করুন এবং রানটাইম ক্যাশে করার জন্য এখনই এটি ব্যবহার করা শুরু করুন৷ এই ব্যবহারের ক্ষেত্রের অর্থ হল আপনি প্রিক্যাচিংয়ের সুবিধা নিতে পারবেন না (যার জন্য বিল্ড-টাইম ইন্টিগ্রেশন প্রয়োজন), তবে এটি প্রোটোটাইপ করার জন্য এবং ফ্লাইতে বিভিন্ন ক্যাশিং কৌশলগুলি চেষ্টা করার জন্য দুর্দান্ত।
// Replace 3.6.3 with the current version number of Workbox.
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js');
workbox.routing.registerRoute(
new RegExp('\.png$'),
workbox.strategies.cacheFirst({
cacheName: 'images-cache',
})
);