কেন পুশ বিজ্ঞপ্তি ব্যবহার?
বিজ্ঞপ্তিগুলি ব্যবহারকারীর কাছে তথ্যের ছোট অংশ উপস্থাপন করে। ওয়েব অ্যাপগুলি ব্যবহারকারীদের গুরুত্বপূর্ণ, সময়-সংবেদনশীল ইভেন্টগুলি বা ব্যবহারকারীর নেওয়া প্রয়োজনীয় পদক্ষেপগুলি সম্পর্কে ব্যবহারকারীদের জানানোর জন্য বিজ্ঞপ্তিগুলি ব্যবহার করতে পারে৷
প্ল্যাটফর্মগুলির মধ্যে বিজ্ঞপ্তিগুলির চেহারা এবং অনুভূতি পরিবর্তিত হয়৷ উদাহরণ স্বরূপ:
ঐতিহ্যগতভাবে, ওয়েব ব্রাউজারগুলিকে একটি অনুরোধ করে সার্ভার এবং ক্লায়েন্টের মধ্যে তথ্য বিনিময় শুরু করতে হত। ওয়েব পুশ প্রযুক্তি , অন্যদিকে, আপনাকে আপনার সার্ভারকে বিজ্ঞপ্তি পাঠাতে কনফিগার করতে দেয় যখন এটি আপনার অ্যাপের জন্য বোধগম্য হয়। একটি পুশ পরিষেবা প্রতিটি সদস্যতা নেওয়া পরিষেবা কর্মীর জন্য অনন্য URL তৈরি করে৷ একটি পরিষেবা কর্মীর URL-এ বার্তা পাঠানো সেই পরিষেবা কর্মীর উপর ইভেন্টগুলি উত্থাপন করে, এটি একটি বিজ্ঞপ্তি প্রদর্শন করার জন্য অনুরোধ করে৷
পুশ বিজ্ঞপ্তিগুলি ব্যবহারকারীদের এটিকে পুনরায় খুলতে এবং সর্বশেষ তথ্যের উপর ভিত্তি করে এটি ব্যবহার করার জন্য অনুরোধ করে আপনার অ্যাপ থেকে সর্বাধিক সুবিধা পেতে সহায়তা করতে পারে৷
বিজ্ঞপ্তি তৈরি করা এবং পাঠানো
বিজ্ঞপ্তি API ব্যবহার করে বিজ্ঞপ্তি তৈরি করুন। একটি Notification অবজেক্টের একটি title স্ট্রিং এবং একটি options অবজেক্ট রয়েছে। উদাহরণ স্বরূপ:
let title = 'Hi!';
let options = {
body: 'Very Important Message',
/* other options can go here */
};
let notification = new Notification(title, options);
title বোল্ডে প্রদর্শিত হয় যখন বিজ্ঞপ্তিটি সক্রিয় থাকে, যখন body অতিরিক্ত পাঠ্য থাকে।
বিজ্ঞপ্তি পাঠানোর অনুমতি পান
একটি বিজ্ঞপ্তি প্রদর্শন করতে, আপনার অ্যাপটিকে ব্যবহারকারীর কাছ থেকে অনুমতি নিতে হবে:
Notification.requestPermission();
পুশ বিজ্ঞপ্তি কিভাবে কাজ করে?
বিজ্ঞপ্তির প্রকৃত শক্তি সেবা কর্মীদের এবং পুশ প্রযুক্তির সমন্বয় থেকে আসে:
পরিষেবা কর্মীরা ব্যাকগ্রাউন্ডে চলতে পারে এবং আপনার অ্যাপটি স্ক্রিনে দৃশ্যমান না থাকলেও বিজ্ঞপ্তিগুলি প্রদর্শন করতে পারে৷
পুশ প্রযুক্তি আপনাকে বিজ্ঞপ্তি পাঠাতে আপনার সার্ভার কনফিগার করতে দেয় যখন এটি আপনার অ্যাপের জন্য অর্থপূর্ণ হয়। একটি পুশ পরিষেবা প্রতিটি সদস্যতা নেওয়া পরিষেবা কর্মীর জন্য অনন্য URL তৈরি করে৷ একটি পরিষেবা কর্মীর URL-এ বার্তা পাঠানো সেই পরিষেবা কর্মীর উপর ইভেন্টগুলি উত্থাপন করে, এটি একটি বিজ্ঞপ্তি প্রদর্শন করার জন্য অনুরোধ করে৷
নিম্নলিখিত উদাহরণ প্রবাহে, একজন ক্লায়েন্ট একজন পরিষেবা কর্মীকে নিবন্ধন করে এবং পুশ বিজ্ঞপ্তিগুলিতে সদস্যতা নেয়। তারপর, সার্ভার সাবস্ক্রিপশন এন্ডপয়েন্টে একটি বিজ্ঞপ্তি পাঠায়।
ক্লায়েন্ট এবং পরিষেবা কর্মী কোনও অতিরিক্ত লাইব্রেরি ছাড়াই ভ্যানিলা জাভাস্ক্রিপ্ট ব্যবহার করেন। সার্ভারটি Node.js- এ express npm প্যাকেজ দিয়ে নির্মিত, এবং বিজ্ঞপ্তি পাঠাতে web-push npm প্যাকেজ ব্যবহার করে। সার্ভারে তথ্য পাঠাতে, ক্লায়েন্ট একটি POST URL-এ একটি কল করে যা সার্ভার প্রকাশ করেছে।
পার্ট 1: একজন পরিষেবা কর্মী নিবন্ধন করুন এবং Push-এ সদস্যতা নিন
একটি ক্লায়েন্ট অ্যাপ
ServiceWorkerContainer.register()এর সাথে একজন পরিষেবা কর্মীকে নিবন্ধন করে। ক্লায়েন্ট নিষ্ক্রিয় থাকাকালীন নিবন্ধিত পরিষেবা কর্মী ব্যাকগ্রাউন্ডে চলতে থাকবে।ক্লায়েন্ট কোড:
navigator.serviceWorker.register('sw.js');ক্লায়েন্ট ব্যবহারকারীর কাছ থেকে বিজ্ঞপ্তি পাঠাতে অনুমতির অনুরোধ করে।
ক্লায়েন্ট কোড:
Notification.requestPermission();পুশ বিজ্ঞপ্তি সক্ষম করতে, পরিষেবা কর্মী একটি পুশ সাবস্ক্রিপশন তৈরি করতে
PushManager.subscribe()ব্যবহার করে।PushManager.subscribe()এ কলে, পরিষেবা কর্মী একটি শনাক্তকারী হিসাবে অ্যাপের API কী সরবরাহ করে।ক্লায়েন্ট কোড:
navigator.serviceWorker.register('sw.js').then(sw => { sw.pushManager.subscribe({ /* API key */ }); });ফায়ারবেস ক্লাউড মেসেজিংয়ের মতো পুশ পরিষেবাগুলি সাবস্ক্রিপশন মডেলে কাজ করে। যখন একজন পরিষেবা কর্মী
PushManager.subscribe()কল করে একটি পুশ পরিষেবাতে সাবস্ক্রাইব করেন, তখন পুশ পরিষেবাটি সেই পরিষেবা কর্মীর জন্য অনন্য একটি URL তৈরি করে৷ ইউআরএলটি সাবস্ক্রিপশন এন্ডপয়েন্ট হিসেবে পরিচিত।ক্লায়েন্ট সাবস্ক্রিপশন এন্ডপয়েন্ট অ্যাপ সার্ভারে পাঠায়।
ক্লায়েন্ট কোড:
navigator.serviceWorker.register('sw.js').then(sw => { sw.pushManager.subscribe({ /* API key */ }).then(subscription => { sendToServer(subscription, '/new-subscription', 'POST'); }); });সার্ভার কোড:
app.post('/new-subscription', (request, response) => { // extract subscription from request // send 'OK' response });
পার্ট 2: একটি বিজ্ঞপ্তি পাঠান
ওয়েব সার্ভার সাবস্ক্রিপশন এন্ডপয়েন্টে একটি বিজ্ঞপ্তি পাঠায়।
সার্ভার কোড:
const webpush = require('web-push'); let options = { /* config info for cloud messaging and API key */ }; let subscription = { /* subscription created in Part 1*/ }; let payload = { /* notification */ }; webpush.sendNotification(subscription, payload, options);সাবস্ক্রিপশন এন্ডপয়েন্ট ফায়ার পুশ ইভেন্টগুলিতে পরিষেবা কর্মীকে লক্ষ্য হিসাবে পাঠানো বিজ্ঞপ্তিগুলি। পরিষেবা কর্মী বার্তাটি গ্রহণ করে এবং এটি ব্যবহারকারীর কাছে একটি বিজ্ঞপ্তি হিসাবে প্রদর্শন করে।
পরিষেবা কর্মী কোড:
self.addEventListener('push', (event) => { let title = { /* get notification title from event data */ } let options = { /* get notification options from event data */ } showNotification(title, options); })ব্যবহারকারী বিজ্ঞপ্তির সাথে ইন্টারঅ্যাক্ট করে, ওয়েব অ্যাপটিকে সক্রিয় করে তোলে যদি এটি আগে থেকে না থাকে।
পরবর্তী পদক্ষেপ
পরবর্তী পদক্ষেপ হিসাবে, পুশ বিজ্ঞপ্তি বাস্তবায়ন!
প্রক্রিয়াটির প্রতিটি ধাপে আপনাকে গাইড করার জন্য আমরা কোডল্যাবগুলির একটি সিরিজ তৈরি করেছি।