বিজ্ঞপ্তি API ব্যবহার করে

আর্নেস্ট ডেলগাডো
আর্নেস্ট ডেলগাডো

ভূমিকা

নোটিফিকেশন এপিআই আপনাকে প্রদত্ত ইভেন্টগুলির জন্য ব্যবহারকারীর কাছে নোটিফিকেশন প্রদর্শন করতে দেয়, উভয়ই প্যাসিভভাবে (নতুন ইমেল, টুইট বা ক্যালেন্ডার ইভেন্ট) এবং ব্যবহারকারীর ইন্টারঅ্যাকশনে কোন ট্যাবে ফোকাস থাকুক না কেন। ড্রাফ্ট স্পেক আছে কিন্তু এটি বর্তমানে কোনো স্ট্যান্ডার্ডে নেই।

আপনি মাত্র কয়েক মিনিটের মধ্যে বিজ্ঞপ্তিগুলি বাস্তবায়ন করতে এই সহজ পদক্ষেপগুলি অনুসরণ করতে পারেন:

ধাপ 1: বিজ্ঞপ্তি API সমর্থনের জন্য চেক করুন

webkitNotifications সমর্থিত কিনা আমরা পরীক্ষা করি। মনে রাখবেন যে webkitNotifications এর নাম কারণ এটি একটি খসড়া বৈশিষ্ট্যের অংশ। চূড়ান্ত স্পেকের পরিবর্তে একটি নোটিফিকেশন() ফাংশন থাকবে।

// 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.");
}

ধাপ 2: ব্যবহারকারীকে বিজ্ঞপ্তি দেখানোর জন্য একটি ওয়েবসাইটকে অনুমতি দিতে দিন

ব্যবহারকারী যদি ম্যানুয়ালি বিজ্ঞপ্তিগুলি দেখানোর জন্য ওয়েবসাইটকে অনুমতি না দেয় তবে আমরা উল্লেখ করা কনস্ট্রাক্টরগুলির মধ্যে যেকোনও একটি নিরাপত্তা ত্রুটি নিক্ষেপ করবে৷ ব্যতিক্রমটি পরিচালনা করতে আপনি একটি চেষ্টা-ক্যাচ বিবৃতি ব্যবহার করতে পারেন তবে আপনি একই উদ্দেশ্যে 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 ট্রিগার করে।

ধাপ 3: শ্রোতা এবং অন্যান্য কাজ সংযুক্ত করুন

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

এই মুহুর্তে, আপনি কোডটি পরিষ্কার রাখতে আপনার নিজস্ব বিজ্ঞপ্তি ক্লাস তৈরি করে এই সমস্ত ইভেন্ট এবং ক্রিয়াগুলিকে এনক্যাপসুলেট করতে চাইতে পারেন, যদিও এটি এই টিউটোরিয়ালের সুযোগের বাইরে।