שימוש ב-Notifications API

Ernest Delgado
Ernest Delgado
X

מבוא

‫Notifications API מאפשר להציג למשתמשים התראות על אירועים מסוימים, באופן פסיבי (אימיילים חדשים, ציוצים או אירועים ביומן) וגם על אינטראקציות של משתמשים, בלי קשר לכרטיסייה שמוצגת. יש מפרט טיוטה, אבל הוא לא נמצא כרגע באף תקן.

כדי להטמיע התראות תוך כמה דקות, פועלים לפי השלבים הפשוטים הבאים:

שלב 1: בודקים אם יש תמיכה ב-Notifications API

אנחנו בודקים אם יש תמיכה ב-webkitNotifications. שימו לב שהשם webkitNotifications הוא חלק מטיוטת מפרט. במפרט הסופי תהיה פונקציה notifications()‎ במקום זאת.

// check for notifications support
// you can omit the 'window' keyword
if (window.webkitNotifications) {
console.log("Notifications are supported!");
}
else {
console.log("Notifications are not supported for this Browser/OS version yet.");
}

שלב 2: מאפשרים למשתמש להעניק לאתר הרשאות להצגת התראות

כל אחד מהבונה שהזכרנו יציג שגיאת אבטחה אם המשתמש לא העניק לאתר הרשאות להצגת התראות באופן ידני. כדי לטפל בחריגה, אפשר להשתמש בהצהרת try-catch, אבל אפשר גם להשתמש בשיטה checkPermission למטרה הזו.

document.querySelector('#show_button').addEventListener('click', function() {
if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
// function defined in step 2
window.webkitNotifications.createNotification(
    'icon.png', 'Notification Title', 'Notification content...');
} else {
window.webkitNotifications.requestPermission();
}
}, false);

אם לאפליקציית האינטרנט אין הרשאות להצגת התראות, הפונקציה requestPermission תציג סרגל מידע:

סרגל המידע של הרשאת ההתראות ב-Google Chrome
סרגל המידע של הרשאת ההתראות ב-Google Chrome.

עם זאת, חשוב מאוד לזכור שהשיטה requestPermission פועלת רק ב-event handlers שמופעלים על ידי פעולת משתמש, כמו אירועים של עכבר או מקלדת, כדי למנוע סרגלי מידע לא רצויים. במקרה הזה, פעולת המשתמש היא לחיצה על הלחצן עם המזהה show_button. הקטע שלמעלה לא יעבוד אף פעם אם המשתמש לא לחץ באופן מפורש על לחצן או קישור שמפעילים את requestPermission בשלב כלשהו.

שלב 3: צירוף רכיבי Listener ופעולות אחרות

document.querySelector('#show_button').addEventListener('click', function() {
  if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
    // function defined in step 2
    notification_test = window.webkitNotifications.createNotification(
      'icon.png', 'Notification Title', 'Notification content...');
    notification_test.ondisplay = function() { ... do something ... };
    notification_test.onclose = function() { ... do something else ... };
    notification_test.show();
  } else {
    window.webkitNotifications.requestPermission();
  }
}, false);

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