שימוש ב-Notifications API

ארנסט דלגאדו
ארנסט דלגאדו
Twitter

מבוא

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: מאפשרים למשתמש להעניק הרשאות לאתר כדי להציג התראות

כל אחד מהבנאים שהזכרנו יזכה שגיאת אבטחה אם המשתמש לא העניק באופן ידני הרשאות לאתר להצגת התראות. כדי לטפל בחריג, אפשר להשתמש בהצהרת 'ניסיון' אבל אפשר גם להשתמש בשיטה 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 פועלת רק ברכיבי handler של אירועים שהופעלו על ידי פעולה של משתמש, כמו אירועי עכבר או מקלדת, כדי להימנע מהצגת סרגלי מידע לא רצויים. במקרה זה, פעולת המשתמש היא לחיצה על הלחצן עם המזהה 'show_button'. קטע הקוד שלמעלה אף פעם לא יפעל אם המשתמש לא לחץ במפורש על לחצן או על קישור שמפעילים את requestPermission בשלב כלשהו.

שלב 3: צירוף מאזינים ופעולות אחרות

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

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