সেবা কর্মী স্ক্রিপ্টিং

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

কোর্স সম্পর্কে সম্পূর্ণ বিশদ বিবরণের জন্য, ডেভেলপিং প্রগ্রেসিভ ওয়েব অ্যাপস ওভারভিউ দেখুন ।

দ্রষ্টব্য: এই কোর্সটি "কোডল্যাব" এবং "ল্যাব" শব্দগুলিকে বিনিময়যোগ্যভাবে ব্যবহার করে৷

ভূমিকা

এই ল্যাবটি আপনাকে একজন সাধারণ পরিষেবা কর্মী তৈরির মাধ্যমে নিয়ে যায় এবং পরিষেবা কর্মী জীবনচক্র ব্যাখ্যা করে৷

আপনি কি শিখবেন

• একটি মৌলিক পরিষেবা কর্মী স্ক্রিপ্ট তৈরি করুন, এটি ইনস্টল করুন এবং সাধারণ ডিবাগিং করুন৷

আপনি কি জানতে হবে

• বেসিক জাভাস্ক্রিপ্ট এবং এইচটিএমএল
• ES2015 প্রতিশ্রুতির ধারণা এবং মৌলিক বাক্য গঠন
• কীভাবে বিকাশকারী কনসোল সক্ষম করবেন

আপনি শুরু করার আগে আপনার যা প্রয়োজন

• টার্মিনাল/শেল অ্যাক্সেস সহ কম্পিউটার
• ইন্টারনেটের সাথে সংযোগ
• একটি ব্রাউজার যা পরিষেবা কর্মীদের সমর্থন করে
• একজন টেক্সট এডিটর

github থেকে pwa-training-labs সংগ্রহস্থল ডাউনলোড বা ক্লোন করুন এবং প্রয়োজনে Node.js-এর LTS সংস্করণ ইনস্টল করুন।

service-worker-lab/app/ ডিরেক্টরিতে নেভিগেট করুন এবং একটি স্থানীয় উন্নয়ন সার্ভার শুরু করুন:

cd service-worker-lab/app
npm install
node server.js

আপনি যেকোন সময় Ctrl-c দিয়ে সার্ভার বন্ধ করতে পারেন।

আপনার ব্রাউজার খুলুন এবং localhost:8081/ ।

দ্রষ্টব্য: যেকোনো পরিষেবা কর্মীদের নিবন্ধনমুক্ত করুন এবং লোকালহোস্টের জন্য সমস্ত পরিষেবা কর্মী ক্যাশে সাফ করুন যাতে তারা ল্যাবে হস্তক্ষেপ না করে। Chrome DevTools-এ, আপনি অ্যাপ্লিকেশন ট্যাবের ক্লিয়ার স্টোরেজ বিভাগ থেকে সাইট ডেটা সাফ করুন ক্লিক করে এটি অর্জন করতে পারেন।

আপনার পছন্দের টেক্সট এডিটরে service-worker-lab/app/ ফোল্ডারটি খুলুন। app/ ফোল্ডারটি হল যেখানে আপনি ল্যাব তৈরি করবেন।

এই ফোল্ডারে রয়েছে:

• below/another.html , js/another.js , js/other.js , এবং other.html হল নমুনা সংস্থান যা আমরা পরিষেবা কর্মী সুযোগ নিয়ে পরীক্ষা করার জন্য ব্যবহার করি
• styles/ ফোল্ডারে এই ল্যাবের জন্য ক্যাসকেডিং স্টাইলশীট রয়েছে
• test/ ফোল্ডারে আপনার অগ্রগতি পরীক্ষা করার জন্য ফাইল রয়েছে
• index.html হল আমাদের নমুনা সাইট/অ্যাপ্লিকেশনের প্রধান HTML পৃষ্ঠা
• service-worker.js হল জাভাস্ক্রিপ্ট ফাইল যা আমাদের পরিষেবা কর্মী তৈরি করতে ব্যবহৃত হয়
• package.json এবং package-lock.json এই প্রজেক্টে ব্যবহৃত নোড প্যাকেজ ট্র্যাক করে
• server.js একটি সাধারণ এক্সপ্রেস সার্ভার যা আমরা আমাদের অ্যাপ হোস্ট করতে ব্যবহার করি

আপনার টেক্সট এডিটরে service-worker.js খুলুন। নোট করুন যে ফাইলটি খালি। আমরা এখনও পরিষেবা কর্মীর মধ্যে চালানোর জন্য কোনো কোড যোগ করিনি।

আপনার পাঠ্য সম্পাদকে index.html খুলুন।

<script> ট্যাগের ভিতরে, পরিষেবা কর্মী নিবন্ধন করতে নিম্নলিখিত কোড যোগ করুন:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('service-worker.js')
    .then(registration => {
      console.log('Service Worker is registered', registration);
    })
    .catch(err => {
      console.error('Registration failed:', err);
    });
  });
}

স্ক্রিপ্টটি সংরক্ষণ করুন এবং পৃষ্ঠাটি রিফ্রেশ করুন। কনসোলটিকে একটি বার্তা ফেরত দেওয়া উচিত যা নির্দেশ করে যে পরিষেবা কর্মী নিবন্ধিত হয়েছে৷ Chrome-এ, আপনি DevTools (Windows এবং Linux-এ Control + Shift + I, অথবা Mac-এ ⌘ + alt + I), অ্যাপ্লিকেশন ট্যাবে ক্লিক করে, এবং তারপর পরিষেবা কর্মী বিকল্পে ক্লিক করে একজন পরিষেবা কর্মী নিবন্ধিত হয়েছে কিনা তা পরীক্ষা করতে পারেন৷ আপনি নিম্নলিখিত অনুরূপ কিছু দেখতে হবে:

ঐচ্ছিক : একটি অসমর্থিত ব্রাউজারে সাইটটি খুলুন এবং যাচাই করুন যে সমর্থন চেক শর্তসাপেক্ষ কাজ করে।

ব্যাখ্যা

উপরের কোডটি service-worker.js ফাইলটিকে একটি পরিষেবা কর্মী হিসাবে নিবন্ধিত করে। এটি প্রথমে ব্রাউজারটি পরিষেবা কর্মীদের সমর্থন করে কিনা তা পরীক্ষা করে। আপনি যখনই কোনও পরিষেবা কর্মী নিবন্ধন করবেন তখন এটি করা উচিত কারণ কিছু ব্রাউজার পরিষেবা কর্মীদের সমর্থন নাও করতে পারে৷ কোডটি তারপর ServiceWorkerContainer API এর register পদ্ধতি ব্যবহার করে পরিষেবা কর্মীকে নিবন্ধিত করে, যা উইন্ডোর Navigator ইন্টারফেসে রয়েছে।

navigator.serviceWorker.register(...) একটি প্রতিশ্রুতি প্রদান করে যা পরিষেবা কর্মী সফলভাবে নিবন্ধিত হওয়ার পরে একটি registration বস্তুর সাথে সমাধান করে। নিবন্ধন ব্যর্থ হলে, প্রতিশ্রুতি প্রত্যাখ্যান করা হবে.

পরিষেবা কর্মীর অবস্থার পরিবর্তন পরিষেবা কর্মীর মধ্যে ঘটনাগুলিকে ট্রিগার করে৷

ইভেন্ট শ্রোতা যোগ করুন

আপনার টেক্সট এডিটরে service-worker.js খুলুন।

পরিষেবা কর্মীর সাথে নিম্নলিখিত ইভেন্ট শ্রোতাদের যোগ করুন:

self.addEventListener('install', event => {
  console.log('Service worker installing...');
  // Add a call to skipWaiting here
});

self.addEventListener('activate', event => {
  console.log('Service worker activating...');
});

ফাইলটি সংরক্ষণ করুন।

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

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

ব্যাখ্যা

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

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

পরিষেবা কর্মী একটি activate ইভেন্ট নির্গত করে যখন এটি পৃষ্ঠার নিয়ন্ত্রণ নেয়। উপরের কোডটি এখানে একটি বার্তা লগ করে, কিন্তু এই ইভেন্টটি প্রায়ই ক্যাশে আপডেট করতে ব্যবহৃত হয়।

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

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

দ্রষ্টব্য: আপনি কিছু ব্রাউজারের ডেভেলপার টুল ব্যবহার করে এবং skipWaiting() এর সাহায্যে ম্যানুয়ালি একজন নতুন পরিষেবা কর্মীকে সক্রিয় করতে পারেন, যা আমরা বিভাগ 3.4-এ আলোচনা করেছি।

পরিষেবা কর্মী আপডেট করুন

service-worker.js এর যেকোনো জায়গায় নিম্নলিখিত মন্তব্য যোগ করুন:

// I'm a new service worker

ফাইলটি সংরক্ষণ করুন এবং পৃষ্ঠাটি রিফ্রেশ করুন। কনসোলে লগগুলি দেখুন; লক্ষ্য করুন যে নতুন পরিষেবা কর্মী ইনস্টল করে কিন্তু সক্রিয় করে না। Chrome-এ, আপনি DevTools-এর অ্যাপ্লিকেশন ট্যাবে অপেক্ষমাণ পরিষেবা কর্মী দেখতে পাবেন।

পরিষেবা কর্মীর সাথে যুক্ত সমস্ত পৃষ্ঠা বন্ধ করুন। তারপর, localhost:8081/ পুনরায় খুলুন। কনসোল লগটি নির্দেশ করবে যে নতুন পরিষেবা কর্মী এখন সক্রিয় হয়েছে৷

দ্রষ্টব্য: আপনি যদি অপ্রত্যাশিত ফলাফল পান তবে নিশ্চিত করুন যে আপনার HTTP ক্যাশে বিকাশকারী সরঞ্জামগুলিতে অক্ষম করা আছে।

ব্যাখ্যা

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

অপেক্ষার পর্ব এড়িয়ে যাওয়া

একজন নতুন পরিষেবা কর্মীর পক্ষে অবিলম্বে সক্রিয় করা সম্ভব, এমনকি যদি একজন বিদ্যমান পরিষেবা কর্মী উপস্থিত থাকে, অপেক্ষার পর্যায়টি বাদ দিয়ে।

service-worker.js এ, install ইভেন্ট শ্রোতা-এ skipWaiting -এ একটি কল যোগ করুন:

self.skipWaiting();

ফাইলটি সংরক্ষণ করুন এবং পৃষ্ঠাটি রিফ্রেশ করুন। লক্ষ্য করুন যে নতুন পরিষেবা কর্মী অবিলম্বে ইনস্টল এবং সক্রিয় করে, যদিও পূর্ববর্তী পরিষেবা কর্মী নিয়ন্ত্রণে ছিলেন।

ব্যাখ্যা

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

আরো তথ্যের জন্য

• সেবা কর্মীর জীবনচক্র

পরিষেবা কর্মীরা আপনার ওয়েব অ্যাপ এবং নেটওয়ার্কের মধ্যে একটি প্রক্সি হিসাবে কাজ করতে পারে৷

আমাদের ডোমেন থেকে আসা অনুরোধগুলিকে আটকাতে একজন শ্রোতাকে আনুন।

service-worker.js এ নিম্নলিখিত কোড যোগ করুন:

self.addEventListener('fetch', event => {
  console.log('Fetching:', event.request.url);
});

স্ক্রিপ্টটি সংরক্ষণ করুন এবং আপডেট হওয়া পরিষেবা কর্মীকে ইনস্টল এবং সক্রিয় করতে পৃষ্ঠাটি রিফ্রেশ করুন৷

কনসোল চেক করুন এবং লক্ষ্য করুন যে কোনো আনয়ন ইভেন্ট লগ করা হয়নি। পৃষ্ঠাটি রিফ্রেশ করুন এবং কনসোলটি আবার পরীক্ষা করুন। পৃষ্ঠা এবং এর সম্পদের (যেমন সিএসএস) জন্য আপনি এই সময় ফেচ ইভেন্ট দেখতে পাবেন।

অন্য পৃষ্ঠা , অন্য পৃষ্ঠা এবং পিছনের লিঙ্কগুলিতে ক্লিক করুন।

আপনি প্রতিটি পৃষ্ঠা এবং তাদের সম্পদের জন্য কনসোলে ইভেন্ট আনতে দেখতে পাবেন। সমস্ত লগ কি অর্থে হয়?

দ্রষ্টব্য: আপনি যদি একটি পৃষ্ঠা পরিদর্শন করেন এবং HTTP ক্যাশে নিষ্ক্রিয় না থাকে, CSS এবং JavaScript সম্পদগুলি স্থানীয়ভাবে ক্যাশে করা হতে পারে৷ যদি এটি ঘটে তবে আপনি এই সংস্থানগুলির জন্য ইভেন্টগুলিকে দেখতে পাবেন না৷

ব্যাখ্যা

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

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

আরো তথ্যের জন্য

• ইভেন্ট আনুন - MDN
• ফেচ ব্যবহার করে - MDN
• আনয়নের ভূমিকা - Google বিকাশকারী৷

সমাধান কোড

কাজের কোডের একটি অনুলিপি পেতে, 04-intercepting-network-requests/ ফোল্ডারে নেভিগেট করুন।

সেবা কর্মীদের সুযোগ আছে। পরিষেবা কর্মীর পরিধি নির্ধারণ করে যে কোন পাথ থেকে পরিষেবা কর্মী অনুরোধগুলিকে বাধা দেয়৷

সুযোগ সন্ধান করুন

index.html এ রেজিস্ট্রেশন কোডটি এর সাথে আপডেট করুন:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('service-worker.js')
    .then(registration => {
      console.log('SW registered with scope:', registration.scope);
    })
    .catch(err => {
      console.error('Registration failed:', err);
    });
  });
}

ব্রাউজার রিফ্রেশ করুন। লক্ষ্য করুন যে কনসোল পরিষেবা কর্মীর সুযোগ দেখায় (এই ক্ষেত্রে এটি http://localhost:8081/ )।

ব্যাখ্যা

register() দ্বারা প্রত্যাবর্তিত প্রতিশ্রুতি রেজিস্ট্রেশন অবজেক্টে মীমাংসা করে, যেটিতে পরিষেবা কর্মীর সুযোগ রয়েছে।

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

সেবা কর্মী সরান

service-worker.js below/ ডিরেক্টরিতে সরান এবং index.html এ রেজিস্ট্রেশন কোডে পরিষেবা কর্মী URL আপডেট করুন।

ব্রাউজারে বর্তমান পরিষেবা কর্মীকে নিবন্ধনমুক্ত করুন এবং পৃষ্ঠাটি রিফ্রেশ করুন।

কনসোল দেখায় যে পরিষেবা কর্মীর সুযোগ এখন http://localhost:8081/below/ । Chrome-এ, আপনি DevTools-এর অ্যাপ্লিকেশন ট্যাবে পরিষেবা কর্মী স্কোপ দেখতে পারেন:

মূল পৃষ্ঠায় ফিরে, অন্য পৃষ্ঠা , অন্য পৃষ্ঠা এবং পিছনে ক্লিক করুন। কোন আনার অনুরোধ লগ করা হচ্ছে? কোনটি নয়?

ব্যাখ্যা

পরিষেবা কর্মীর ডিফল্ট সুযোগ হল পরিষেবা কর্মী ফাইলের পথ। যেহেতু সার্ভিস ওয়ার্কার ফাইলটি এখন below/ তে রয়েছে, এটাই এর সুযোগ। কনসোল এখন another.html , another.css , এবং another.js এর জন্য ফেচ ইভেন্টগুলি লগ করছে, কারণ এইগুলিই পরিষেবা কর্মীর সুযোগের মধ্যে একমাত্র সংস্থান৷

একটি নির্বিচারে সুযোগ সেট করুন

পরিষেবা কর্মীকে প্রজেক্ট রুট ডিরেক্টরিতে ( app/ ) নিয়ে যান এবং index.html এ রেজিস্ট্রেশন কোডে পরিষেবা কর্মী URL আপডেট করুন।

register() -এ ঐচ্ছিক প্যারামিটার ব্যবহার করে below/ ডিরেক্টরিতে পরিষেবা কর্মীর সুযোগ সেট করতে MDN-এর রেফারেন্স ব্যবহার করুন।

পরিষেবা কর্মীকে নিবন্ধনমুক্ত করুন এবং পৃষ্ঠাটি রিফ্রেশ করুন। অন্য পৃষ্ঠা , অন্য পৃষ্ঠা এবং পিছনে ক্লিক করুন।

আবার কনসোল দেখায় যে পরিষেবা কর্মীর সুযোগ এখন http://localhost:8081/below/ , এবং লগগুলি শুধুমাত্র another.html , another.css , এবং another.js এর জন্য ইভেন্টগুলি নিয়ে আসে৷

ব্যাখ্যা

নিবন্ধন করার সময় একটি অতিরিক্ত পরামিতি পাস করে একটি নির্বিচারে সুযোগ সেট করা সম্ভব, উদাহরণস্বরূপ:

navigator.serviceWorker.register('/service-worker.js', {
  scope: '/kitten/'
});

উপরের উদাহরণে পরিষেবা কর্মীর সুযোগ /kitten/ এ সেট করা হয়েছে। পরিষেবা কর্মী /kitten/ এবং /kitten/lower/ এর পৃষ্ঠাগুলি থেকে অনুরোধগুলিকে বাধা দেয় তবে /kitten বা / মতো পৃষ্ঠাগুলি থেকে নয়৷

দ্রষ্টব্য: আপনি একটি নির্বিচারে সুযোগ সেট করতে পারবেন না যা পরিষেবা কর্মীর প্রকৃত অবস্থানের উপরে। যাইহোক, যদি আপনার সার্ভার কর্মী Service-Worker-Allowed শিরোনাম দিয়ে পরিবেশন করা ক্লায়েন্টে সক্রিয় থাকে, তাহলে আপনি পরিষেবা কর্মীর অবস্থানের উপরে সেই পরিষেবা কর্মীর জন্য সর্বোচ্চ সুযোগ নির্দিষ্ট করতে পারেন।

আরো তথ্যের জন্য

• সেবা কর্মী নিবন্ধন বস্তু
• রেজিস্টার() পদ্ধতি
• সেবা কর্মীর সুযোগ

সমাধান কোড

কাজের কোডের একটি অনুলিপি পেতে, solution/ ফোল্ডারে নেভিগেট করুন।

আপনি এখন একজন সাধারণ পরিষেবা কর্মী আছেন এবং কাজ করছেন এবং পরিষেবা কর্মী জীবনচক্র বুঝতে পারেন।

আরো তথ্যের জন্য

সেবা কর্মীর জীবনচক্র

PWA প্রশিক্ষণ কোর্সের সমস্ত কোডল্যাব দেখতে, কোর্সের জন্য স্বাগতম কোডল্যাব দেখুন/