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

इस चरण में आपको पता चलेगा कि:

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

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

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

अगर उपयोगकर्ता के पास काम की सूची है, तो उसे यह याद दिलाने के लिए ऐप्लिकेशन को बेहतर बनाएं. ऐसा तब भी किया जा सकता है, जब ऐप्लिकेशन बंद हो.

सबसे पहले, आपको ऐसा तरीका जोड़ना होगा जिससे ऐप्लिकेशन, पूरे नहीं किए गए कामों की समय-समय पर जांच कर सके. इसके बाद, ऐप्लिकेशन को उपयोगकर्ता को एक मैसेज दिखाने की ज़रूरत है, भले ही 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 इवेंट हैंडलर लिखना होगा. दूसरे चरण से याद करें कि इनलाइन 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 का इस्तेमाल करें:

हमारे Todo ऐप्लिकेशन की सूचना

जब उपयोगकर्ता सूचना पर क्लिक करेगा, तो Todo ऐप्लिकेशन की विंडो दिखेगी.

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

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

सूचना बनाएं

कंसोल में नया अलार्म लॉग करने के बजाय, 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) {...};

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

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

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

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

वह ऐप्लिकेशन लॉन्च करें जिसे पूरा कर लिया गया है

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

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

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

समस्या हल करना

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

ज़्यादा जानकारी के लिए

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

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