שלב 3: הוספת שעונים מעוררים והתראות

בשלב זה נלמד:

  • איך להוציא את האפליקציה ממצב שינה במרווחי זמן קבועים כדי לבצע משימות ברקע.
  • איך להשתמש בהתראות שמוצגות במסך כדי למשוך תשומת לב למשהו חשוב.

זמן משוער להשלמת השלב הזה: 20 דקות. כדי לראות תצוגה מקדימה של מה שיושלם בשלב זה, דלגו לחלק התחתון של הדף הזה ↓.

רוצה להוסיף תזכורות כדי לשפר את אפליקציית Todo?

אפשר לשפר את אפליקציית Todo באמצעות הוספה של פונקציונליות שמזכירה למשתמשים אם יש להם משימות פתוחות – אפילו כשהאפליקציה סגורה.

קודם כול, עליך להוסיף לאפליקציה דרך לבדוק באופן קבוע אם יש משימות שלא בוצעו. לאחר מכן, היא צריכה להציג הודעה למשתמש, גם אם החלון של אפליקציית Todo סגור. כדי לעשות זאת, חשוב להבין איך ההתראות וההתראות פועלות באפליקציות Chrome.

הוספת שעונים מעוררים

אפשר להגדיר מרווח זמן להתעוררות באמצעות chrome.alarms. כל עוד Chrome פועל, האזעקה מופעלת בערך במרווח הזמן שהוגדר.

עדכון ההרשאות הניתנות לאפליקציה

ב-manifest.json, מבקשים את ההרשאה "alarms":

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

עדכון הסקריפטים ברקע

ב-background.js, מוסיפים onAlarm מאזין. בשלב זה, פונקציית הקריאה החוזרת רק תרשום הודעה ב-Play Console בכל פעם שיש פריט לביצוע:

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>

עכשיו צריך לכתוב את הגורם המטפל באירועים של JavaScript עבור הלחצן החדש. בשלב 2 נזכיר כי אחד מאי-התאימות הנפוצים ביותר של CSP נגרם על-ידי 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(), יחד עם גורם שמטפל באירועים של קליק כדי להפעיל או להשבית את ההתראה כשלוחצים על הלחצן Activate alarm (הפעלת התראה).

(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(), משתמשים ב-API של chrome.alarms.create() כדי ליצור התראה כשמעבירים את המתג Activate alarm למצב מופעל.

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

הפרמטר הראשון הוא מחרוזת אופציונלית שמזהה שם ייחודי להתראה, לדוגמה remindme. (הערה: עליך להגדיר שם התראה כדי לבטל אותה לפי שם).

הפרמטר השני הוא אובייקט alarmInfo. נכסים חוקיים עבור alarmInfo כוללים את when או את delayInMinutes ואת periodInMinutes. כדי להפחית את העומס על המחשב של המשתמש, Chrome מגביל את ההתראות לפעם אחת בדקה. כאן אנחנו משתמשים בערכים קטנים (0.1 לדקה) למטרות הדגמה בלבד.

ניקוי ההתראות

ב-cancelAlarm(), משתמשים ב-API של chrome.alarms.clear() כדי לבטל התראה כשהמתג ביטול ההתראה מופעל.

chrome.alarms.clear(alarmName);

הפרמטר הראשון צריך להיות המחרוזת המזהה שהשתמשת בה כשם התראה ב-chrome.alarms.create().

הפרמטר השני (אופציונלי) הוא פונקציית קריאה חוזרת שאמורה לקבל את הפורמט הבא:

function(boolean wasCleared) {...};

קבלת שעונים מעוררים

ב-checkAlarm(), משתמשים ב-API של chrome.alarms.getAll() כדי לקבל מערך של כל ההתראות שנוצרו כדי לעדכן את המצב של ממשק המשתמש של הלחצן להחלפת המצב.

getAll() מקבלת פונקציית קריאה חוזרת שמעבירה מערך של Alarm אובייקטים. כדי לראות מה יש ב-Alarm, אפשר לבדוק את ההתראות שפועלות ב-DevTools Console באופן הבא:

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 הוא אותו שם מסד נתונים שהוגדר בשורה 17 של js/app.js:

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

יצירת התראה

במקום לרשום התראה חדשה במסוף, צריך לעדכן את ה-listener של onAlarm כדי לקבל נתונים מאוחסנים דרך chrome.storage.local.get() ולבצע קריאה ל-method 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. יש הרבה אפשרויות להצגת ההודעה הקופצת. כאן אנחנו משתמשים בהודעה "בסיסית" עם סמל, כותרת והודעה. סוגי התראות אחרים כוללים תמונות, רשימות ומחווני התקדמות. בסיום שלב 3 תוכלו לחזור לקטע הזה ולהתנסות בתכונות נוספות של התראות.

הפרמטר השלישי (אופציונלי) הוא שיטת קריאה חוזרת שאמורה לקבל את הפורמט הבא:

function(string notificationId) {...};

טיפול באינטראקציות עם התראות

פותחים את אפליקציית Todo כשהמשתמש לוחץ על ההתראה. בסוף background.js, יוצרים גורם מטפל באירועים של chrome.notifications.onClicked:

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

הקריאה החוזרת (callback) של הגורם המטפל באירועים מפעילה קריאה ל-method launch(). chrome.app.window.create() יוצר חלון חדש של אפליקציית Chrome אם עדיין לא קיים, או שהוא מתמקד בחלון הפתוח הנוכחי עם מזהה החלון main.

הפעלת האפליקציה הסתיימה של משימות לביצוע

סיימת את שלב 3! כדאי לטעון מחדש את אפליקציית Todo עם תזכורות.

בדוק שההתנהגויות הבאות פועלות כמצופה:

  • אם אין משימות לביצוע שלא בוצעו, אין התראות קופצות.
  • אם לוחצים על ההתראה כשהאפליקציה סגורה, אפליקציית Todo תיפתח או תתמקד.

פתרון בעיות

קובץ ה-background.js הסופי אמור להיראות כך. אם לא מופיעות הודעות, ודאו שגרסת Chrome שלכם היא 28 ואילך. אם ההודעות עדיין לא מופיעות, כדאי לבדוק אם יש הודעות שגיאה ב-DevTools Console בחלון הראשי (לחיצה ימנית > Inspect Element) ובדף הרקע (לחיצה ימנית > Inspect Background Page).

אפשר לקבל מידע נוסף

לקבלת מידע מפורט יותר על חלק מממשקי ה-API שהוצגו בשלב הזה, עיינו במקורות הבאים:

מוכנים להמשיך לשלב הבא? עוברים אל שלב 4 - פתיחת קישורים חיצוניים באמצעות WebView »