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