এক নজরে কর্মী

ওয়েব ওয়ার্কার ও সার্ভিস ওয়ার্কার কীভাবে আপনার সাইটের পারফর্ম্যান্স উন্নত করতে পারে এবং কখন ওয়েব ওয়ার্কার বনাম সার্ভিস ওয়ার্কার ব্যবহার করতে হবে।

Andrew Guan
Andrew Guan
Demián Renzulli
Demián Renzulli

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

কর্মীরা কীভাবে আপনার ওয়েবসাইট উন্নত করতে পারেন

ব্রাউজার একটি ওয়েব পেজে সব জাভাস্ক্রিপ্ট রান করার জন্য, পাশাপাশি পেজ রেন্ডার করা এবং গার্বেজ কালেকশনের মতো কাজ করার জন্য একটি সিঙ্গল থ্রেড (প্রধান থ্রেড) ব্যবহার করে। অতিরিক্ত জাভাস্ক্রিপ্ট কোড রান করলে প্রধান থ্রেড ব্লক হয়ে যেতে পারে, যার ফলে ব্রাউজার এইসব টাস্ক সম্পন্ন করতে দেরি করে এবং ব্যবহারকারীর অভিজ্ঞতা খারাপ হয়।

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

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

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

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

উইন্ডো অবজেক্ট এবং ওয়েব ওয়ার্কার ও সার্ভিস ওয়ার্কারের মধ্যে দুটি লিঙ্ক দেখানো ডায়াগ্রাম।

ওয়েব ওয়ার্কার ও সার্ভিস ওয়ার্কার

মিল

ওয়েবসাইটের জন্য দুই ধরনের কর্মী উপলভ্য: ওয়েব কর্মী এবং পরিষেবা কর্মী। তাদের মধ্যে কিছু জিনিস কমন:

  • দুটিই সেকেন্ডারি থ্রেডে রান করে, যার ফলে জাভাস্ক্রিপ্ট কোড মূল থ্রেড ও ইউজার ইন্টারফেস ব্লক না করেই এক্সিকিউট হতে পারে।
  • তাদের Window এবং Document অবজেক্টে অ্যাক্সেস নেই, তাই তারা সরাসরি DOM-এর সাথে ইন্টার‍্যাক্ট করতে পারে না এবং ব্রাউজার API-তে তাদের সীমিত অ্যাক্সেস আছে।

পার্থক্য

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

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

যেসব ক্ষেত্রে ব্যবহার করা যাবে

দুই ধরনের কর্মীর মধ্যে পার্থক্য থেকে বোঝা যায় যে কোন পরিস্থিতিতে কোন ধরনের কর্মী ব্যবহার করা উচিত:

ওয়েব ওয়ার্কারের ব্যবহারের উদাহরণ সাধারণত অফলোডিং কাজের (যেমন ভারী কম্পিউটেশন) সাথে সম্পর্কিত, যাতে UI ব্লক করা এড়ানো যায়।

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

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

PROXX ভিডিও গেমের স্ক্রিনশট।

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

Podcast PWA-এর স্ক্রিনশট।
ডাউনলোডের প্রগ্রেস (বাঁদিকে) দেখানোর জন্য UI আপডেট করা হয়েছে। সার্ভিস ওয়ার্কারের জন্য, সব ট্যাব বন্ধ হয়ে গেলেও অপারেশন চলতে থাকে (ডানদিকে)।

টুল ও লাইব্রেরি

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

PROXX ভিডিও গেমের স্ক্রিনশট।

Comlink হল একটি ছোট (১.৬k) RPC লাইব্রেরি যা Web Workers ব্যবহার করে ওয়েবসাইট তৈরি করার সময় অনেক অন্তর্নিহিত বিবরণের যত্ন নেয়। এটি PROXX এবং Squoosh-এর মতো ওয়েবসাইটে ব্যবহার করা হয়েছে। এর অনুপ্রেরণার সারসংক্ষেপ এবং কোড স্যাম্পেল এখানে পাওয়া যাবে।

Workbox

Workbox হল ওয়েবসাইট তৈরি করার একটি জনপ্রিয় লাইব্রেরি যা সার্ভিস ওয়ার্কার ব্যবহার করে। এটি ক্যাশিং, অফলাইন, ব্যাকগ্রাউন্ড সিঙ্ক্রোনাইজেশন ইত্যাদির মতো জিনিসগুলির চারপাশে পেশাদার পদ্ধতির একটি সেট প্যাকেজ করে। workbox-window মডিউলটি পরিষেবা কর্মী এবং পৃষ্ঠার মধ্যে বার্তা বিনিময় করার একটি সুবিধাজনক উপায় প্রদান করে।

পরবর্তী ধাপ

এই সিরিজের বাকি অংশ উইন্ডো ও সার্ভিস ওয়ার্কার কমিউনিকেশনের প্যাটার্নের উপর ফোকাস করে:

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

উইন্ডো ও ওয়েব ওয়ার্কার কমিউনিকেশনের প্যাটার্নের জন্য এটি চেক করুন: ব্রাউজারের মূল থ্রেড থেকে জাভাস্ক্রিপ্ট রান করতে ওয়েব ওয়ার্কার ব্যবহার করুন।