বিজ্ঞপ্তিগুলি পরিচালনা করতে একটি পরিষেবা কর্মী ব্যবহার করুন৷

Kate Jeffreys

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

নমুনা অ্যাপটি রিমিক্স করুন এবং একটি নতুন ট্যাবে দেখুন

এমবেডেড গ্লিচ অ্যাপ থেকে বিজ্ঞপ্তিগুলি স্বয়ংক্রিয়ভাবে ব্লক করা হয়েছে, তাই আপনি এই পৃষ্ঠায় অ্যাপটির পূর্বরূপ দেখতে পারবেন না। পরিবর্তে, এখানে কি করতে হবে:

1. প্রকল্পটিকে সম্পাদনাযোগ্য করতে সম্পাদনা করতে রিমিক্সে ক্লিক করুন৷
2. সাইটের পূর্বরূপ দেখতে, অ্যাপ দেখুন টিপুন। তারপর ফুলস্ক্রিন টিপুন .

গ্লিচটি একটি নতুন Chrome ট্যাবে খোলা উচিত।

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

নমুনা অ্যাপ এবং শুরুর কোডের সাথে পরিচিত হন

নতুন Chrome ট্যাবে লাইভ অ্যাপটি দেখে শুরু করুন:

1. DevTools খুলতে `Control+Shift+J` (বা Mac এ `Command+Option+J`) টিপুন।

2. কনসোল ট্যাবে ক্লিক করুন।

3. ফিল্টার বাক্সের পাশের স্তর ড্রপডাউনে তথ্য বিকল্পটি নির্বাচন করা হয়েছে তা নিশ্চিত করুন।

4. আপনার লাইভ অ্যাপের জন্য DevTools কনসোলে, আপনি একটি কনসোল বার্তা দেখতে পাবেন:

   TODO: Implement getRegistration() ।

   এটি একটি ফাংশন স্টাব থেকে একটি বার্তা যা আপনি এই কোডল্যাবে প্রয়োগ করবেন।

এখন এই পৃষ্ঠায় এমবেড করা ত্রুটিতে নমুনা অ্যাপের কোডটি দেখে নেওয়া যাক।

1. এমবেডেড গ্লিচে, public/index.js এ একবার দেখুন :

   • আপনি যে ফাংশনগুলি বাস্তবায়ন করবেন তার জন্য চারটি স্টাব রয়েছে: registerServiceWorker , getRegistration , unRegisterServiceWorker , এবং sendNotification ৷

   • requestPermission ফাংশন ব্যবহারকারীর বিজ্ঞপ্তি পাঠানোর অনুমতির অনুরোধ করে। আপনি যদি Notifications API কোডল্যাব দিয়ে Get start করে থাকেন, তাহলে আপনি লক্ষ্য করবেন যে এটির requestPermission ফাংশন এখানে ব্যবহার করা হয়েছে। শুধুমাত্র পার্থক্য হল যে এটি এখন অনুমতি অনুরোধের সমাধান করার পরে ব্যবহারকারী ইন্টারফেস আপডেট করে।

   • updateUI ফাংশন অ্যাপের সমস্ত বোতাম এবং বার্তা রিফ্রেশ করে।

   • initializePage ফাংশন ব্রাউজারে পরিষেবা কর্মী সক্ষমতার জন্য বৈশিষ্ট্য সনাক্তকরণ সম্পাদন করে এবং অ্যাপ ব্যবহারকারী ইন্টারফেস আপডেট করে।

   • পৃষ্ঠাটি লোড না হওয়া পর্যন্ত স্ক্রিপ্টটি অপেক্ষা করে এবং তারপর এটি শুরু করে।

2. এমবেডেড গ্লিচে, public/service-worker.js খুলুন।

   নাম অনুসারে, আপনি এই ফাইলটিকে পরিষেবা কর্মী হিসাবে নিবন্ধন করতে অ্যাপটিতে কোড যোগ করবেন৷

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

   পরিষেবা কর্মী যখন সেগুলি পাবেন তখন বিজ্ঞপ্তিগুলি পরিচালনা করতে আপনি public/service-worker.js এ কোড যোগ করবেন৷

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

এই ধাপে, আপনি কোড লিখবেন যেটি চলে যখন ব্যবহারকারী অ্যাপ UI-তে পরিষেবা কর্মী নিবন্ধন করুন ক্লিক করেন। এই কোড একটি পরিষেবা কর্মী হিসাবে public/service-worker.js নিবন্ধন করবে।

1. এমবেডেড গ্লিচ এডিটরে, public/index.js খুলুন। নিম্নলিখিত কোড দিয়ে registerServiceWorker ফাংশন প্রতিস্থাপন করুন:

   // Use the Service Worker API to register a service worker.
   async function registerServiceWorker() {
     await navigator.serviceWorker.register('./service-worker.js')
     updateUI();
   }
   

   মনে রাখবেন যে registerServiceWorker হ্যান্ডলিং প্রতিশ্রুতি আরো সুবিধাজনক করতে async function ঘোষণা ব্যবহার করে। এটি আপনাকে একটি Promise সমাধান করা মূল্যের await দেয়৷ উদাহরণস্বরূপ, উপরের ফাংশনটি UI আপডেট করার আগে একজন পরিষেবা কর্মীকে নিবন্ধিত করার ফলাফলের জন্য অপেক্ষা করছে৷ আরও তথ্যের জন্য MDN-এ await দেখুন।

2. এখন যেহেতু ব্যবহারকারী একটি পরিষেবা কর্মী নিবন্ধন করতে পারেন, আপনি পরিষেবা কর্মী নিবন্ধন বস্তুর একটি রেফারেন্স পেতে পারেন। public/index.js এ, getRegistration ফাংশনটি নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন:

   // Get the current service worker registration.
   function getRegistration() {
     return navigator.serviceWorker.getRegistration();
   }
   

   উপরের ফাংশনটি বর্তমান পরিষেবা কর্মী নিবন্ধন পেতে পরিষেবা কর্মী API ব্যবহার করে, যদি এটি বিদ্যমান থাকে। এটি পরিষেবা কর্মী নিবন্ধনের একটি রেফারেন্স পেতে একটু বেশি সুবিধাজনক করে তোলে।

• পরিষেবা কর্মী নিবন্ধন কার্যকারিতা সম্পূর্ণ করতে, পরিষেবা কর্মীকে নিবন্ধনমুক্ত করতে কোড যোগ করুন৷ নিম্নলিখিত কোড দিয়ে unRegisterServiceWorker ফাংশন প্রতিস্থাপন করুন:

  // Unregister a service worker, then update the UI.
  async function unRegisterServiceWorker() {
    // Get a reference to the service worker registration.
    let registration = await getRegistration();
    // Await the outcome of the unregistration attempt
    // so that the UI update is not superceded by a
    // returning Promise.
    await registration.unregister();
    updateUI();
  }
  

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

পরিষেবা কর্মীকে বিজ্ঞপ্তি পাঠান

এই ধাপে, আপনি কোড লিখবেন যা ব্যবহারকারী যখন অ্যাপ UI-তে একটি বিজ্ঞপ্তি পাঠান ক্লিক করবে তখন চলবে। এই কোডটি একটি বিজ্ঞপ্তি তৈরি করবে, একজন পরিষেবা কর্মী নিবন্ধিত কিনা তা পরীক্ষা করবে এবং তারপরে postMessage পদ্ধতি ব্যবহার করে পরিষেবা কর্মীকে বিজ্ঞপ্তি পাঠাবে।

এমবেডেড গ্লিচ এডিটরে, public/index.js খুলুন এবং নিম্নলিখিত কোড দিয়ে sendNotification ফাংশনটি প্রতিস্থাপন করুন:

// Create and send a test notification to the service worker.
async function sendNotification() {
  // Use a random number as part of the notification data
  // (so you can tell the notifications apart during testing!)
  let randy = Math.floor(Math.random() * 100);
  let notification = {
    title: 'Test ' + randy,
    options: { body: 'Test body ' + randy }
  };
  // Get a reference to the service worker registration.
  let registration = await getRegistration();
  // Check that the service worker registration exists.
  if (registration) {
    // Check that a service worker controller exists before
    // trying to access the postMessage method.
    if (navigator.serviceWorker.controller) {
      navigator.serviceWorker.controller.postMessage(notification);
    } else {
      console.log('No service worker controller found. Try a soft reload.');
    }
  }
}

এই কোডটি কী করছে তা এখানে:

• sendNotification একটি অ্যাসিঙ্ক্রোনাস ফাংশন, তাই আপনি পরিষেবা কর্মী নিবন্ধনের একটি রেফারেন্স পেতে await ব্যবহার করতে পারেন।

• পরিষেবা কর্মীর postMessage পদ্ধতি অ্যাপ থেকে পরিষেবা কর্মীর কাছে ডেটা পাঠায়। আরও তথ্যের জন্য পোস্টমেসেজে MDN ডকুমেন্টেশন দেখুন।

• কোডটি postMessage ফাংশন অ্যাক্সেস করার চেষ্টা করার আগে navigator.serviceWorker.controller প্রপার্টির উপস্থিতি পরীক্ষা করে। navigator.serviceWorker.controller null হবে যদি কোনো সক্রিয় পরিষেবা কর্মী না থাকে, অথবা যদি পৃষ্ঠাটি জোর করে রিফ্রেশ করা হয় ( Shift+ রিলোড )। আরও তথ্যের জন্য MDN-এ ServiceWorker কন্ট্রোলার ডকুমেন্টেশন দেখুন।

পরিষেবা কর্মীর বিজ্ঞপ্তিগুলি পরিচালনা করুন

এই ধাপে, আপনি পরিষেবা কর্মীতে কোড লিখবেন যা এটিতে পোস্ট করা বার্তাগুলি পরিচালনা করবে এবং ব্যবহারকারীকে বিজ্ঞপ্তিগুলি প্রদর্শন করবে৷

এমবেডেড গ্লিচ এডিটরে, public/service-worker.js খুলুন। ফাইলের শেষে নিম্নলিখিত কোড যোগ করুন:

// Show notification when received
self.addEventListener('message', (event) => {
  let notification = event.data;
  self.registration.showNotification(
    notification.title,
    notification.options
  ).catch((error) => {
    console.log(error);
  });
});

এখানে একটি দ্রুত ব্যাখ্যা:

• self হল পরিষেবা কর্মী নিজেই একটি রেফারেন্স।

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

আপনি আটকে থাকলে, সম্পূর্ণ কোডের জন্য glitch.com/edit/#!/codelab-notifications-service-worker-completed দেখুন।

এই সিরিজের পরবর্তী কোডল্যাবে যান: একটি পুশ নোটিফিকেশন সার্ভার তৈরি করুন ।