পুশ নোটিফিকেশন কেন ব্যবহার করবেন?
বিজ্ঞপ্তিগুলি ব্যবহারকারীর কাছে ছোট ছোট তথ্য উপস্থাপন করে। ওয়েব অ্যাপগুলি গুরুত্বপূর্ণ, সময়-সংবেদনশীল ঘটনা বা ব্যবহারকারীর প্রয়োজনীয় পদক্ষেপ সম্পর্কে ব্যবহারকারীদের জানাতে বিজ্ঞপ্তি ব্যবহার করতে পারে।
বিভিন্ন প্ল্যাটফর্মে বিজ্ঞপ্তির চেহারা এবং অনুভূতি ভিন্ন হয়। উদাহরণস্বরূপ:
ঐতিহ্যগতভাবে, ওয়েব ব্রাউজারগুলিকে একটি অনুরোধ করে সার্ভার এবং ক্লায়েন্টের মধ্যে তথ্য বিনিময় শুরু করতে হত। অন্যদিকে, ওয়েব পুশ প্রযুক্তি আপনাকে আপনার সার্ভারকে কনফিগার করতে দেয় যাতে আপনার অ্যাপের জন্য যখনই এটি বোধগম্য হয় তখন বিজ্ঞপ্তি পাঠানো যায়। একটি পুশ পরিষেবা প্রতিটি সাবস্ক্রাইব করা পরিষেবা কর্মীর জন্য অনন্য URL তৈরি করে। কোনও পরিষেবা কর্মীর URL-এ বার্তা পাঠানো সেই পরিষেবা কর্মীর উপর ঘটনা উত্থাপন করে, যা এটিকে একটি বিজ্ঞপ্তি প্রদর্শন করতে প্ররোচিত করে।
পুশ নোটিফিকেশন ব্যবহারকারীদের আপনার অ্যাপটি পুনরায় খুলতে এবং সর্বশেষ তথ্যের ভিত্তিতে এটি ব্যবহার করতে অনুরোধ করে তাদের থেকে সর্বাধিক সুবিধা পেতে সাহায্য করতে পারে।
বিজ্ঞপ্তি তৈরি এবং পাঠানো
Notifications API ব্যবহার করে বিজ্ঞপ্তি তৈরি করুন। একটি Notification অবজেক্টের একটি title string এবং একটি 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-এ কল করে।
পর্ব ১: একজন পরিষেবা কর্মী নিবন্ধন করুন এবং পুশ-এ সাবস্ক্রাইব করুন
একটি ক্লায়েন্ট অ্যাপ
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 তৈরি করে। 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 });
পার্ট ২: একটি বিজ্ঞপ্তি পাঠান
ওয়েব সার্ভার সাবস্ক্রিপশন এন্ডপয়েন্টে একটি বিজ্ঞপ্তি পাঠায়।
সার্ভার কোড:
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); })ব্যবহারকারী বিজ্ঞপ্তিটির সাথে ইন্টারঅ্যাক্ট করে, যদি ওয়েব অ্যাপটি ইতিমধ্যে সক্রিয় না থাকে তবে এটি সক্রিয় করে তোলে।
পরবর্তী পদক্ষেপ
পরবর্তী পদক্ষেপ হিসেবে, পুশ নোটিফিকেশন বাস্তবায়ন করুন!
প্রক্রিয়াটির প্রতিটি ধাপে আপনাকে গাইড করার জন্য আমরা কোডল্যাবের একটি সিরিজ তৈরি করেছি।