ধাপ 3: অ্যালার্ম এবং বিজ্ঞপ্তি যোগ করুন

এই ধাপে, আপনি শিখবেন:

• ব্যাকগ্রাউন্ডের কাজগুলি চালানোর জন্য নির্দিষ্ট ব্যবধানে কীভাবে আপনার অ্যাপটিকে জাগিয়ে তুলবেন।
• গুরুত্বপূর্ণ কিছুর প্রতি দৃষ্টি আকর্ষণ করতে অন-স্ক্রীন বিজ্ঞপ্তিগুলি কীভাবে ব্যবহার করবেন।

এই ধাপটি সম্পূর্ণ করার আনুমানিক সময়: 20 মিনিট। এই ধাপে আপনি যা সম্পূর্ণ করবেন তার পূর্বরূপ দেখতে, এই পৃষ্ঠার নীচে ঝাঁপ দাও ↓ ।

অনুস্মারক দিয়ে আপনার Todo অ্যাপ উন্নত করুন

ব্যবহারকারীর কাছে খোলা টোডো আছে কিনা তা মনে করিয়ে দেওয়ার জন্য কার্যকারিতা যোগ করে টোডো অ্যাপটিকে উন্নত করুন—এমনকি অ্যাপটি বন্ধ থাকলেও।

প্রথমত, আপনাকে অ্যাপটির জন্য একটি উপায় যোগ করতে হবে যাতে নিয়মিতভাবে অসম্পূর্ণ কাজগুলি পরীক্ষা করা যায়। এরপরে, টোডো অ্যাপ উইন্ডো বন্ধ থাকলেও অ্যাপটিকে ব্যবহারকারীর কাছে একটি বার্তা প্রদর্শন করতে হবে। এটি সম্পন্ন করার জন্য, আপনাকে বুঝতে হবে কিভাবে অ্যালার্ম এবং বিজ্ঞপ্তিগুলি Chrome Apps-এ কাজ করে৷

অ্যালার্ম যোগ করুন

ঘুম থেকে ওঠার ব্যবধান সেট করতে chrome.alarms ব্যবহার করুন। যতক্ষণ ক্রোম চলছে ততক্ষণ, অ্যালার্ম শ্রোতাকে আনুমানিক ব্যবধান সেটে ডাকা হয়।

অ্যাপের অনুমতি আপডেট করুন

manifest.json- এ, "alarms" অনুমতির অনুরোধ করুন:

"permissions": ["storage", "alarms"],

পটভূমি স্ক্রিপ্ট আপডেট

background.js- এ, একটি onAlarm শ্রোতা যোগ করুন। আপাতত, কলব্যাক ফাংশনটি কনসোলে একটি বার্তা লগ করবে যখনই একটি করণীয় আইটেম থাকবে:

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('index.html', {
    id: 'main',
    bounds: { width: 620, height: 500 }
  });
});
chrome.alarms.onAlarm.addListener(function( alarm ) {
  console.log("Got an alarm!", alarm);
});

HTML ভিউ আপডেট করুন

index.html এ, একটি অ্যাক্টিভেট অ্যালার্ম বোতাম যোগ করুন:

<footer id="info">
  <button id="toggleAlarm">Activate alarm</button>
  ...
</footer>

এই নতুন বোতামের জন্য আপনাকে এখন জাভাস্ক্রিপ্ট ইভেন্ট হ্যান্ডলার লিখতে হবে। ধাপ 2 থেকে স্মরণ করুন যে সবচেয়ে সাধারণ CSP অ-সম্মতিগুলির মধ্যে একটি ইনলাইন জাভাস্ক্রিপ্ট দ্বারা সৃষ্ট। index.html এ, একটি নতুন alarms.js ফাইল আমদানি করতে এই লাইনটি যোগ করুন যা আপনি নিম্নলিখিত ধাপে তৈরি করবেন:

  </footer>
  ...
  <script src="js/app.js"></script>
  <script src="js/alarms.js"></script>
</body>

অ্যালার্ম স্ক্রিপ্ট তৈরি করুন

আপনার js ফোল্ডারে alarms.js নামে একটি নতুন ফাইল তৈরি করুন।

সক্রিয় অ্যালার্ম বোতামটি ক্লিক করার সময় অ্যালার্ম টগল করার জন্য একটি ক্লিক ইভেন্ট হ্যান্ডলার সহ checkAlarm() , createAlarm() , cancelAlarm() এবং toggleAlarm() পদ্ধতি যোগ করতে নীচের কোডটি ব্যবহার করুন৷

(function () {
  'use strict';
   var alarmName = 'remindme';
   function checkAlarm(callback) {
     chrome.alarms.getAll(function(alarms) {
       var hasAlarm = alarms.some(function(a) {
         return a.name == alarmName;
       });
       var newLabel;
       if (hasAlarm) {
         newLabel = 'Cancel alarm';
       } else {
         newLabel = 'Activate alarm';
       }
       document.getElementById('toggleAlarm').innerText = newLabel;
       if (callback) callback(hasAlarm);
     })
   }
   function createAlarm() {
     chrome.alarms.create(alarmName, {
       delayInMinutes: 0.1, periodInMinutes: 0.1});
   }
   function cancelAlarm() {
     chrome.alarms.clear(alarmName);
   }
   function doToggleAlarm() {
     checkAlarm( function(hasAlarm) {
       if (hasAlarm) {
         cancelAlarm();
       } else {
         createAlarm();
       }
       checkAlarm();
     });
   }
  $$('#toggleAlarm').addEventListener('click', doToggleAlarm);
  checkAlarm();
})();

আপনার অ্যাপ পুনরায় লোড করুন এবং অ্যালার্ম সক্রিয় (এবং নিষ্ক্রিয়) করতে কয়েক মুহূর্ত ব্যয় করুন।

যখনই আপনার অ্যালার্ম সক্রিয় করা হয়, আপনি প্রতিবার অ্যালার্ম "রিং" করার সময় কনসোলে লগ বার্তাগুলি প্রিন্ট করা দেখতে পাবেন:

আপনার লক্ষ্য করা উচিত যে:

• এমনকি আপনি যখন টোডো অ্যাপ উইন্ডো বন্ধ করবেন, তখনও অ্যালার্ম আসতে থাকবে।
• ChromeOS ছাড়া অন্য প্ল্যাটফর্মে, আপনি যদি সমস্ত Chrome ব্রাউজার দৃষ্টান্ত সম্পূর্ণরূপে বন্ধ করে দেন, তাহলে অ্যালার্ম ট্রিগার হবে না।

আসুন alarms.js- এর কিছু অংশের উপর যাই যা এক এক করে chrome.alarms পদ্ধতি ব্যবহার করে।

অ্যালার্ম তৈরি করুন

createAlarm() এ, অ্যালার্ম সক্রিয় করার সময় একটি অ্যালার্ম তৈরি করতে chrome.alarms.create() API ব্যবহার করুন।

chrome.alarms.create(alarmName, {delayInMinutes: 0.1, periodInMinutes: 0.1});

প্রথম প্যারামিটারটি একটি ঐচ্ছিক স্ট্রিং যা আপনার অ্যালার্মের জন্য একটি অনন্য নাম সনাক্ত করে, উদাহরণস্বরূপ, remindme . (দ্রষ্টব্য: নাম অনুসারে এটি বাতিল করার জন্য আপনাকে একটি অ্যালার্ম নাম সেট করতে হবে।)

দ্বিতীয় প্যারামিটারটি একটি alarmInfo অবজেক্ট। alarmInfo এর বৈধ বৈশিষ্ট্যগুলির মধ্যে when বা delayInMinutes এবং periodInMinutes অন্তর্ভুক্ত রয়েছে। ব্যবহারকারীর মেশিনে লোড কমানোর জন্য, Chrome প্রতি মিনিটে একবার অ্যালার্ম সীমিত করে। আমরা এখানে শুধুমাত্র ডেমোর উদ্দেশ্যে ছোট মান (এক মিনিটের 0.1) ব্যবহার করছি।

অ্যালার্ম পরিষ্কার করুন

cancelAlarm() এ, অ্যালার্ম বাতিল করার সময় একটি অ্যালার্ম বাতিল করতে chrome.alarms.clear() API ব্যবহার করুন।

chrome.alarms.clear(alarmName);

প্রথম প্যারামিটারটি সনাক্তকারী স্ট্রিং হওয়া উচিত যা আপনি chrome.alarms.create() এ অ্যালার্ম নাম হিসাবে ব্যবহার করেছেন।

দ্বিতীয় (ঐচ্ছিক) পরামিতি হল একটি কলব্যাক ফাংশন যা ফর্ম্যাটে নেওয়া উচিত:

function(boolean wasCleared) {...};

অ্যালার্ম পান

checkAlarm() এ, টগল বোতামের UI অবস্থা আপডেট করার জন্য সমস্ত তৈরি করা অ্যালার্মের একটি অ্যারে পেতে chrome.alarms.getAll() API ব্যবহার করুন৷

getAll() একটি কলব্যাক ফাংশন গ্রহণ করে যা Alarm অবজেক্টের একটি অ্যারেতে পাস করে। Alarm কী আছে তা দেখতে, আপনি DevTools কনসোলে চলমান অ্যালার্মগুলি পরিদর্শন করতে পারেন:

chrome.alarms.getAll(function(alarms) {
  console.log(alarms);
  console.log(alarms[0]);
});

এটি একটি বস্তুকে আউটপুট করবে যেমন {name: "remindme", periodInMinutes: 0.1, scheduledTime: 1397587981166.858} নীচে দেখানো হয়েছে:

পরবর্তী বিভাগের জন্য প্রস্তুত হন

এখন যেহেতু নিয়মিত বিরতিতে অ্যাপটি পোল করার জন্য অ্যালার্মগুলি রয়েছে, ভিজ্যুয়াল বিজ্ঞপ্তিগুলি যোগ করার জন্য এটিকে একটি ভিত্তি হিসাবে ব্যবহার করুন৷

বিজ্ঞপ্তি যোগ করুন

আসুন অ্যালার্ম বিজ্ঞপ্তিটিকে এমন কিছুতে পরিবর্তন করি যা ব্যবহারকারী সহজেই লক্ষ্য করতে পারে। নিচের মত একটি ডেস্কটপ বিজ্ঞপ্তি দেখানোর জন্য chrome.notifications ব্যবহার করুন:

ব্যবহারকারী যখন বিজ্ঞপ্তিতে ক্লিক করেন, তখন টোডো অ্যাপ উইন্ডোটি দেখতে পাওয়া উচিত।

অ্যাপের অনুমতি আপডেট করুন

manifest.json- এ, "notifications" অনুমতির অনুরোধ করুন:

"permissions": ["storage", "alarms", "notifications"],

পটভূমি স্ক্রিপ্ট আপডেট

background.js- এ, chrome.app.window.create() কলব্যাকটিকে একটি স্বতন্ত্র পদ্ধতিতে রিফ্যাক্টর করুন যাতে আপনি এটি পুনরায় ব্যবহার করতে পারেন:

chrome.app.runtime.onLaunched.addListener(function() {
function launch() {
  chrome.app.window.create('index.html', {
    id: 'main',
    bounds: { width: 620, height: 500 }
  });
}
});
chrome.app.runtime.onLaunched.addListener(launch);
...

অ্যালার্ম শ্রোতা আপডেট করুন

background.js- এর উপরে, একটি ডাটাবেস নামের জন্য একটি ভেরিয়েবল যোগ করুন যা অ্যালার্ম লিসেনারে ব্যবহৃত হয়:

var dbName = 'todos-vanillajs';

dbName এর মান হল একই ডাটাবেসের নাম যা js/app.js- এর 17 লাইনে সেট করা আছে:

var todo = new Todo('todos-vanillajs');

একটি বিজ্ঞপ্তি তৈরি করুন

কনসোলে একটি নতুন অ্যালার্ম লগ করার পরিবর্তে, chrome.storage.local.get() এর মাধ্যমে সংরক্ষিত ডেটা পেতে onAlarm লিসেনার আপডেট করুন এবং একটি showNotification() পদ্ধতিতে কল করুন:

chrome.alarms.onAlarm.addListener(function( alarm ) {
  console.log("Got an alarm!", alarm);
  chrome.storage.local.get(dbName, showNotification);
});

background.js- এ এই showNotification() পদ্ধতি যোগ করুন:

function launch(){
  ...
}

function showNotification(storedData) {
  var openTodos = 0;
  if ( storedData[dbName].todos ) {
    storedData[dbName].todos.forEach(function(todo) {
      if ( !todo.completed ) {
        openTodos++;
      }
    });
  }
  if (openTodos>0) {
    // Now create the notification
    chrome.notifications.create('reminder', {
        type: 'basic',
        iconUrl: 'icon_128.png',
        title: 'Don\'t forget!',
        message: 'You have '+openTodos+' things to do. Wake up, dude!'
     }, function(notificationId) {});
  }
}

chrome.app.runtime.onLaunched.addListener(launch);
...

showNotification() খোলা (অসম্পূর্ণ) করণীয় আইটেমগুলি পরীক্ষা করবে। যদি অন্তত একটি খোলা করণীয় আইটেম থাকে, chrome.notifications.create() এর মাধ্যমে একটি বিজ্ঞপ্তি পপআপ তৈরি করুন৷

প্রথম প্যারামিটারটি একটি স্বতন্ত্রভাবে সনাক্তকারী বিজ্ঞপ্তির নাম। সেই নির্দিষ্ট বিজ্ঞপ্তির সাথে মিথস্ক্রিয়া সাফ বা পরিচালনা করার জন্য আপনার অবশ্যই একটি আইডি সেট থাকতে হবে। যদি আইডি একটি বিদ্যমান বিজ্ঞপ্তির সাথে মেলে, তাহলে নতুন বিজ্ঞপ্তি দেওয়ার আগে create() প্রথমে সেই বিজ্ঞপ্তিটি সাফ করে।

দ্বিতীয় প্যারামিটারটি একটি NotificationOptions অবজেক্ট। বিজ্ঞপ্তি পপআপ রেন্ডার করার জন্য অনেক বিকল্প আছে। এখানে আমরা একটি আইকন, শিরোনাম এবং বার্তা সহ একটি "মৌলিক" বিজ্ঞপ্তি ব্যবহার করছি। অন্যান্য বিজ্ঞপ্তি প্রকারের মধ্যে রয়েছে ছবি, তালিকা এবং অগ্রগতি সূচক। আপনার ধাপ 3 শেষ হয়ে গেলে নির্দ্বিধায় এই বিভাগে ফিরে যান এবং অন্যান্য বিজ্ঞপ্তি বৈশিষ্ট্যগুলির সাথে পরীক্ষা করুন৷

তৃতীয় (ঐচ্ছিক) পরামিতি হল একটি কলব্যাক পদ্ধতি যা ফর্ম্যাটে নেওয়া উচিত:

function(string notificationId) {...};

বিজ্ঞপ্তি মিথস্ক্রিয়া পরিচালনা করুন

ব্যবহারকারী বিজ্ঞপ্তিতে ক্লিক করলে Todo অ্যাপটি খুলুন। background.js এর শেষে, একটি chrome.notifications.onClicked ইভেন্ট হ্যান্ডলার তৈরি করুন:

chrome.notifications.onClicked.addListener(function() {
  launch();
});

ইভেন্ট হ্যান্ডলার কলব্যাক কেবল launch() পদ্ধতিকে কল করে। chrome.app.window.create() হয় একটি নতুন ক্রোম অ্যাপ উইন্ডো তৈরি করে যদি একটি ইতিমধ্যেই বিদ্যমান না থাকে, অথবা বর্তমানে খোলা উইন্ডোটিকে ফোকাসে আনে যেখানে main উইন্ডো আইডি রয়েছে।

আপনার সমাপ্ত টোডো অ্যাপ চালু করুন

আপনি ধাপ 3 সম্পন্ন! রিমাইন্ডার সহ এখনই আপনার টোডো অ্যাপ রিলোড করুন।

এই আচরণগুলি প্রত্যাশিত হিসাবে কাজ করে দেখুন:

• আপনার যদি কোনো অসম্পূর্ণ করণীয় আইটেম না থাকে, তাহলে কোনো পপআপ বিজ্ঞপ্তি নেই।
• আপনার অ্যাপ বন্ধ হয়ে গেলে আপনি বিজ্ঞপ্তিতে ক্লিক করলে, টোডো অ্যাপ খুলবে বা ফোকাসে চলে আসবে।

সমস্যা সমাধান

আপনার চূড়ান্ত background.js ফাইলটি দেখতে এইরকম হওয়া উচিত। বিজ্ঞপ্তিগুলি না দেখালে, নিশ্চিত করুন যে আপনার Chrome সংস্করণ 28 বা উচ্চতর। বিজ্ঞপ্তিগুলি এখনও না দেখালে, প্রধান উইন্ডো ( ডান ক্লিক > উপাদান পরিদর্শন করুন ) এবং পটভূমি পৃষ্ঠা ( রাইট ক্লিক > পটভূমি পৃষ্ঠা পরিদর্শন করুন ) উভয়েই DevTools কনসোলে ত্রুটি বার্তাগুলি পরীক্ষা করুন৷

আরো তথ্যের জন্য

এই ধাপে প্রবর্তিত কিছু API সম্পর্কে আরও বিস্তারিত তথ্যের জন্য, পড়ুন:

• অনুমতি ঘোষণা করুন ↑
• chrome.alarms ↑
• chrome.alarms.onAlarm ↑
• chrome.alarms.create() ↑
• chrome.alarms.clear() ↑
• chrome.alarms.getAll() ↑
• chrome.notifications ↑
• chrome.notifications.create() ↑
• বিজ্ঞপ্তি বিকল্প ↑
• chrome.notifications.onClicked ↑

পরবর্তী ধাপে চালিয়ে যেতে প্রস্তুত? ধাপ 4 এ যান - একটি ওয়েবভিউ দিয়ে বাহ্যিক লিঙ্ক খুলুন »