এখনও পর্যন্ত, আমরা এমন বিকল্পগুলি দেখেছি যা বিজ্ঞপ্তির ভিজ্যুয়াল চেহারা পরিবর্তন করে। এছাড়াও, বিজ্ঞপ্তির আচরণ পরিবর্তন করার বিকল্প আছে।
ডিফল্ট হিসেবে, শুধু ভিজ্যুয়াল বিকল্পের মাধ্যমে showNotification()-এ কল করলে নিম্নলিখিত
আচরণ দেখা যাবে:
- বিজ্ঞপ্তিতে ক্লিক করলে কিছুই হয় না।
- প্রতিটি নতুন বিজ্ঞপ্তি একটির পর একটি দেখানো হয়। ব্রাউজার কোনওভাবেই বিজ্ঞপ্তি আড়াল করবে না।
- প্ল্যাটফর্মটি কোনও সাউন্ড চালাতে পারে বা ব্যবহারকারীর ডিভাইস ভাইব্রেট করতে পারে (প্ল্যাটফর্মের উপর নির্ভর করে)।
- কিছু প্ল্যাটফর্মে, বিজ্ঞপ্তিটি অল্প সময়ের পরে অদৃশ্য হয়ে যাবে এবং অন্যান্য প্ল্যাটফর্মে ব্যবহারকারী ইন্টার্যাক্ট না করা পর্যন্ত বিজ্ঞপ্তিটি দেখানো হবে। (যেমন, Android ও ডেস্কটপে আপনার বিজ্ঞপ্তি তুলনা করুন।)
এই বিভাগে, আমরা দেখব যে কীভাবে আমরা শুধুমাত্র বিকল্প ব্যবহার করে এই ডিফল্ট অ্যাকশন পরিবর্তন করতে পারি। এগুলি প্রয়োগ করা এবং এর সুবিধা নেওয়া তুলনামূলকভাবে সহজ।
বিজ্ঞপ্তি ক্লিক ইভেন্ট
ব্যবহারকারী কোনও বিজ্ঞপ্তিতে ক্লিক করলে, ডিফল্ট অ্যাকশন হিসেবে কিছু হয় না। এমনকি এটি বিজ্ঞপ্তি বন্ধ করে বা সরিয়ে দেয় না।
বিজ্ঞপ্তিতে ক্লিক করার সাধারণ পদ্ধতি হল এটি বন্ধ করা এবং অন্য কোনও লজিক পারফর্ম করা (যেমন, কোনও উইন্ডো খোলা বা অ্যাপ্লিকেশনে কোনও API কল করা)।
এটি করতে, আপনাকে আমাদের সার্ভিস ওয়ার্কারে একটি 'notificationclick' ইভেন্ট লিসেনার যোগ করতে হবে। কোনও বিজ্ঞপ্তিতে ক্লিক করা হলে, এই
কল করা হবে।
self.addEventListener('notificationclick', (event) => {
const clickedNotification = event.notification;
clickedNotification.close();
// Do something as the result of the notification click
const promiseChain = doSomething();
event.waitUntil(promiseChain);
});
এই উদাহরণে আপনি দেখতে পাচ্ছেন যে, ক্লিক করা বিজ্ঞপ্তিটি
event.notification হিসেবে অ্যাক্সেস করা যেতে পারে। এখান থেকে আপনি বিজ্ঞপ্তির প্রপার্টি ও পদ্ধতি অ্যাক্সেস করতে পারবেন। এই
ক্ষেত্রে, আপনি এর close() মেথড কল করেন এবং অতিরিক্ত কাজ করেন।
ক্রিয়াসমূহ
অ্যাকশন আপনাকে বিজ্ঞপ্তিতে ক্লিক করার চেয়ে আপনার ব্যবহারকারীদের সাথে আরও এক লেভেলের ইন্টার্যাকশন তৈরি করতে দেয়।
বোতাম
আগের বিভাগে, আপনি দেখেছেন যে showNotification() কল করার সময় কীভাবে অ্যাকশন বোতাম নির্ধারণ করতে হয়:
const title = 'Actions Notification';
const options = {
actions: [
{
action: 'coffee-action',
title: 'Coffee',
type: 'button',
icon: '/images/demos/action-1-128x128.png',
},
{
action: 'doughnut-action',
type: 'button',
title: 'Doughnut',
icon: '/images/demos/action-2-128x128.png',
},
{
action: 'gramophone-action',
type: 'button',
title: 'Gramophone',
icon: '/images/demos/action-3-128x128.png',
},
{
action: 'atom-action',
type: 'button',
title: 'Atom',
icon: '/images/demos/action-4-128x128.png',
},
],
};
registration.showNotification(title, options);
ব্যবহারকারী কোনও অ্যাকশন বোতামে ক্লিক করলে, কোন অ্যাকশন বোতামে ক্লিক করা হয়েছে তা জানতে noticationclick
ইভেন্টে event.action ভ্যালু চেক করুন।
event.action-এ বিকল্পে সেট করা action ভ্যালু থাকবে। উপরের উদাহরণে
event.action-এর ভ্যালু নিম্নলিখিতগুলির মধ্যে একটি হবে: 'coffee-action', 'doughnut-action',
'gramophone-action' বা 'atom-action'।
এর মাধ্যমে আমরা বিজ্ঞপ্তিতে ক্লিক বা অ্যাকশন ক্লিক শনাক্ত করতে পারব, যেমন:
self.addEventListener('notificationclick', (event) => {
if (!event.action) {
// Was a normal notification click
console.log('Notification Click.');
return;
}
switch (event.action) {
case 'coffee-action':
console.log("User ❤️️'s coffee.");
break;
case 'doughnut-action':
console.log("User ❤️️'s doughnuts.");
break;
case 'gramophone-action':
console.log("User ❤️️'s music.");
break;
case 'atom-action':
console.log("User ❤️️'s science.");
break;
default:
console.log(`Unknown action clicked: '${event.action}'`);
break;
}
});
ইনলাইন উত্তর
এছাড়াও, আগের বিভাগে আপনি দেখেছেন যে কীভাবে বিজ্ঞপ্তিতে ইনলাইন উত্তর যোগ করতে হয়:
const title = 'Poll';
const options = {
body: 'Do you like this photo?',
image: '/images/demos/cat-image.jpg',
icon: '/images/demos/icon-512x512.png',
badge: '/images/demos/badge-128x128.png',
actions: [
{
action: 'yes',
type: 'button',
title: '👍 Yes',
},
{
action: 'no',
type: 'text',
title: '👎 No (explain why)',
placeholder: 'Type your explanation here',
},
],
};
registration.showNotification(title, options);
ইনপুট ফিল্ডে ব্যবহারকারীর টাইপ করা ভ্যালু event.reply-এ থাকবে:
self.addEventListener('notificationclick', (event) => {
const reply = event.reply;
// Do something with the user's reply
const promiseChain = doSomething(reply);
event.waitUntil(promiseChain);
});
ট্যাগ করুন
tag বিকল্পটি মূলত একটি স্ট্রিং আইডি যা বিজ্ঞপ্তিগুলিকে একসাথে "গ্রুপ" করে, একাধিক বিজ্ঞপ্তি কীভাবে ব্যবহারকারীকে দেখানো হয় তা নির্ধারণ করার একটি সহজ উপায় প্রদান করে। এটি উদাহরণের সাহায্যে
সবচেয়ে সহজে ব্যাখ্যা করা যায়।
আসুন, একটি বিজ্ঞপ্তি দেখাই এবং এটিকে 'message-group-1'-এর ট্যাগ দিই। আমরা এই কোড সহ
বিজ্ঞপ্তি দেখাব:
const title = 'Notification 1 of 3';
const options = {
body: "With 'tag' of 'message-group-1'",
tag: 'message-group-1',
};
registration.showNotification(title, options);
যা আমাদের প্রথম বিজ্ঞপ্তি দেখাবে।
আসুন, 'message-group-2'-এর নতুন ট্যাগ সহ দ্বিতীয় বিজ্ঞপ্তি দেখাই, যেমন:
const title = 'Notification 2 of 3';
const options = {
body: "With 'tag' of 'message-group-2'",
tag: 'message-group-2',
};
registration.showNotification(title, options);
এটি ব্যবহারকারীকে দ্বিতীয় বিজ্ঞপ্তি দেখাবে।
এখন তৃতীয় বিজ্ঞপ্তি দেখানো যাক, তবে 'message-group-1'-এর প্রথম ট্যাগটি আবার ব্যবহার করা যাক। এটি করলে
প্রথম বিজ্ঞপ্তিটি বন্ধ হয়ে যাবে এবং তার জায়গায় আমাদের নতুন বিজ্ঞপ্তিটি দেখানো হবে।
const title = 'Notification 3 of 3';
const options = {
body: "With 'tag' of 'message-group-1'",
tag: 'message-group-1',
};
registration.showNotification(title, options);
এখন আমাদের কাছে দুটি বিজ্ঞপ্তি আছে, যদিও showNotification() তিনবার কল করা হয়েছে।
tag বিকল্পটি হল মেসেজ গ্রুপ করার একটি সহজ উপায় যাতে বর্তমানে দেখানো হচ্ছে এমন কোনও পুরনো বিজ্ঞপ্তি
বন্ধ হয়ে যাবে যদি সেগুলির ট্যাগ নতুন বিজ্ঞপ্তির মতো একই হয়।
tag ব্যবহার করার একটি সূক্ষ্মতা হল যে এটি যখন কোনও বিজ্ঞপ্তি প্রতিস্থাপন করে, তখন এটি কোনও শব্দ বা কম্পন ছাড়াই তা করবে।
এখানেই renotify বিকল্পটি কাজে লাগে।
আবার বিজ্ঞপ্তি পাঠান
এটি লেখার সময় মূলত মোবাইল ডিভাইসের ক্ষেত্রে প্রযোজ্য। এই বিকল্প সেট করলে নতুন বিজ্ঞপ্তি এলে ভাইব্রেট করবে এবং সিস্টেম সাউন্ড বাজবে।
এমন কিছু পরিস্থিতি হতে পারে যেখানে আপনি হয়ত সাইলেন্ট আপডেটের পরিবর্তে ব্যবহারকারীকে বিজ্ঞপ্তি দিয়ে
জানাতে চাইবেন। চ্যাট অ্যাপ্লিকেশন হল একটি ভালো উদাহরণ। এই ক্ষেত্রে, আপনাকে tag এবং
renotify-কে true হিসেবে সেট করতে হবে।
const title = 'Notification 2 of 2';
const options = {
tag: 'renotify',
renotify: true,
};
registration.showNotification(title, options);
সাইলেন্ট
এই বিকল্প আপনাকে নতুন বিজ্ঞপ্তি দেখানোর অনুমতি দেয়, তবে ডিফল্ট অ্যাকশন হিসেবে ভাইব্রেশন, সাউন্ড এবং ডিভাইসের ডিসপ্লে চালু হওয়া বন্ধ করে দেয়।
আপনার বিজ্ঞপ্তিতে ব্যবহারকারীর অবিলম্বে মনোযোগ দেওয়ার প্রয়োজন না থাকলে এটি আদর্শ।
const title = 'Silent Notification';
const options = {
silent: true,
};
registration.showNotification(title, options);
ইন্টার্যাকশন প্রয়োজন
ডেস্কটপে Chrome, বিজ্ঞপ্তিগুলি লুকানোর আগে একটি নির্দিষ্ট সময়ের জন্য দেখাবে। Android-এ Chrome-এর এই আচরণ নেই। ব্যবহারকারী ইন্টার্যাক্ট না করা পর্যন্ত বিজ্ঞপ্তি দেখানো হয়।
ব্যবহারকারী ইন্টার্যাক্ট না করা পর্যন্ত বিজ্ঞপ্তি যাতে দেখা যায়, তার জন্য requireInteraction
বিকল্প যোগ করুন। ব্যবহারকারী আপনার বিজ্ঞপ্তি বাতিল বা ক্লিক না করা পর্যন্ত এটি বিজ্ঞপ্তি দেখাবে।
const title = 'Require Interaction Notification';
const options = {
requireInteraction: true,
};
registration.showNotification(title, options);
এই বিকল্পটি ভেবেচিন্তে ব্যবহার করুন। বিজ্ঞপ্তি দেখানো এবং ব্যবহারকারীকে তার কাজ বন্ধ করে আপনার বিজ্ঞপ্তি বাতিল করতে বাধ্য করা হতাশাজনক হতে পারে।
পরবর্তী বিভাগে, আমরা বিজ্ঞপ্তি ম্যানেজ করা এবং বিজ্ঞপ্তিতে ক্লিক করা হলে পৃষ্ঠা খোলার মতো অ্যাকশন পারফর্ম করার জন্য ওয়েবে ব্যবহৃত কিছু সাধারণ প্যাটার্ন দেখতে যাচ্ছি।
এরপর কোথায় যেতে হবে
- ওয়েব থেকে পাঠানো পুশ বিজ্ঞপ্তি এক নজরে
- পুশ কীভাবে কাজ করে
- ব্যবহারকারীকে সাবস্ক্রাইব করা
- অনুমতি UX
- ওয়েব পুশ লাইব্রেরির মাধ্যমে মেসেজ পাঠানো
- ওয়েব পুশ প্রোটোকল
- পুশ ইভেন্ট ম্যানেজ করা
- বিজ্ঞপ্তি দেখানো
- বিজ্ঞপ্তি সংক্রান্ত আচরণ
- সাধারণ বিজ্ঞপ্তির প্যাটার্ন
- পুশ বিজ্ঞপ্তি সংক্রান্ত প্রায়শই জিজ্ঞাসিত প্রশ্ন
- সাধারণ সমস্যা এবং বাগ সম্পর্কে অভিযোগ জানানো