תמונה ראשית עבור 'מדריך Web Notifications API' מדריך Web Notifications API

Web Notifications הוא API שמאפשר הצגת התראות למשתמש מחוץ לאתר - דרך הדפדפן. נכון לכתיבת שורה זו, כל הדפדפנים חוץ מ- Safari Mobile, Internet Explorer ו- Internet Explorer Mobile תומכים ביכולת הזו בצורה כלשהי, מה שהופך את Notifications API לנפוץ מאוד בימים האלו.

אתרים רבים משתמשים ב- Notifications API, כמו לדוגמא הממשקים הווביים של WhatsApp ו- Telegram, כיוון שנוח מאוד להודיע למשתמשים על הודעות צ'אט בעזרתו.

בקשת רשות

הדבר הראשון שצריך לעשות כדי שהמשתמש יוכל לקבל את ההתראות שלכם, הוא לבקש מהמשתמש רשות לשלוח לו אותן.

document.addEventListener('DOMContentLoaded', function () {   if (Notification && Notification.permission !== "granted")       Notification.requestPermission();});

הקוד למעלה מגדיר אירוע שקורה כשהעמוד מסיים לעלות, ובו הוא שואל האם המשתמש אישר קבלת התראות - אם לא, הוא מבקש אישור.

שליחת התראה

כדי לשלוח התראה, כל מה שצריך לעשות זה לייצר מופע של המחלקה Notification עם הפרטים שנרצה שיופיעו עליו. רצוי גם לבדוק אם הדפדפן תומך ב- Notifications API, בעזרת בדיקה פשוטה של האם Notification הוא undefined.

if (Notification) {   new Notification(title, {      icon: 'icon.png',      body: "There's a new message from Eliran",   });}

 

icon מייצג את התמונה שתופיע בצד ההתראה (נתמך רק בחלק מהדפדפנים), ו- body מייצג את הטקסט שיופיע בה.

ניתן גם להשתמש בעוד הרבה הגדרות, לדוגמא:

dir - קובע האם הטקסט בהתראה יופיע מימין לשמאל או משמאל לימין

lang - השפה של ההתראה

silent - האם ההתראה צריכה להיות שקטה (בלי רטט וסאונד)

noscreen - האם ההתראה צריכה להעיר את המסך (בסמארטפונים כמובן)

sticky - מבטל את היכולת של המשתמש לנקות את ההתראה

onclick - פונקציה שתקרא כשהמשתמש ילחץ על ההתראה

onerror - פונקציה שתקרא כאשר יש שגיאה מסוג כלשהו.

onclose ו- onshow עובדים בחלק מהדפדפנים והם מקבלים פונקציה שנקראת כשהמשתמש סוגר או פותח את ההתראה (בהתאמה)

סגירה אוטומטית

חלק מהדפדפנים לא תומכים בסגירה אוטומטית של התראות, ולכן ניתן להגדיר Timeout שיסגור את ההתראה אוטומטית כעבור כמה זמן.

if (Notification) {   var notification = new Notification(title, {      icon: 'icon.png',      body: "There's a new message from Eliran",   });   setTimeout(function() {      notification.close();   },4000);}

ניתן כמובן להשתמש בפונקציה close() כדי לסגור התראות גם בשימושים אחרים.

זהו, זה כל מה שצריך לדעת כדי להשתמש ב- Notification API.

תגובות

הקוד קצת מבולגן.. אבל עזר לי מאוד
משה הגב
תודה נהנתי לקרוא
xx הגב

הוסף תגובה