এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

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

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

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

তুমি কি শিখবে

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

তোমার যা লাগবে

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

2. সেট আপ করুন

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

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

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

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

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

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

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

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

Chrome অ্যাপের জন্য ওয়েব সার্ভার ইনস্টল করার পরে, বুকমার্ক বারে অ্যাপস শর্টকাটে ক্লিক করুন:

946bcaaad66e5c8e.png সম্পর্কে

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

9f3c21b2cf6cbfb5.png সম্পর্কে

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

73543edeb27c3d6f.png সম্পর্কে

"ফোল্ডার বেছে নিন" বোতামে ক্লিক করুন এবং আপনার ডাউনলোড করা push-notifications ফোল্ডার থেকে app ফোল্ডারটি নির্বাচন করুন। এটি আপনাকে ডায়ালগের ওয়েব সার্ভার URL(গুলি) বিভাগে প্রদর্শিত URL এর মাধ্যমে আপনার চলমান কাজটি পরিবেশন করতে সক্ষম করে।

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

5ac11bca86ce7369.png সম্পর্কে

তারপর Web Server: STARTED টগলটি বাম দিকে স্লাইড করে সার্ভারটি থামান এবং পুনরায় চালু করুন এবং তারপর ডানদিকে ফিরে যান।

d42f87972f9fec24.png সম্পর্কে

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

00-পুশ-কোডেল্যাব.পিএনজি

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

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

Chrome এ এটি সেট আপ করতে:

পুশ কোডল্যাব ট্যাবে যান।
DevTools খুলুন: Windows এবং Linux-এ Ctrl-Shift-I, macOS-এ Cmd-Option-I।
অ্যাপ্লিকেশন প্যানেলটি নির্বাচন করুন, সার্ভিস ওয়ার্কার্স ট্যাবে ক্লিক করুন এবং আপডেট অন রিলোড চেকবক্সটি চেক করুন। যখন এই চেকবক্সটি সক্রিয় থাকে, তখন প্রতিবার পৃষ্ঠাটি পুনরায় লোড করার সময় পরিষেবা কর্মীকে জোর করে আপডেট করা হয়।

e7d384fb77885b99.png সম্পর্কে

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

সম্পূর্ণ কোড

আপনার 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 ফাইলটি নিবন্ধন করে।

চেষ্টা করে দেখো

ব্রাউজারে Push Codelab ট্যাব রিফ্রেশ করে আপনার পরিবর্তনগুলি পরীক্ষা করুন।

Chrome DevTools-এ একটি Service Worker is registered message পরীক্ষা করুন, যেমন:

5d7ad383d6f235d5.png সম্পর্কে

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

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

এখানে আপনি একটি পাবলিক এবং প্রাইভেট কী জোড়া তৈরি করতে পারেন।

push-codelab-04-companion.png সম্পর্কে

<Your Public Key> মানটি প্রতিস্থাপন করে আপনার পাবলিক কীটি scripts/main.js এ অনুলিপি করুন:

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();
})

চেষ্টা করে দেখো

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

a1553f4a0483d227.png সম্পর্কে

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

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

সম্পূর্ণ কোড

এই মুহূর্তে, আপনার Enable Push Messaging বোতামটি খুব একটা কাজে আসছে না। আসুন এটি ঠিক করি।

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 এর শীর্ষে রয়েছে।

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

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

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

subscribe() কল করলে একটি প্রতিশ্রুতি ফিরে আসে যা নিম্নলিখিত পদক্ষেপগুলির পরে সমাধান হবে:

ব্যবহারকারী বিজ্ঞপ্তি প্রদর্শনের অনুমতি দিয়েছেন।
ব্রাউজারটি একটি পুশ সার্ভিসে একটি নেটওয়ার্ক অনুরোধ পাঠিয়েছে যাতে একটি 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');
  }
}

চেষ্টা করে দেখো

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

fcc61267a0194e81.png সম্পর্কে

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

5c5505f2ead037c.png সম্পর্কে

৬. হ্যান্ডেলের অনুমতি অস্বীকৃত

সম্পূর্ণ কোড

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

এই পরিস্থিতি মোকাবেলা করার জন্য স্পষ্ট জায়গা হল 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 ক্লিক করতে হবে এবং বিজ্ঞপ্তি অনুমতিটি Use global default (Ask) এ পরিবর্তন করতে হবে।

54495592074f10ae.png সম্পর্কে

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

d4cf22468f6defda.png সম্পর্কে

এই পরিবর্তনের মাধ্যমে, আপনি এখন সম্ভাব্য অনুমতি পরিস্থিতির যত্ন নেওয়ার পরে ব্যবহারকারীকে সাবস্ক্রাইব করতে পারবেন।

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

সম্পূর্ণ কোড

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

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

আপনার 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-এর অ্যাপ্লিকেশন প্যানেলে, সার্ভিস ওয়ার্কার্স ট্যাবের অধীনে, পুশ বোতামে ক্লিক করুন:

1ee499267eeccd1c.png সম্পর্কে

Push এ ক্লিক করার পর, আপনি এইরকম একটি বিজ্ঞপ্তি দেখতে পাবেন:

379105dfb0ea56d8.png সম্পর্কে

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

৮. বিজ্ঞপ্তি ক্লিক করুন

সম্পূর্ণ কোড

আপনি যদি এই বিজ্ঞপ্তিগুলির একটিতে ক্লিক করেন, তাহলে আপনি লক্ষ্য করবেন যে কিছুই ঘটেনি। আপনি আপনার পরিষেবা কর্মীতে notificationclick ইভেন্টগুলি শুনে নোটিফিকেশন ক্লিকগুলি পরিচালনা করতে পারেন।

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

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 URL লোড হবে। এটি পরিবর্তন করতে দ্বিধা করবেন না।

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

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

চেষ্টা করে দেখো

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

9. পুশ বার্তা পাঠান

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

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

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

bb202867962a0249.png অনুসরণ

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

a0dd93bc33a9e8cf.png সম্পর্কে

টেক্সট টু সেন্ড এর অধীনে, পুশ মেসেজের সাথে আপনি যে কোনও স্ট্রিং পাঠাতে চান তা যোগ করুন।

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

a5e8e89411ec034.png সম্পর্কে

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

এটি আপনাকে ডেটা প্রেরণ এবং গ্রহণ পরীক্ষা করার এবং ফলস্বরূপ বিজ্ঞপ্তিগুলি পরিচালনা করার সুযোগ দেবে।

কম্প্যানিয়ন অ্যাপটি কেবল একটি নোড সার্ভার যা বার্তা পাঠানোর জন্য ওয়েব-পুশ লাইব্রেরি ব্যবহার করে। আপনার জন্য পুশ বার্তা পাঠানোর জন্য কোন লাইব্রেরিগুলি উপলব্ধ তা দেখার জন্য GitHub-এ web-push-libs org পর্যালোচনা করা মূল্যবান। এটি পুশ বার্তা ট্রিগার করার জন্য অনেক বিবরণ পরিচালনা করে।

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

১০. ব্যবহারকারীর সদস্যতা ত্যাগ করুন

সম্পূর্ণ কোড

একটি জিনিসের অভাব হল push থেকে একজন ব্যবহারকারীকে আনসাবস্ক্রাইব করার ক্ষমতা। এটি করার জন্য আপনাকে 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();
})

চেষ্টা করে দেখো

আপনার ওয়েব অ্যাপে Enable Push Messaging অথবা Disable Push Messaging টিপতে সক্ষম হবেন, এবং লগগুলি ব্যবহারকারীকে সাবস্ক্রাইব এবং আনসাবস্ক্রাইব করা দেখাবে।

81a07119235b53da.png সম্পর্কে

১১. সমাপ্ত

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

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

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

আরও পড়া

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

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

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

তুমি কি শিখবে

তোমার যা লাগবে

2. সেট আপ করুন

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

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

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

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

চেষ্টা করে দেখো

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

৪. অবস্থা শুরু করুন

চেষ্টা করে দেখো

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

চেষ্টা করে দেখো

৬. হ্যান্ডেলের অনুমতি অস্বীকৃত

চেষ্টা করে দেখো

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

চেষ্টা করে দেখো

৮. বিজ্ঞপ্তি ক্লিক করুন

চেষ্টা করে দেখো

9. পুশ বার্তা পাঠান

১০. ব্যবহারকারীর সদস্যতা ত্যাগ করুন

চেষ্টা করে দেখো

১১. সমাপ্ত

আরও পড়া

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