কোডল্যাব: একটি পুশ নোটিফিকেশন ক্লায়েন্ট তৈরি করুন

Kate Jeffreys

Kayce Basques

এই কোডল্যাবটি আপনাকে ধাপে ধাপে দেখাবে কিভাবে একটি পুশ নোটিফিকেশন ক্লায়েন্ট তৈরি করতে হয়। কোডল্যাব শেষ হওয়ার পরে আপনার কাছে একটি ক্লায়েন্ট থাকবে যা:

• ব্যবহারকারীকে পুশ নোটিফিকেশনের জন্য সাবস্ক্রাইব করে।
• পুশ বার্তা গ্রহণ করে এবং বিজ্ঞপ্তি হিসেবে প্রদর্শন করে।
• ব্যবহারকারীকে পুশ বিজ্ঞপ্তি থেকে সদস্যতা ত্যাগ করে।

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

এই কোডল্যাবের সার্ভার কোড ইতিমধ্যেই সম্পূর্ণ। আপনি এই কোডল্যাবে শুধুমাত্র ক্লায়েন্টটি বাস্তবায়ন করবেন। পুশ নোটিফিকেশন সার্ভার কীভাবে বাস্তবায়ন করবেন তা জানতে, কোডল্যাব দেখুন: একটি পুশ নোটিফিকেশন সার্ভার তৈরি করুন ।

ব্রাউজারের সামঞ্জস্য

এই কোডল্যাবটি নিম্নলিখিত অপারেটিং সিস্টেম এবং ব্রাউজার সমন্বয়ের সাথে কাজ করে বলে জানা গেছে:

• উইন্ডোজ: ক্রোম, এজ
• ম্যাকওএস: ক্রোম, ফায়ারফক্স
• অ্যান্ড্রয়েড: ক্রোম, ফায়ারফক্স

এই কোডল্যাবটি নিম্নলিখিত অপারেটিং সিস্টেমগুলির (অথবা অপারেটিং সিস্টেম এবং ব্রাউজার সংমিশ্রণ) সাথে কাজ করে না বলে জানা গেছে:

• ম্যাকওএস: ব্রেভ, এজ, সাফারি
• আইওএস

সেটআপ

প্রকল্পটি সম্পাদনাযোগ্য করতে Remix to Edit এ ক্লিক করুন।

প্রমাণীকরণ সেট আপ করুন

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

VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"

1. public/index.js খুলুন।
2. আপনার পাবলিক কী-এর মান দিয়ে VAPID_PUBLIC_KEY_VALUE_HERE প্রতিস্থাপন করুন।

একজন পরিষেবা কর্মী নিবন্ধন করুন

আপনার ক্লায়েন্টের বিজ্ঞপ্তি গ্রহণ এবং প্রদর্শনের জন্য একজন পরিষেবা কর্মীর প্রয়োজন। যত তাড়াতাড়ি সম্ভব পরিষেবা কর্মীকে নিবন্ধন করা ভাল। আরও প্রেক্ষাপটের জন্য বিজ্ঞপ্তি হিসাবে পুশ করা বার্তাগুলি গ্রহণ এবং প্রদর্শন দেখুন।

1. // TODO add startup logic here comment করে নিচের কোডটি প্রতিস্থাপন করুন:

   if ('serviceWorker' in navigator && 'PushManager' in window) {
     navigator.serviceWorker.register('./service-worker.js').then(serviceWorkerRegistration => {
       console.info('Service worker was registered.');
       console.info({serviceWorkerRegistration});
     }).catch(error => {
       console.error('An error occurred while registering the service worker.');
       console.error(error);
     });
     subscribeButton.disabled = false;
   } else {
     console.error('Browser does not support service workers or push messages.');
   }
   
   subscribeButton.addEventListener('click', subscribeButtonHandler);
   unsubscribeButton.addEventListener('click', unsubscribeButtonHandler);
   

2. Chrome-এ, DevTools কনসোল খুলুন ।

3. তুমি Service worker was registered. logged to Console" বার্তাটি দেখতে পাবে।

পুশ নোটিফিকেশনের অনুমতির জন্য অনুরোধ করুন

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

1. public/index.js এ subscribeButtonHandler() এ // TODO মন্তব্যটি নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন:

   // Prevent the user from clicking the subscribe button multiple times.
   subscribeButton.disabled = true;
   const result = await Notification.requestPermission();
   if (result === 'denied') {
     console.error('The user explicitly denied the permission request.');
     return;
   }
   if (result === 'granted') {
     console.info('The user accepted the permission request.');
   }
   

2. অ্যাপ ট্যাবে ফিরে যান এবং সাবস্ক্রাইব ক্লিক করে পুশ করুন । আপনার ব্রাউজার বা অপারেটিং সিস্টেম জিজ্ঞাসা করবে যে আপনি ওয়েবসাইটটিকে পুশ বিজ্ঞপ্তি পাঠাতে চান কিনা।

3. "অনুমতি দিন" (অথবা আপনার ব্রাউজার বা অপারেটিং সিস্টেমে ব্যবহৃত সমতুল্য বাক্যাংশ) নির্বাচন করুন। কনসোলে আপনি একটি বার্তা দেখতে পাবেন যা নির্দেশ করে যে অনুরোধটি গৃহীত হয়েছে নাকি প্রত্যাখ্যান করা হয়েছে।

পুশ নোটিফিকেশন সাবস্ক্রাইব করুন

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

1. subscribeButtonHandler() তে নিম্নলিখিত হাইলাইট করা কোডটি যোগ করুন:

   subscribeButton.disabled = true;
   const result = await Notification.requestPermission();
   if (result === 'denied') {
     console.error('The user explicitly denied the permission request.');
     return;
   }
   if (result === 'granted') {
     console.info('The user accepted the permission request.');
   }
   const registration = await navigator.serviceWorker.getRegistration();
   const subscribed = await registration.pushManager.getSubscription();
   if (subscribed) {
     console.info('User is already subscribed.');
     notifyMeButton.disabled = false;
     unsubscribeButton.disabled = false;
     return;
   }
   const subscription = await registration.pushManager.subscribe({
     userVisibleOnly: true,
     applicationServerKey: urlB64ToUint8Array(VAPID_PUBLIC_KEY)
   });
   notifyMeButton.disabled = false;
   fetch('/add-subscription', {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json'
     },
     body: JSON.stringify(subscription)
   });
   

userVisibleOnly বিকল্পটি অবশ্যই true হতে হবে। ব্যবহারকারী-দৃশ্যমান বিজ্ঞপ্তিগুলি ( silent pushes ) প্রদর্শন না করেই একদিন বার্তা পুশ করা সম্ভব হতে পারে কিন্তু গোপনীয়তার উদ্বেগের কারণে ব্রাউজারগুলি সেই ক্ষমতাটি অনুমোদন করে না।

applicationServerKey মানটি একটি ইউটিলিটি ফাংশনের উপর নির্ভর করে যা একটি base64 স্ট্রিংকে Uint8Array তে রূপান্তর করে। এই মানটি আপনার সার্ভার এবং পুশ পরিষেবার মধ্যে প্রমাণীকরণের জন্য ব্যবহৃত হয়।

পুশ বিজ্ঞপ্তি থেকে সদস্যতা ত্যাগ করুন

একজন ব্যবহারকারী পুশ নোটিফিকেশন সাবস্ক্রাইব করার পর, যদি ব্যবহারকারী তাদের মন পরিবর্তন করে এবং আর পুশ নোটিফিকেশন পেতে না চায়, তাহলে আপনার UI-কে আনসাবস্ক্রাইব করার একটি উপায় প্রদান করতে হবে।

• unsubscribeButtonHandler() এ // TODO মন্তব্যটি নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন:

const registration = await navigator.serviceWorker.getRegistration();
const subscription = await registration.pushManager.getSubscription();
fetch('/remove-subscription', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({endpoint: subscription.endpoint})
});
const unsubscribed = await subscription.unsubscribe();
if (unsubscribed) {
  console.info('Successfully unsubscribed from push notifications.');
  unsubscribeButton.disabled = true;
  subscribeButton.disabled = false;
  notifyMeButton.disabled = true;
}

একটি পুশ বার্তা গ্রহণ করুন এবং এটি একটি বিজ্ঞপ্তি হিসাবে প্রদর্শন করুন

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

1. public/service-worker.js খুলুন এবং সার্ভিস ওয়ার্কারের push ইভেন্ট হ্যান্ডলারে // TODO মন্তব্যটি নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন:

   let data = event.data.json();
   const image = 'logo.png';
   const options = {
     body: data.options.body,
     icon: image
   }
   self.registration.showNotification(
     data.title,
     options
   );
   

2. অ্যাপ ট্যাবে ফিরে যান।

3. Notify me এ ক্লিক করুন। আপনি একটি পুশ নোটিফিকেশন পাবেন।

4. অন্যান্য সমর্থিত ব্রাউজারে আপনার অ্যাপ ট্যাবের URL খুলুন। সাবস্ক্রিপশন ওয়ার্কফ্লোটি দেখুন এবং সকলকে বিজ্ঞপ্তি দিন ক্লিক করুন। আপনি প্রতিটি ব্রাউজারে একই পুশ বিজ্ঞপ্তি পাবেন।

আপনি অনেক উপায়ে বিজ্ঞপ্তিটি কাস্টমাইজ করতে পারেন। আরও জানতে ServiceWorkerRegistration.showNotification() এর প্যারামিটারগুলি দেখুন।

কোনও ব্যবহারকারী যখন কোনও বিজ্ঞপ্তিতে ক্লিক করেন তখন একটি URL খুলুন

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

1. সার্ভিস ওয়ার্কারের notificationclick ইভেন্ট হ্যান্ডলারে // TODO মন্তব্যটি নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন:

   event.notification.close();
   event.waitUntil(self.clients.openWindow('https://web.dev'));
   

2. অ্যাপ ট্যাবে ফিরে যান, নিজেকে আরেকটি বিজ্ঞপ্তি পাঠান, এবং তারপর বিজ্ঞপ্তিতে ক্লিক করুন। আপনার ব্রাউজারটি একটি নতুন ট্যাব খুলবে এবং https://web.dev লোড করবে।

পরবর্তী পদক্ষেপ

• বিজ্ঞপ্তিগুলি কাস্টমাইজ করার বিভিন্ন উপায় আবিষ্কার করতে ServiceWorkerRegistration.showNotification() দেখুন।
• পুশ নোটিফিকেশন কীভাবে কাজ করে তার গভীর ধারণাগত বোঝার জন্য পুশ নোটিফিকেশনের ওভারভিউ পড়ুন।
• কোডল্যাব দেখুন: সাবস্ক্রিপশন পরিচালনা করে এবং ওয়েব পুশ প্রোটোকল অনুরোধ পাঠায় এমন একটি সার্ভার কীভাবে তৈরি করতে হয় তা শিখতে একটি পুশ নোটিফিকেশন সার্ভার তৈরি করুন ।
• বিজ্ঞপ্তিগুলি কাস্টমাইজ করার সমস্ত উপায় পরীক্ষা করে দেখতে বিজ্ঞপ্তি জেনারেটর ব্যবহার করে দেখুন।