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

কেট জেফ্রিস
Kate Jeffreys
Kayce Basques

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

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

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

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

সম্পূর্ণ কোড দেখতে push-notifications-client-codelab-complete ( উৎস ) দেখুন।

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

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

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

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

  • macOS: সাহসী, এজ, সাফারি
  • iOS

সেটআপ

কোডটির একটি সম্পাদনাযোগ্য অনুলিপি পান

এই নির্দেশাবলীর ডানদিকে আপনি যে কোড এডিটরটি দেখছেন তাকে এই কোডল্যাব জুড়ে গ্লিচ UI বলা হবে।

  1. প্রকল্পটিকে সম্পাদনাযোগ্য করতে সম্পাদনা করতে রিমিক্সে ক্লিক করুন৷

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

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

  1. Glitch UI-তে Tools-এ ক্লিক করুন এবং তারপর Glitch Terminal খুলতে Terminal-এ ক্লিক করুন।
  2. গ্লিচ টার্মিনালে, npx web-push generate-vapid-keys চালান। ব্যক্তিগত কী এবং সর্বজনীন কী মান অনুলিপি করুন।
  3. Glitch UI এ .env খুলুন এবং VAPID_PUBLIC_KEY এবং VAPID_PRIVATE_KEY আপডেট করুন। VAPID_SUBJECT mailto:test@test.test এ সেট করুন। এই সমস্ত মান ডবল উদ্ধৃতি মধ্যে আবৃত করা উচিত. আপনার আপডেট করার পরে, আপনার .env ফাইলটি এর মতো দেখতে হবে: 
VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"
  1. গ্লিচ টার্মিনাল বন্ধ করুন।
  1. public/index.js খুলুন।
  2. আপনার সর্বজনীন কী-এর মান দিয়ে VAPID_PUBLIC_KEY_VALUE_HERE প্রতিস্থাপন করুন।

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

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

  1. প্রতিস্থাপন করুন // TODO add startup logic here নিচের কোড দিয়ে মন্তব্য করুন: 
// TODO add startup logic here
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);
  1. সাইটের পূর্বরূপ দেখতে, অ্যাপ দেখুন টিপুন। তারপর ফুলস্ক্রিন টিপুন ফুলস্ক্রিন .
  1. DevTools খুলতে `Control+Shift+J` (বা Mac এ `Command+Option+J`) টিপুন।
  2. কনসোল ট্যাবে ক্লিক করুন। আপনি Service worker was registered. কনসোলে লগ ইন করা হয়েছে।

পুশ বিজ্ঞপ্তি অনুমতি অনুরোধ

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

  1. Glitch UI-তে আপনার কোডে ফিরে যেতে উৎস দেখুন- এ ক্লিক করুন।
  2. public/index.js এ subscribeButtonHandler() এ // TODO মন্তব্যটিকে নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন: 
// 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.');
}
  1. অ্যাপ ট্যাবে ফিরে যান এবং পুশ করতে সাবস্ক্রাইব ক্লিক করুন। আপনার ব্রাউজার বা অপারেটিং সিস্টেম সম্ভবত আপনাকে জিজ্ঞাসা করবে যে আপনি ওয়েবসাইটটি আপনাকে পুশ বিজ্ঞপ্তি পাঠাতে দিতে চান কিনা। অনুমতি দিন (বা আপনার ব্রাউজার/ওএস ব্যবহার করে সমতুল্য বাক্যাংশ) ক্লিক করুন। কনসোলে আপনার অনুরোধটি গৃহীত বা অস্বীকার করা হয়েছে কিনা তা নির্দেশ করে একটি বার্তা দেখতে হবে।

পুশ বিজ্ঞপ্তি সাবস্ক্রাইব করুন

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

  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 হতে হবে। ব্যবহারকারী-দৃশ্যমান বিজ্ঞপ্তিগুলি ( নীরব ধাক্কা ) প্রদর্শন না করে একদিন বার্তাগুলি পুশ করা সম্ভব হতে পারে তবে ব্রাউজারগুলি বর্তমানে গোপনীয়তার উদ্বেগের কারণে সেই ক্ষমতাটিকে অনুমতি দেয় না৷

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

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

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

  1. নিম্নলিখিত কোড দিয়ে unsubscribeButtonHandler() এ // TODO মন্তব্যটি প্রতিস্থাপন করুন: 
// 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 মন্তব্যটি প্রতিস্থাপন করুন: 
// TODO
let data = event.data.json();
const image = 'https://cdn.glitch.com/614286c9-b4fc-4303-a6a9-a4cef0601b74%2Flogo.png?v=1605150951230';
const options = {
  body: data.options.body,
  icon: image
}
self.registration.showNotification(
  data.title, 
  options
);
  1. অ্যাপ ট্যাবে ফিরে যান।
  2. আমাকে অবহিত করুন ক্লিক করুন। আপনি একটি পুশ বিজ্ঞপ্তি পেতে হবে.
  3. সাবস্ক্রিপশন ওয়ার্কফ্লোতে গিয়ে অন্যান্য ব্রাউজারে (বা এমনকি অন্যান্য ডিভাইসেও) আপনার অ্যাপ ট্যাবের URL খোলার চেষ্টা করুন এবং তারপরে সকলকে অবহিত করুন ক্লিক করুন। আপনি সাবস্ক্রাইব করা সমস্ত ব্রাউজারে একই পুশ বিজ্ঞপ্তি পাবেন। ব্রাউজার/ওএস সংমিশ্রণগুলির একটি তালিকা দেখতে ব্রাউজার সামঞ্জস্যে ফিরে যান যা কাজ করছে বা কাজ করছে না।

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

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

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

  1. পরিষেবা কর্মীর notificationclick ইভেন্ট হ্যান্ডলারে // TODO মন্তব্যটি নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন: 
// TODO
event.notification.close();
event.waitUntil(self.clients.openWindow('https://web.dev'));
  1. অ্যাপ ট্যাবে ফিরে যান, নিজেকে অন্য বিজ্ঞপ্তি পাঠান এবং তারপর বিজ্ঞপ্তিতে ক্লিক করুন। আপনার ব্রাউজার একটি নতুন ট্যাব খুলবে এবং https://web.dev লোড করবে।

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