ভূমিকা
নোটিফিকেশন এপিআই আপনাকে ব্যবহারকারীদের কাছে নির্দিষ্ট ইভেন্টের জন্য বিজ্ঞপ্তি প্রদর্শন করতে দেয়, নিষ্ক্রিয়ভাবে (নতুন ইমেল, টুইট বা ক্যালেন্ডার ইভেন্ট) এবং ব্যবহারকারীর ইন্টারঅ্যাকশনে, কোন ট্যাবে ফোকাস আছে তা নির্বিশেষে। ড্রাফ্ট স্পেক আছে কিন্তু এটি বর্তমানে কোনও স্ট্যান্ডার্ডে নেই।
মাত্র কয়েক মিনিটের মধ্যে বিজ্ঞপ্তি বাস্তবায়নের জন্য আপনি এই সহজ পদক্ষেপগুলি অনুসরণ করতে পারেন:
ধাপ ১: নোটিফিকেশন এপিআই সাপোর্টের জন্য চেক করুন
আমরা পরীক্ষা করি যে webkitNotifications সমর্থিত কিনা। মনে রাখবেন যে webkitNotifications এর নামকরণ করা হয়েছে কারণ এটি একটি খসড়া স্পেকের অংশ। চূড়ান্ত স্পেকের পরিবর্তে একটি notifications() ফাংশন থাকবে।
// check for notifications support
// you can omit the 'window' keyword
if (window.webkitNotifications) {
console.log("Notifications are supported!");
}
else {
console.log("Notifications are not supported for this Browser/OS version yet.");
}
ধাপ ২: ব্যবহারকারীকে একটি ওয়েবসাইটকে বিজ্ঞপ্তি দেখানোর অনুমতি দিতে দিন।
আমরা উল্লেখিত যেকোনো কনস্ট্রাক্টর যদি ওয়েবসাইটটিকে নোটিফিকেশন দেখানোর জন্য ম্যানুয়ালি অনুমতি না দেয়, তাহলে একটি নিরাপত্তা ত্রুটি দেখাবে। ব্যতিক্রমটি পরিচালনা করার জন্য আপনি একটি try-catch স্টেটমেন্ট ব্যবহার করতে পারেন তবে একই উদ্দেশ্যে আপনি checkPermission পদ্ধতিও ব্যবহার করতে পারেন।
document.querySelector('#show_button').addEventListener('click', function() {
if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
// function defined in step 2
window.webkitNotifications.createNotification(
'icon.png', 'Notification Title', 'Notification content...');
} else {
window.webkitNotifications.requestPermission();
}
}, false);
যদি ওয়েব অ্যাপ্লিকেশনটিতে বিজ্ঞপ্তি দেখানোর অনুমতি না থাকে, তাহলে requestPermission পদ্ধতিটি একটি তথ্যবার দেখাবে:
তবে, এটা মনে রাখা খুবই গুরুত্বপূর্ণ যে requestPermission পদ্ধতিটি শুধুমাত্র ব্যবহারকারীর অ্যাকশন দ্বারা ট্রিগার করা ইভেন্ট হ্যান্ডলারগুলিতে কাজ করে, যেমন মাউস বা কীবোর্ড ইভেন্ট, যাতে অযাচিত ইনফোবারগুলি এড়ানো যায়। এই ক্ষেত্রে, ব্যবহারকারীর অ্যাকশন হল "show_button" আইডি সহ বোতামে ক্লিক করা। উপরের স্নিপেটটি কখনই কাজ করবে না যদি ব্যবহারকারী কোনও সময়ে requestPermission ট্রিগার করে এমন কোনও বোতাম বা লিঙ্কে স্পষ্টভাবে ক্লিক না করে থাকেন।
ধাপ ৩: শ্রোতা এবং অন্যান্য ক্রিয়া সংযুক্ত করুন
document.querySelector('#show_button').addEventListener('click', function() {
if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
// function defined in step 2
notification_test = window.webkitNotifications.createNotification(
'icon.png', 'Notification Title', 'Notification content...');
notification_test.ondisplay = function() { ... do something ... };
notification_test.onclose = function() { ... do something else ... };
notification_test.show();
} else {
window.webkitNotifications.requestPermission();
}
}, false);
এই মুহুর্তে, আপনি কোডটি আরও পরিষ্কার রাখার জন্য আপনার নিজস্ব নোটিফিকেশন ক্লাস তৈরি করে এই সমস্ত ইভেন্ট এবং ক্রিয়াগুলিকে অন্তর্ভুক্ত করতে চাইতে পারেন, যদিও এটি এই টিউটোরিয়ালের আওতার বাইরে।