तीसरा चरण: अलार्म और सूचनाएं जोड़ना

इस चरण में आपको यह जानकारी मिलेगी:

  • बैकग्राउंड में टास्क करने के लिए, तय अंतराल पर ऐप्लिकेशन को चालू करने का तरीका.
  • किसी ज़रूरी चीज़ की ओर ध्यान खींचने के लिए, स्क्रीन पर दिखने वाली सूचनाओं का इस्तेमाल करने का तरीका.

इस चरण को पूरा करने में लगने वाला अनुमानित समय: 20 मिनट. इस चरण में पूरी की जाने वाली जानकारी की झलक देखने के लिए, इस पेज पर सबसे नीचे जाएं ↓.

रिमाइंडर की मदद से, Todo ऐप्लिकेशन को बेहतर बनाएं

अगर आपने उपयोगकर्ताओं को कोई काम की सूची पहले से सेट की हुई है, तो उन्हें याद दिलाने के लिए, किसी सुविधा को जोड़ें ऐप बंद है.

सबसे पहले, आपको कोई ऐसा तरीका जोड़ना होगा जिससे ऐप्लिकेशन, अधूरे कामों की समय-समय पर जांच कर सके. इसके बाद, ऐप्लिकेशन उपयोगकर्ता को एक मैसेज दिखाना ज़रूरी हो, भले ही 'काम की सूची' ऐप्लिकेशन विंडो बंद हो. ऐसा करने के लिए, आपको यह समझना होगा कि Chrome ऐप्स में अलार्म और नोटिफिकेशन कैसे काम करते हैं.

अलार्म जोड़ें

जागने का अंतराल सेट करने के लिए, chrome.alarms का इस्तेमाल करें. जब तक Chrome चल रहा है, तब तक अलार्म लिसनर को करीब-करीब इंटरवल सेट पर कॉल किया जाता है.

ऐप्लिकेशन अनुमतियां अपडेट करें

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

एचटीएमएल व्यू को अपडेट करें

index.html में, अलार्म चालू करें बटन जोड़ें:

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

अब आपको इस नए बटन के लिए JavaScript इवेंट हैंडलर लिखना होगा. चरण 2 से याद करें कि सीएसपी का पालन न करने के सबसे सामान्य तरीकों में से एक है, इनलाइन JavaScript की वजह से. 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();
})();

अपने ऐप्लिकेशन को फिर से लोड करें और कुछ समय के लिए, अलार्म को चालू (और बंद) करें.

बैकग्राउंड पेज के मैसेज की जांच करें

जब भी आप अलार्म को चालू करते हैं, तो आपको कंसोल में लॉग मैसेज प्रिंट होते हुए दिखेंगे जब भी अलार्म "घंटी" बजता है:

कंसोल में प्रिंट होने वाले अलार्म मैसेज

आपको ध्यान देना चाहिए कि:

  • Todo ऐप्लिकेशन विंडो बंद करने पर भी अलार्म आते रहेंगे.
  • ChromeOS के अलावा, दूसरे प्लैटफ़ॉर्म पर, अगर Chrome ब्राउज़र के सभी इंस्टेंस पूरी तरह से बंद कर दिए जाते हैं, तो अलार्म ट्रिगर नहीं होगा.

आइए, alarms.js के उन कुछ हिस्सों के बारे में जानें जो एक-एक करके chrome.alarms तरीकों का इस्तेमाल करते हैं.

अलार्म सेट करें

createAlarm() में, चालू करें' पर अलार्म बनाने के लिए, chrome.alarms.create() एपीआई का इस्तेमाल करें अलार्म टॉगल किया गया है.

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

पहला पैरामीटर एक वैकल्पिक स्ट्रिंग है, जो आपके अलार्म के एक खास नाम की पहचान करती है, उदाहरण के लिए, remindme. (ध्यान दें: अलार्म को नाम से रद्द करने के लिए आपको उसका नाम सेट करना होगा.)

दूसरा पैरामीटर, alarmInfo ऑब्जेक्ट है. alarmInfo की मान्य प्रॉपर्टी में when या delayInMinutes और periodInMinutes. उपयोगकर्ता की मशीन पर लोड कम करने के लिए, Chrome अलार्म को हर मिनट में एक बार के लिए सीमित करती है. हम यहां डेमो के लिए छोटी वैल्यू (एक मिनट का 0.1) इस्तेमाल कर रहे हैं का इस्तेमाल नहीं किया जा सकता.

अलार्म हटाएं

cancelAlarm() में, रद्द करें' पर अलार्म को रद्द करने के लिए, chrome.alarms.clear() एपीआई का इस्तेमाल करें अलार्म टॉगल किया गया है.

chrome.alarms.clear(alarmName);

पहला पैरामीटर, पहचान करने वाली वह स्ट्रिंग होनी चाहिए जिसका इस्तेमाल आपने अलार्म के नाम के तौर पर किया था chrome.alarms.create().

दूसरा (ज़रूरी नहीं) पैरामीटर एक कॉलबैक फ़ंक्शन है, जिसे इस फ़ॉर्मैट में होना चाहिए:

function(boolean wasCleared) {...};

अलार्म सेट करें

checkAlarm() में, बनाए गए सभी अलार्म का कलेक्शन पाने के लिए chrome.alarms.getAll() एपीआई का इस्तेमाल करें ताकि टॉगल बटन के यूज़र इंटरफ़ेस (यूआई) की स्थिति को अपडेट किया जा सके.

getAll(), ऐसे कॉलबैक फ़ंक्शन को स्वीकार करता है जो Alarm ऑब्जेक्ट के कलेक्शन में पास होते हैं. यह देखने के लिए कि क्या Alarm, DevTools कंसोल में चल रहे अलार्म की जांच इस तरह की जा सकती है:

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

इससे एक ऑब्जेक्ट तैयार होगा, जैसे कि {name: "remindme", periodInMinutes: 0.1, scheduledTime: 1397587981166.858} जैसा यहां दिखाया गया है:

चल रहे अलार्म की जांच करने के लिए getAll() का इस्तेमाल करें.

अगले सेक्शन के लिए तैयार हो जाएं

अब ऐप्लिकेशन को समय-समय पर पोल करने के लिए अलार्म सेट कर दिए गए हैं. इसलिए, अब अलार्म जोड़ने के लिए बेस के तौर पर इसका इस्तेमाल करें विज़ुअल सूचनाएं.

सूचनाएं जोड़ें

हम अलार्म के बारे में ऐसी सूचना सेट करते हैं जिसे उपयोगकर्ता आसानी से देख सकता है. इस्तेमाल की जाने वाली चीज़ें 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');

सूचना बनाएं

Console में नया अलार्म लॉग करने के बजाय, onAlarm लिसनर को अपडेट करें, ताकि उन्हें स्टोर किया जा सके chrome.storage.local.get() के ज़रिए डेटा शेयर करने और showNotification() तरीके को कॉल करने के लिए:

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

इस showNotification() तरीके को background.js में जोड़ें:

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 ऑब्जेक्ट है. इमेज रेंडर करने के कई विकल्प हैं सूचना पॉपअप. यहाँ हम "बेसिक" इस्तेमाल कर रहे हैं सूचना दिखेगी. इस सूचना में आइकॉन, टाइटल, और मैसेज दिखेगा. अन्य तरह की सूचनाओं में इमेज, सूचियां, और प्रोग्रेस इंडिकेटर शामिल होते हैं. बेझिझक इस पर वापस जाएं सेक्शन में जाकर, सूचना पाने की दूसरी सुविधाएं इस्तेमाल करें.

तीसरा (ज़रूरी नहीं) पैरामीटर कॉलबैक का तरीका है, जो इस फ़ॉर्मैट में होना चाहिए:

function(string notificationId) {...};

सूचना इंटरैक्शन मैनेज करना

जब उपयोगकर्ता सूचना पर क्लिक करे, तो काम की सूची वाला ऐप्लिकेशन खोलें. background.js के आखिर में, chrome.notifications.onClicked इवेंट हैंडलर:

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

इवेंट हैंडलर कॉलबैक सिर्फ़ launch() तरीके को कॉल करता है. chrome.app.window.create() में से कोई एक अगर कोई Chrome ऐप्लिकेशन पहले से मौजूद नहीं है, तो वह एक नई विंडो बनाता है या उस पर फ़ोकस करता है वह विंडो खोलें जिसमें main आईडी है.

अपना काम पूरा करने वाला काम पूरा करने वाला ऐप्लिकेशन लॉन्च करें

आपने तीसरा चरण पूरा कर लिया है! रिमाइंडर की मदद से, काम की सूची वाला ऐप्लिकेशन अभी फिर से लोड करें.

देखें कि ये व्यवहार उम्मीद के मुताबिक काम कर रहे हैं या नहीं:

  • अगर आपके पास कोई ऐसा आइटम नहीं है जिसे पूरा नहीं किया गया है, तो कोई पॉप-अप सूचना नहीं दिखेगी.
  • ऐप्लिकेशन बंद होने के बाद, सूचना पर क्लिक करने पर, काम की सूची खुल जाएगी या ऐप्लिकेशन बंद हो जाएगा फ़ोकस.

समस्या का हल

आपकी फ़ाइनल background.js फ़ाइल इस तरह दिखेगी. अगर सूचनाएं नहीं दिख रही हैं, तो पुष्टि करें कि आपका Chrome वर्शन 28 या उसके बाद का वर्शन है. अगर सूचनाएं अब भी नहीं दिखती हैं, तो मुख्य विंडो में मौजूद DevTools कंसोल में गड़बड़ी के मैसेज (राइट क्लिक करें > एलिमेंट की जांच करें) और बैकग्राउंड पेज पर जाएं (राइट क्लिक करें > बैकग्राउंड पेज की जांच करें).

अधिक जानकारी के लिए

इस चरण में शुरू किए गए कुछ एपीआई के बारे में ज़्यादा जानकारी के लिए, यह लेख पढ़ें:

क्या आप अगले चरण पर जाने के लिए तैयार हैं? चौथा चरण - वेबव्यू की मदद से बाहरी लिंक खोलें » पर जाएं