একটি ওয়েব অ্যাপে পুশ বিজ্ঞপ্তি যোগ করুন

১. সংক্ষিপ্ত বিবরণ

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

আপনি যা শিখবেন

• পুশ মেসেজিংয়ের জন্য একজন ব্যবহারকারীকে কীভাবে সাবস্ক্রাইব এবং আনসাবস্ক্রাইব করবেন
• আগত পুশ মেসেজগুলি কীভাবে পরিচালনা করবেন
• কীভাবে একটি বিজ্ঞপ্তি প্রদর্শন করবেন
• নোটিফিকেশন ক্লিকের প্রতিক্রিয়া কীভাবে জানাবেন

আপনার যা যা লাগবে

• ক্রোম ৫২ বা তার উপরে
• ক্রোমের জন্য ওয়েব সার্ভার , অথবা আপনার পছন্দের নিজস্ব ওয়েব সার্ভার
• একটি টেক্সট এডিটর
• HTML, CSS, JavaScript এবং Chrome DevTools সম্পর্কে প্রাথমিক জ্ঞান
• নমুনা কোড (সেট আপ দেখুন)।

২. প্রস্তুত হন

নমুনা কোড ডাউনলোড করুন

এই কোডল্যাবের নমুনা কোড পাওয়ার দুটি উপায় আছে:

• গিট রিপোজিটরি ক্লোন করুন:

git clone https://github.com/GoogleChrome/push-notifications.git

• জিপ ফাইলটি ডাউনলোড করুন:

সোর্স কোড ডাউনলোড করুন

আপনি যদি সোর্সটি একটি ZIP ফাইল হিসেবে ডাউনলোড করেন, তাহলে সেটি আনপ্যাক করলে push-notifications-master একটি রুট ফোল্ডার পাবেন।

ওয়েব সার্ভার ইনস্টল এবং যাচাই করুন

যদিও আপনি আপনার নিজের ওয়েব সার্ভার ব্যবহার করতে পারেন, এই কোডল্যাবটি ‘Web Server for Chrome’ অ্যাপটির সাথে ভালোভাবে কাজ করার জন্য ডিজাইন করা হয়েছে। যদি আপনার কাছে এখনও সেই অ্যাপটি ইনস্টল করা না থাকে, তবে আপনি এটি ক্রোম ওয়েব স্টোর থেকে পেতে পারেন:

ক্রোমের জন্য ওয়েব সার্ভার ইনস্টল করুন

Web Server for Chrome অ্যাপটি ইনস্টল করার পর, বুকমার্ক বারে থাকা Apps শর্টকাটটিতে ক্লিক করুন:

অ্যাপস উইন্ডোতে, ওয়েব সার্ভার আইকনে ক্লিক করুন:

এরপরে আপনি এই ডায়ালগটি দেখতে পাবেন, যা আপনাকে আপনার স্থানীয় ওয়েব সার্ভার কনফিগার করার সুযোগ দেবে:

‘Choose folder’ বোতামে ক্লিক করুন এবং আপনার ডাউনলোড করা push-notifications ফোল্ডারের মধ্যে থাকা app ফোল্ডারটি নির্বাচন করুন। এর ফলে আপনি ডায়ালগের ‘ Web Server URL(s)’ অংশে দেখানো URL-এর মাধ্যমে আপনার চলমান কাজটি পরিবেশন করতে পারবেন।

Options-এর অধীনে, Automatically show index.html-এর পাশের বক্সে টিক চিহ্ন দিন, যেমনটি নিচে দেখানো হয়েছে:

এরপর, ‘Web Server: STARTED ’ টগলটি বামে এবং তারপর আবার ডানে স্লাইড করে সার্ভারটি বন্ধ ও পুনরায় চালু করুন।

আপনার ওয়েব ব্রাউজারে সাইটটি দেখতে ওয়েব সার্ভার ইউআরএল-এ ক্লিক করুন। আপনি এইরকম দেখতে একটি পৃষ্ঠা দেখতে পাবেন — যদিও আপনার সংস্করণে ঠিকানা হিসেবে 127.0.0.1:8887 দেখানো হতে পারে:

সর্বদা সার্ভিস ওয়ার্কার আপডেট করুন

ডেভেলপমেন্টের সময় এটা নিশ্চিত করা সহায়ক যে আপনার সার্ভিস ওয়ার্কার সর্বদা হালনাগাদ থাকে এবং এতে সর্বশেষ পরিবর্তনগুলো অন্তর্ভুক্ত থাকে।

ক্রোমে এটি সেট করতে:

1. পুশ কোডল্যাব ট্যাবে যান।
2. DevTools খুলুন: Windows এবং Linux-এ Ctrl-Shift-I, macOS-এ Cmd-Option-I।
3. অ্যাপ্লিকেশন প্যানেলটি নির্বাচন করুন, সার্ভিস ওয়ার্কার্স ট্যাবে ক্লিক করুন এবং ‘আপডেট অন রিলোড’ চেকবক্সটি চেক করুন। এই চেকবক্সটি সক্রিয় করা থাকলে, প্রতিবার পেজ রিলোড হওয়ার সাথে সাথে সার্ভিস ওয়ার্কারটি জোরপূর্বক আপডেট হয়ে যায়।

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

সম্পূর্ণ কোড

আপনার app ডিরেক্টরিতে sw.js নামের একটি খালি ফাইল আছে। এই ফাইলটিই হবে আপনার সার্ভিস ওয়ার্কার। আপাতত এটি খালিই থাকতে পারে। পরে আপনি এতে কোড যোগ করবেন।

প্রথমে, আপনাকে এই ফাইলটিকে আপনার সার্ভিস ওয়ার্কার হিসেবে রেজিস্টার করতে হবে।

আপনার app/index.html পেজটি scripts/main.js ফাইলটি লোড করে। আপনি এই জাভাস্ক্রিপ্ট ফাইলে আপনার সার্ভিস ওয়ার্কারটি রেজিস্টার করেন।

scripts/main.js ফাইলে নিম্নলিখিত কোডটি যোগ করুন:

if ('serviceWorker' in navigator && 'PushManager' in window) {
  console.log('Service Worker and Push are supported');

  navigator.serviceWorker.register('sw.js')
  .then(function(swReg) {
    console.log('Service Worker is registered', swReg);

    swRegistration = swReg;
  })
  .catch(function(error) {
    console.error('Service Worker Error', error);
  });
} else {
  console.warn('Push messaging is not supported');
  pushButton.textContent = 'Push Not Supported';
}

এই কোডটি আপনার ব্রাউজারে সার্ভিস ওয়ার্কার এবং পুশ মেসেজিং সমর্থিত কিনা তা যাচাই করে। যদি সমর্থিত হয়, তবে কোডটি আপনার sw.js ফাইলটি রেজিস্টার করে।

চেষ্টা করে দেখুন

ব্রাউজারে পুশ কোডল্যাব ট্যাবটি রিফ্রেশ করে আপনার পরিবর্তনগুলো যাচাই করুন।

ক্রোম ডেভটুলস-এর কনসোলে ' Service Worker is registered message দেখুন, যেমনটা নিচে দেখানো হয়েছে:

অ্যাপ্লিকেশন সার্ভার কীগুলি পান

এই কোডল্যাবটি নিয়ে কাজ করার জন্য, আপনাকে অ্যাপ্লিকেশন সার্ভার কী তৈরি করতে হবে। আপনি এটি সহযোগী সাইট web-push-codelab.glitch.me- তে করতে পারেন।

এখানে আপনি একটি পাবলিক ও প্রাইভেট কী পেয়ার তৈরি করতে পারবেন।

আপনার পাবলিক কী ` scripts/main.js ফাইলে কপি করে <Your Public Key> ভ্যালুটি প্রতিস্থাপন করুন:

const applicationServerPublicKey = '<Your Public Key>';

গুরুত্বপূর্ণ: আপনার ওয়েব অ্যাপে কখনোই আপনার প্রাইভেট কী রাখবেন না!

৪. অবস্থা প্রারম্ভিকীকরণ করুন

সম্পূর্ণ কোড

এই মুহূর্তে, ওয়েব অ্যাপের ' Enable' বাটনটি নিষ্ক্রিয় আছে এবং ক্লিক করা যাচ্ছে না। এর কারণ হলো, ডিফল্টভাবে পুশ বাটনটি নিষ্ক্রিয় রাখা এবং ব্রাউজারটি পুশ মেসেজিং সমর্থন করে কি না ও ব্যবহারকারী বর্তমানে মেসেজিং-এ সাবস্ক্রাইব করা আছেন কি না, তা নিশ্চিত হওয়ার পর এটি সক্রিয় করা একটি উত্তম রীতি।

আপনাকে scripts/main.js এ দুটি ফাংশন তৈরি করতে হবে:

• ব্যবহারকারী বর্তমানে সাবস্ক্রাইব করা আছে কিনা তা পরীক্ষা করতে initializeUI ব্যবহার করুন।
• updateBtn , আপনার বাটনটি সক্রিয় করতে এবং ব্যবহারকারী সাবস্ক্রাইব করেছেন কি না তার উপর নির্ভর করে এর লেখা পরিবর্তন করতে।

main.js এ এইভাবে একটি initializeUI ফাংশন যোগ করুন:

function initializeUI() {
  // Set the initial subscription value
  swRegistration.pushManager.getSubscription()
  .then(function(subscription) {
    isSubscribed = !(subscription === null);

    if (isSubscribed) {
      console.log('User IS subscribed.');
    } else {
      console.log('User is NOT subscribed.');
    }

    updateBtn();
  });
}

আপনার নতুন পদ্ধতিটি পূর্ববর্তী ধাপের swRegistration ব্যবহার করে, সেখান থেকে pushManager প্রপার্টিটি নেয় এবং তার উপর getSubscription() কল করে।

pushManager getSubscription() একটি প্রমিজ রিটার্ন করে, যা কোনো সাবস্ক্রিপশন থাকলে বর্তমান সাবস্ক্রিপশনটি দিয়ে রিজলভ হয়। অন্যথায়, এটি null রিটার্ন করে। এর মাধ্যমে, আপনি চেক করতে পারেন যে ব্যবহারকারী আগে থেকেই সাবস্ক্রাইব করা আছে কিনা, isSubscribed এর ভ্যালু সেট করতে পারেন, এবং তারপর বাটনটি আপডেট করার জন্য updateBtn() কল করতে পারেন।

main.js এ updateBtn() ফাংশনটি যোগ করুন:

function updateBtn() {
  if (isSubscribed) {
    pushButton.textContent = 'Disable Push Messaging';
  } else {
    pushButton.textContent = 'Enable Push Messaging';
  }

  pushButton.disabled = false;
}

এই ফাংশনটি ব্যবহারকারী সাবস্ক্রাইব করেছেন কি না, তার উপর নির্ভর করে বাটনটি সক্রিয় করে এবং এর লেখা পরিবর্তন করে।

সবশেষে, আপনার সার্ভিস ওয়ার্কারটি main.js এ রেজিস্টার করার পর initializeUI() কল করতে হবে।

navigator.serviceWorker.register('sw.js')
.then(function(swReg) {
  console.log('Service Worker is registered', swReg);

  swRegistration = swReg;
  initializeUI();
})

চেষ্টা করে দেখুন

পুশ কোডল্যাব ট্যাবটি রিফ্রেশ করুন। আপনি দেখতে পাবেন যে ‘Enable Push Messaging’ বাটনটি এখন সক্রিয় হয়েছে (আপনি এটিতে ক্লিক করতে পারবেন) এবং কনসোলে দেখতে পাবেন User is NOT subscribed ।

এই কোডল্যাবের বাকি অংশটি সম্পন্ন করার সাথে সাথে, আপনি যখনই সাবস্ক্রাইব বা আনসাবস্ক্রাইব করবেন, তখন বাটনের লেখা পরিবর্তিত হতে দেখবেন।

৫. ব্যবহারকারীকে সাবস্ক্রাইব করুন

সম্পূর্ণ কোড

এই মুহূর্তে, আপনার ‘পুশ মেসেজিং সক্ষম করুন’ বাটনটি তেমন কোনো কাজ করে না। চলুন, এটি ঠিক করা যাক।

initializeUI() ফাংশনে, আপনার বাটনের জন্য একটি ক্লিক লিসেনার যোগ করুন:

function initializeUI() {
  pushButton.addEventListener('click', function() {
    pushButton.disabled = true;
    if (isSubscribed) {
      // TODO: Unsubscribe user
    } else {
      subscribeUser();
    }
  });

  // Set the initial subscription value
  swRegistration.pushManager.getSubscription()
  .then(function(subscription) {
    isSubscribed = !(subscription === null);

    updateSubscriptionOnServer(subscription);

    if (isSubscribed) {
      console.log('User IS subscribed.');
    } else {
      console.log('User is NOT subscribed.');
    }

    updateBtn();
  });
}

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

এরপর, যদি ব্যবহারকারী বর্তমানে সাবস্ক্রাইব করা না থাকে, তাহলে আপনি subscribeUser() কল করবেন। এর জন্য, আপনাকে নিম্নলিখিত কোডটি scripts/main.js ফাইলে পেস্ট করতে হবে:

function subscribeUser() {
  const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
  swRegistration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: applicationServerKey
  })
  .then(function(subscription) {
    console.log('User is subscribed.');

    updateSubscriptionOnServer(subscription);

    isSubscribed = true;

    updateBtn();
  })
  .catch(function(error) {
    console.error('Failed to subscribe the user: ', error);
    updateBtn();
  });
}

চলুন ধাপে ধাপে দেখে নেওয়া যাক এই কোডটি কী করছে এবং কীভাবে ব্যবহারকারীকে পুশ মেসেজিংয়ের জন্য সাবস্ক্রাইব করছে।

প্রথমে, আপনাকে অ্যাপ্লিকেশন সার্ভারের পাবলিক কী নিতে হবে, যা Base64 URL-safe এনকোডেড , এবং সেটিকে একটি UInt8Array তে রূপান্তর করতে হবে, কারণ subscribe() কলের প্রত্যাশিত ইনপুট এটাই। urlB64ToUint8Array() ফাংশনটি scripts/main.js ফাইলের একদম উপরে অবস্থিত।

মানটি রূপান্তর করার পরে, আপনার অ্যাপ্লিকেশন সার্ভারের পাবলিক কী এবং userVisibleOnly: true মানটি পাস করে আপনার সার্ভিস ওয়ার্কারের pushManager এর subscribe() মেথডটি কল করুন।

const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
swRegistration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: applicationServerKey
})

userVisibleOnly প্যারামিটারটি এই নিশ্চয়তা দেয় যে, প্রতিবার একটি পুশ মেসেজ পাঠানো হলে আপনি একটি নোটিফিকেশন দেখাবেন। বর্তমানে, এই মানটি আবশ্যক এবং এর মান অবশ্যই `true` হতে হবে।

subscribe() কল করলে একটি প্রমিজ রিটার্ন হয়, যা নিম্নলিখিত ধাপগুলোর পরে রিজলভ হবে:

1. ব্যবহারকারী নোটিফিকেশন প্রদর্শনের অনুমতি দিয়েছেন।
2. একটি PushSubscription তৈরি করার জন্য প্রয়োজনীয় ডেটা পেতে ব্রাউজারটি একটি পুশ সার্ভিসে নেটওয়ার্ক অনুরোধ পাঠিয়েছে।

এই ধাপগুলো সফল হলে subscribe() প্রমিসটি একটি PushSubscription সহ রিজলভ হবে। যদি ব্যবহারকারী অনুমতি না দেন অথবা ব্যবহারকারীকে সাবস্ক্রাইব করতে কোনো সমস্যা হয়, তাহলে প্রমিসটি একটি এরর সহ রিজেক্ট হবে। এর ফলে আপনার কোডল্যাবে নিম্নলিখিত প্রমিস চেইনটি তৈরি হবে:

swRegistration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: applicationServerKey
})
.then(function(subscription) {
  console.log('User is subscribed.');

  updateSubscriptionOnServer(subscription);

  isSubscribed = true;

  updateBtn();

})
.catch(function(err) {
  console.log('Failed to subscribe the user: ', err);
  updateBtn();
});

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

বাস্তব অ্যাপ্লিকেশনে, updateSubscriptionOnServer() ফাংশনটি ব্যবহার করে আপনি আপনার সাবস্ক্রিপশন ডেটা ব্যাকএন্ডে পাঠান, কিন্তু কোডল্যাবের জন্য আপনি কেবল আপনার UI-তে সাবস্ক্রিপশনটি প্রদর্শন করবেন। scripts/main.js ফাইলে নিম্নলিখিত ফাংশনটি যোগ করুন:

function updateSubscriptionOnServer(subscription) {
  // TODO: Send subscription to application server

  const subscriptionJson = document.querySelector('.js-subscription-json');
  const subscriptionDetails =
    document.querySelector('.js-subscription-details');

  if (subscription) {
    subscriptionJson.textContent = JSON.stringify(subscription);
    subscriptionDetails.classList.remove('is-invisible');
  } else {
    subscriptionDetails.classList.add('is-invisible');
  }
}

চেষ্টা করে দেখুন

পুশ কোডল্যাব ট্যাবে যান, পেজটি রিফ্রেশ করুন এবং বাটনটিতে ক্লিক করুন। আপনি এরকম একটি অনুমতির অনুরোধ দেখতে পাবেন:

আপনি অনুমতি দিলে, কনসোলে User is subscribed লেখাটি দেখতে পাবেন। বাটনটির লেখা বদলে ‘Disable Push Messaging’ হয়ে যাবে এবং আপনি পেজের নিচে সাবস্ক্রিপশনটি JSON ডেটা হিসেবে দেখতে পারবেন।

৬. অনুমতি প্রত্যাখ্যান পরিচালনা করুন

সম্পূর্ণ কোড

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

এই পরিস্থিতিটি সামলানোর সবচেয়ে সহজ উপায় হলো updateBtn() ফাংশনটি ব্যবহার করা। আপনাকে শুধু Notification.permission মানটি যাচাই করতে হবে, ঠিক এইভাবে:

function updateBtn() {
  if (Notification.permission === 'denied') {
    pushButton.textContent = 'Push Messaging Blocked';
    pushButton.disabled = true;
    updateSubscriptionOnServer(null);
    return;
  }

  if (isSubscribed) {
    pushButton.textContent = 'Disable Push Messaging';
  } else {
    pushButton.textContent = 'Enable Push Messaging';
  }

  pushButton.disabled = false;
}

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

চেষ্টা করে দেখুন

যেহেতু আপনি আগের ধাপে আপনার ওয়েব অ্যাপের জন্য অনুমতি দিয়ে দিয়েছেন, তাই আপনাকে URL বারে থাকা বৃত্তের মধ্যে থাকা i- তে ক্লিক করে Notifications পারমিশনটি Use global default (Ask)- এ পরিবর্তন করতে হবে।

এই সেটিংটি পরিবর্তন করার পর, পেজটি রিফ্রেশ করুন এবং ‘Enable Push Messaging’ বাটনে ক্লিক করে পারমিশন ডায়ালগ থেকে ‘Block’ নির্বাচন করুন। বাটনটি নিষ্ক্রিয় হয়ে যাবে এবং ‘Push Messaging Blocked’ লেখাটি প্রদর্শিত হবে।

এই পরিবর্তনের ফলে, সম্ভাব্য অনুমতি পরিস্থিতিগুলো বিবেচনা করে এখন আপনি ব্যবহারকারীকে সাবস্ক্রাইব করতে পারবেন।

৭. পুশ ইভেন্ট পরিচালনা করুন

সম্পূর্ণ কোড

আপনার ব্যাকএন্ড থেকে কীভাবে পুশ মেসেজ পাঠাতে হয় তা শেখার আগে, একজন সাবস্ক্রাইব করা ব্যবহারকারী পুশ মেসেজ পেলে আসলে কী ঘটবে তা আপনাকে বিবেচনা করতে হবে।

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

আপনার sw.js ফাইলে নিম্নলিখিত কোডটি যোগ করুন:

self.addEventListener('push', function(event) {
  console.log('[Service Worker] Push Received.');
  console.log(`[Service Worker] Push had this data: "${event.data.text()}"`);

  const title = 'Push Codelab';
  const options = {
    body: 'Yay it works.',
    icon: 'images/icon.png',
    badge: 'images/badge.png'
  };

  event.waitUntil(self.registration.showNotification(title, options));
});

চলুন এই কোডটি ধাপে ধাপে দেখি। আপনি আপনার সার্ভিস ওয়ার্কারে একটি ইভেন্ট লিসেনার যোগ করে push ইভেন্টগুলোর জন্য অপেক্ষা করছেন:

self.addEventListener('push', ... );

(আপনি যদি আগে ওয়েব ওয়ার্কার নিয়ে কাজ না করে থাকেন, তবে self সম্ভবত আপনার কাছে নতুন। একটি সার্ভিস ওয়ার্কার ফাইলে, self ' সার্ভিস ওয়ার্কারটিকেই নির্দেশ করে।)

যখন একটি পুশ মেসেজ আসে, তখন ইভেন্ট লিসেনারটি কল করা হয়, এবং আপনি সার্ভিস ওয়ার্কারের registration প্রপার্টিতে showNotification() কল করে একটি নোটিফিকেশন তৈরি করতে পারেন। showNotification() এর জন্য একটি title প্রয়োজন; এছাড়াও আপনি একটি বডি মেসেজ, আইকন এবং ব্যাজ সেট করার জন্য এটিকে একটি options অবজেক্ট দিতে পারেন। (এই লেখাটি লেখার সময় ব্যাজটি শুধুমাত্র অ্যান্ড্রয়েডে ব্যবহৃত হয়।)

const title = 'Push Codelab';
const options = {
  body: 'Yay it works.',
  icon: 'images/icon.png',
  badge: 'images/badge.png'
};
self.registration.showNotification(title, options);

আপনার push ইভেন্ট হ্যান্ডলিং-এর সর্বশেষ যে বিষয়টি আলোচনা করতে হবে তা হলো event.waitUntil() । এই মেথডটি একটি প্রমিজ গ্রহণ করে, যা ব্রাউজারকে আপনার সার্ভিস ওয়ার্কারকে ততক্ষণ পর্যন্ত সচল ও চলমান রাখতে সক্ষম করে, যতক্ষণ না পাস করা প্রমিজটি রিজলভ হয়।

উপরের কোডটি আরও সহজে বোঝার জন্য, আপনি এটিকে এইভাবে পুনরায় লিখতে পারেন:

const notificationPromise = self.registration.showNotification(title, options);
event.waitUntil(notificationPromise);

এখন যেহেতু আপনি পুশ ইভেন্টটি ধাপে ধাপে দেখেছেন, চলুন একটি পুশ ইভেন্ট পরীক্ষা করে দেখি।

চেষ্টা করে দেখুন

সার্ভিস ওয়ার্কারে পুশ ইভেন্ট হ্যান্ডলিং ব্যবহার করে, মেসেজ পেলে কী ঘটে তা পরীক্ষা করার জন্য আপনি একটি নকল পুশ ইভেন্ট ট্রিগার করতে পারেন।

আপনার ওয়েব অ্যাপে পুশ মেসেজিং-এর জন্য সাবস্ক্রাইব করুন এবং নিশ্চিত করুন যে কনসোলে User IS subscribed দেখা যাচ্ছে। DevTools-এর অ্যাপ্লিকেশন প্যানেলে, সার্ভিস ওয়ার্কার্স ট্যাবের অধীনে, পুশ বাটনে ক্লিক করুন:

Push-এ ক্লিক করার পর আপনি এইরকম একটি নোটিফিকেশন দেখতে পাবেন:

দ্রষ্টব্য: যদি এই ধাপে কাজ না হয়, তাহলে DevTools Application প্যানেলে থাকা Unregister লিঙ্কের মাধ্যমে আপনার সার্ভিস ওয়ার্কারটি অনিবন্ধিত করার চেষ্টা করুন, সার্ভিস ওয়ার্কারটি বন্ধ হওয়া পর্যন্ত অপেক্ষা করুন এবং তারপর পৃষ্ঠাটি পুনরায় লোড করুন।

৮. নোটিফিকেশন ক্লিক

সম্পূর্ণ কোড

আপনি এই নোটিফিকেশনগুলোর কোনো একটিতে ক্লিক করলে দেখবেন যে কিছুই ঘটছে না। আপনার সার্ভিস ওয়ার্কারে notificationclick ইভেন্টগুলো লিসেন করার মাধ্যমে আপনি নোটিফিকেশন ক্লিকের বিষয়টি নিয়ন্ত্রণ করতে পারেন।

sw.js এ একটি notificationclick লিসেনার যোগ করে শুরু করুন:

self.addEventListener('notificationclick', function(event) {
  console.log('[Service Worker] Notification click received.');

  event.notification.close();

  event.waitUntil(
    clients.openWindow('https://developers.google.com/web')
  );
});

যখন ব্যবহারকারী নোটিফিকেশনটিতে ক্লিক করবেন, তখন notificationclick ইভেন্ট লিসেনারটি কল করা হবে।

কোডটি প্রথমে ক্লিক করা নোটিফিকেশনটি বন্ধ করে দেয়:

event.notification.close();

এরপর একটি নতুন উইন্ডো বা ট্যাব খোলে, যেখানে https://developers.google.com/web ইউআরএলটি লোড হয়। আপনি চাইলে এটি পরিবর্তন করতে পারেন।

event.waitUntil(
    clients.openWindow('https://developers.google.com/web/')
  );

event.waitUntil() নিশ্চিত করে যে নতুন উইন্ডো বা ট্যাব প্রদর্শিত হওয়ার আগে ব্রাউজার যেন সার্ভিস ওয়ার্কারটি বন্ধ করে না দেয়।

চেষ্টা করে দেখুন

DevTools-এ আবার একটি পুশ মেসেজ পাঠানোর চেষ্টা করুন এবং নোটিফিকেশনটিতে ক্লিক করুন। এবার আপনি দেখবেন নোটিফিকেশনটি বন্ধ হয়ে গেছে এবং একটি নতুন ট্যাব খুলে গেছে।

৯. পুশ মেসেজ পাঠান

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

সাধারণত, এর জন্য একটি ওয়েব পেজ থেকে ব্যাকএন্ডে একটি সাবস্ক্রিপশন পাঠাতে হয়। এরপর ব্যাকএন্ডটি সাবস্ক্রিপশনের এন্ডপয়েন্টে একটি এপিআই কল করে একটি পুশ মেসেজ ট্রিগার করে।

এটি এই কোডল্যাবের আওতার বাইরে, কিন্তু আপনি একটি প্রকৃত পুশ মেসেজ পাঠানোর জন্য সহযোগী সাইটটি ( web-push-codelab.glitch.me ) ব্যবহার করতে পারেন। আপনার পেজের নিচে সাবস্ক্রিপশনটি পেস্ট করুন:

তারপর এটি কম্প্যানিয়ন সাইটের 'Subscription to Send To ' টেক্সট এরিয়াতে পেস্ট করুন:

‘Text to Send’- এর অধীনে, পুশ মেসেজের সাথে আপনি যে স্ট্রিংটি পাঠাতে চান তা যোগ করুন।

পুশ মেসেজ পাঠান বাটনটিতে ক্লিক করুন।

এরপর আপনি একটি পুশ মেসেজ পাবেন। আপনার ব্যবহৃত টেক্সটটি কনসোলে লগ করা হবে।

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

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

আপনি সহযোগী সাইটের সমস্ত কোড এখানে দেখতে পারেন।

১০. ব্যবহারকারীকে আনসাবস্ক্রাইব করুন

সম্পূর্ণ কোড

একটিমাত্র যে জিনিসটির অভাব রয়েছে, তা হলো পুশ নোটিফিকেশন থেকে কোনো ব্যবহারকারীকে আনসাবস্ক্রাইব করার সুবিধা। এটি করার জন্য আপনাকে একটি PushSubscription উপর unsubscribe() কল করতে হবে।

আপনার scripts/main.js ফাইলে ফিরে যান, initializeUI() ফাংশনের মধ্যে থাকা pushButton ক্লিক লিসেনারটি নিম্নলিখিতভাবে পরিবর্তন করুন:

pushButton.addEventListener('click', function() {
  pushButton.disabled = true;
  if (isSubscribed) {
    unsubscribeUser();
  } else {
    subscribeUser();
  }
});

লক্ষ্য করুন যে আপনি এখন unsubscribeUser() নামে একটি নতুন ফাংশন কল করতে যাচ্ছেন। এই ফাংশনে, আপনি বর্তমান সাবস্ক্রিপশনটি নেবেন এবং সেটির উপর unsubscribe() কল করবেন। scripts/main.js এ নিম্নলিখিত কোডটি যোগ করুন:

function unsubscribeUser() {
  swRegistration.pushManager.getSubscription()
  .then(function(subscription) {
    if (subscription) {
      return subscription.unsubscribe();
    }
  })
  .catch(function(error) {
    console.log('Error unsubscribing', error);
  })
  .then(function() {
    updateSubscriptionOnServer(null);

    console.log('User is unsubscribed.');
    isSubscribed = false;

    updateBtn();
  });
}

চলুন এই ফাংশনটি ধাপে ধাপে দেখি।

প্রথমে, getSubscription() কল করে আপনি বর্তমান সাবস্ক্রিপশনটি পাবেন:

swRegistration.pushManager.getSubscription()

এটি একটি প্রমিজ রিটার্ন করে যা PushSubscription বিদ্যমান থাকলে তা দিয়ে রিজলভ হয়; অন্যথায়, এটি null রিটার্ন করে। যদি কোনো সাবস্ক্রিপশন থাকে, তবে আপনি সেটির উপর unsubscribe() কল করেন, যা PushSubscription টিকে অবৈধ করে দেয়।

swRegistration.pushManager.getSubscription()
.then(function(subscription) {
  if (subscription) {
    // TODO: Tell application server to delete subscription
    return subscription.unsubscribe();
  }
})
.catch(function(error) {
  console.log('Error unsubscribing', error);
})

unsubscribe() কল করলে একটি প্রমিজ রিটার্ন হয়, কারণ এটি সম্পন্ন হতে কিছুটা সময় লাগতে পারে। আপনি সেই প্রমিজটি রিটার্ন করেন যাতে চেইনের পরবর্তী then() ফাংশনটি unsubscribe() শেষ হওয়া পর্যন্ত অপেক্ষা করে। unsubscribe() কল করার ফলে কোনো এরর হলে, তার জন্য একটি catch হ্যান্ডলারও যোগ করতে হয়। এরপর আপনি আপনার UI আপডেট করতে পারেন।

.then(function() {
  updateSubscriptionOnServer(null);

  console.log('User is unsubscribed.');
  isSubscribed = false;

  updateBtn();
})

চেষ্টা করে দেখুন

আপনার ওয়েব অ্যাপে ‘পুশ মেসেজিং সক্ষম করুন’ বা ‘পুশ মেসেজিং অক্ষম করুন’ বোতামটি চাপতে পারার কথা, এবং লগগুলোতে ব্যবহারকারীর সাবস্ক্রাইব ও আনসাবস্ক্রাইব হওয়ার বিষয়টি দেখা যাবে।

১১. সমাপ্ত

এই কোডল্যাবটি সম্পন্ন করার জন্য অভিনন্দন!

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

আপনি যদি আপনার সাইটে পুশ নোটিফিকেশন চালু করতে চান, তাহলে GCM ব্যবহারকারী পুরোনো বা নন-স্ট্যান্ডার্ড ব্রাউজারগুলোর জন্য সাপোর্ট যোগ করার বিষয়ে আগ্রহী হতে পারেন। এখানে আরও জানুন ।

আরও পড়ুন

• ওয়েব পুশ নোটিফিকেশন : ওয়েবের মৌলিক বিষয়াবলীর উপর ডকুমেন্টেশন।
• ওয়েব পুশ লাইব্রেরি : Node.js, PHP, Java, Python, C, এবং C# সহ বিভিন্ন ওয়েব পুশ লাইব্রেরি।

প্রাসঙ্গিক ব্লগ পোস্ট

• ওয়েব পুশ পেলোড এনক্রিপশন
• অ্যাপ্লিকেশন সার্ভার কী এবং ওয়েব পুশ
• বিজ্ঞপ্তি কার্যক্রম
• আইকন, ইভেন্ট বন্ধ করা, পুনরায় বিজ্ঞপ্তি দেওয়ার পছন্দ এবং টাইমস্ট্যাম্প