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

בשלב הזה תלמדו:

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

זמן משוער להשלמת השלב הזה: 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);
});

עדכון של תצוגת 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() methods, יחד עם הגורם המטפל באירועים של קליקים, כדי להפעיל או להשבית את ההתראה כשהלחצן הפעלת התראה מופעל בוצעה לחיצה.

(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 שמשתמשים ב-methods chrome.alarms, אחת אחרי השנייה.

יצירת התראות

ב-createAlarm(), משתמשים ב-API chrome.alarms.create() כדי ליצור התראה בזמן הפעלה ההתראה הופעלה.

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, ניתן לבדוק התראות שפועלות במסוף כלי הפיתוח, באופן הבא:

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, מוסיפים משתנה לשם של מסד נתונים שנמצא בשימוש בהתראה Listener:

var dbName = 'todos-vanillajs';

הערך של dbName הוא אותו שם של מסד הנתונים שהוגדר בשורה 17 של js/app.js:

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

יצירת התראה

במקום לרשום התראה חדשה במסוף, צריך לעדכן את ה-listen של 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) {...};

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

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

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

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

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

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

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

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

פתרון בעיות

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

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

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

• הצהרה על הרשאות ↑
• chrome.alarms ↑
• chrome.alarms.onAlarm ↑
• chrome.alarms.create() ↑
• chrome.alarms.clear() ↑
• chrome.alarms.getAll() ↑
• chrome.notifications ↑
• chrome.notifications.create() ↑
• NotificationOptions ↑
• chrome.notifications.onClicked ↑

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