עד עכשיו בדקנו את האפשרויות שמשנות את המראה החזותי של התראה. יש גם אפשרויות שמשנות את אופן הפעולה של ההתראות.
כברירת מחדל, הקריאה ל-showNotification()
עם אפשרויות חזותיות בלבד תתבטא בהתנהגויות הבאות:
- לחיצה על ההתראה לא תגרום לכל פעולה.
- כל התראה חדשה מוצגת אחת אחרי השנייה. הדפדפן לא יכווץ את ההתראות בשום צורה.
- הפלטפורמה עשויה להשמיע צליל או לרטוט במכשיר של המשתמש (בהתאם לפלטפורמה).
- בפלטפורמות מסוימות היא תיעלם תוך זמן קצר. לעומת זאת, בפלטפורמות אחרות היא תיעלם, אלא אם המשתמש יקיים איתה אינטראקציה. (לדוגמה, כדאי להשוות בין ההתראות ב-Android לבין ההתראות במחשב).
בחלק זה נראה איך אפשר לשנות את התנהגויות ברירת המחדל האלה באמצעות אפשרויות לבד. יחסית קל ליישם את השיטות האלה ולנצל את היתרונות שלהן.
אירוע של לחיצה על התראה
כשמשתמש לוחץ על התראה, התנהגות ברירת המחדל היא ששום דבר לא קורה. היא לא סוגרת או מסירה את ההתראה אפילו.
לרוב, קליק על התראה הוא סגירה וביצוע לוגיקה אחרת (למשל, פתיחת חלון או ביצוע קריאה כלשהי ל-API לאפליקציה).
כדי לעשות זאת, צריך להוסיף event listener של 'notificationclick'
ל-Service Worker. היא תקרא בכל פעם שלוחצים על התראה.
self.addEventListener('notificationclick', (event) => {
const clickedNotification = event.notification;
clickedNotification.close();
// Do something as the result of the notification click
const promiseChain = doSomething();
event.waitUntil(promiseChain);
});
כמו שאפשר לראות בדוגמה הזו, אפשר לגשת להודעה שעליה לחץ המשתמש בתור event.notification
. מכאן תוכלו לגשת למאפיינים ולשיטות של ההתראה. במקרה כזה, צריך לקרוא ל-method close()
ולבצע פעולות נוספות.
פעולות
פעולות מאפשרות לכם ליצור רמה נוספת של אינטראקציה עם המשתמשים, במקום ללחוץ על ההתראה.
לחצנים
בקטע הקודם הסברנו איך להגדיר לחצני פעולה כשקוראים ל-showNotification()
:
const title = 'Actions Notification';
const options = {
actions: [
{
action: 'coffee-action',
title: 'Coffee',
type: 'button',
icon: '/images/demos/action-1-128x128.png',
},
{
action: 'doughnut-action',
type: 'button',
title: 'Doughnut',
icon: '/images/demos/action-2-128x128.png',
},
{
action: 'gramophone-action',
type: 'button',
title: 'Gramophone',
icon: '/images/demos/action-3-128x128.png',
},
{
action: 'atom-action',
type: 'button',
title: 'Atom',
icon: '/images/demos/action-4-128x128.png',
},
],
};
registration.showNotification(title, options);
אם המשתמש לוחץ על לחצן פעולה, בודקים את הערך event.action
באירוע noticationclick
כדי לראות על איזה לחצן פעולה המשתמש לחץ.
event.action
יכיל את הערך action
שהוגדר באפשרויות. בדוגמה שלמעלה, הערכים של event.action
יהיו אחד מהערכים הבאים: 'coffee-action'
, 'doughnut-action'
, 'gramophone-action'
או 'atom-action'
.
כך נזהה קליקים על התראות או קליקים לפעולה כמו:
self.addEventListener('notificationclick', (event) => {
if (!event.action) {
// Was a normal notification click
console.log('Notification Click.');
return;
}
switch (event.action) {
case 'coffee-action':
console.log("User ❤️️'s coffee.");
break;
case 'doughnut-action':
console.log("User ❤️️'s doughnuts.");
break;
case 'gramophone-action':
console.log("User ❤️️'s music.");
break;
case 'atom-action':
console.log("User ❤️️'s science.");
break;
default:
console.log(`Unknown action clicked: '${event.action}'`);
break;
}
});
תשובות בשרשור
בנוסף, בקטע הקודם הסברנו איך להוסיף תשובה בתוך ההודעה להודעה:
const title = 'Poll';
const options = {
body: 'Do you like this photo?',
image: '/images/demos/cat-image.jpg',
icon: '/images/demos/icon-512x512.png',
badge: '/images/demos/badge-128x128.png',
actions: [
{
action: 'yes',
type: 'button',
title: '👍 Yes',
},
{
action: 'no',
type: 'text',
title: '👎 No (explain why)',
placeholder: 'Type your explanation here',
},
],
};
registration.showNotification(title, options);
event.reply
יכיל את הערך שהוזן על ידי המשתמש בשדה הקלט:
self.addEventListener('notificationclick', (event) => {
const reply = event.reply;
// Do something with the user's reply
const promiseChain = doSomething(reply);
event.waitUntil(promiseChain);
});
תיוג
האפשרות tag
היא בעצם מזהה מחרוזת ש'מקבצים' יחד את ההתראות. זו דרך פשוטה לקבוע איך כמה התראות מוצגות למשתמש. קל להסביר את זה באמצעות דוגמה.
נציג התראה ונעניק לה תג, של 'message-group-1'
. אנו נציג את ההודעה עם הקוד הבא:
const title = 'Notification 1 of 3';
const options = {
body: "With 'tag' of 'message-group-1'",
tag: 'message-group-1',
};
registration.showNotification(title, options);
שבו תוצג ההתראה הראשונה.
נציג התראה שנייה עם תג חדש של 'message-group-2'
, למשל:
const title = 'Notification 2 of 3';
const options = {
body: "With 'tag' of 'message-group-2'",
tag: 'message-group-2',
};
registration.showNotification(title, options);
תוצג למשתמש התראה שנייה.
עכשיו נציג התראה שלישית, אבל נשתמש שוב בתג הראשון של 'message-group-1'
. הפעולה הזו תסגור את ההתראה הראשונה ותוחלף בהודעה החדשה.
const title = 'Notification 3 of 3';
const options = {
body: "With 'tag' of 'message-group-1'",
tag: 'message-group-1',
};
registration.showNotification(title, options);
עכשיו יש לנו שתי התראות על אף שיחה לshowNotification()
שלוש פעמים.
האפשרות tag
היא פשוט דרך לקיבוץ הודעות, כך שכל ההתראות הישנות שמוצגות כרגע ייסגרו אם הן כוללות תג זהה לזה של התראה חדשה.
קלות השימוש ב-tag
היא, שכאשר היא מחליפה התראה, היא עושה זאת ללא צליל או רטט.
פה נכנסת לתמונה האפשרות renotify
.
שליחה מחדש
מידע זה רלוונטי לרוב למכשירים ניידים בזמן הכתיבה. בחירה באפשרות הזו גורמת לרטט של התראות חדשות ולהשמעת צליל מערכת.
יש תרחישים שבהם כדאי לקבל התראה מחליפה כדי לעדכן את המשתמש במקום לעדכן בלי להשמיע צליל. דוגמאות טובות לאפליקציות צ'אט. במקרה כזה, עליכם להגדיר את tag
ואת renotify
לערך true
.
const title = 'Notification 2 of 2';
const options = {
tag: 'renotify',
renotify: true,
};
registration.showNotification(title, options);
שקטה
כך ניתן להציג התראה חדשה אבל לא להשתמש ברטט, בצליל ובהפעלה של מסך המכשיר כברירת מחדל.
המצב הזה אידיאלי אם ההתראות לא דורשות התייחסות מיידית.
const title = 'Silent Notification';
const options = {
silent: true,
};
registration.showNotification(title, options);
נדרשת אינטראקציה
Chrome במחשב יציג התראות לפרק זמן מוגדר לפני שיסתיר אותן. Chrome ב-Android לא מתנהג כך. ההתראות מוצגות עד שהמשתמש יוצר אינטראקציה איתם.
כדי לאלץ את ההתראה להיות גלויה עד שהמשתמש מבצע אינטראקציה, מוסיפים את האפשרות requireInteraction
. ההתראה תוצג עד שהמשתמש יסגור את ההתראה או ילחץ עליה.
const title = 'Require Interaction Notification';
const options = {
requireInteraction: true,
};
registration.showNotification(title, options);
מומלץ להשתמש באפשרות הזו מתוך שיקול דעת. הצגת התראה ואילוץ המשתמש להפסיק את הפעולה שלו כדי לסגור את ההתראה יכולות להיות מתסכלות.
בקטע הבא נבחן כמה מהדפוסים הנפוצים שבהם משתמשים באינטרנט לניהול התראות ולביצוע פעולות כמו פתיחת דפים כשלוחצים על התראה.
השלבים הבאים
- סקירה כללית של התראות באינטרנט
- איך Push פועל
- הרשמה של משתמש למינוי
- חוויית המשתמש עם ההרשאות
- שליחת הודעות באמצעות ספריות Push באינטרנט
- פרוטוקול Web Push
- טיפול באירועי Push
- הצגת התראה
- התנהגות ההתראות
- תבניות נפוצות של התראות
- שאלות נפוצות בנושא התראות בדחיפה
- בעיות נפוצות ודיווח על באגים