עד עכשיו התמקדנו באפשרויות לשינוי המראה החזותי של ההתראות. יש גם אפשרויות לשינוי ההתנהגות של ההתראות.
כברירת מחדל, קריאה ל-showNotification()
עם אפשרויות חזותיות בלבד תגרום להתנהגויות הבאות:
- לחיצה על ההתראה לא תעשה דבר.
- כל התראה חדשה מוצגת בזה אחר זה. הדפדפן לא יכווץ את ההתראות בשום צורה.
- הפלטפורמה עשויה להשמיע צליל או להפעיל רטט במכשיר של המשתמש (בהתאם לפלטפורמה).
- בפלטפורמות מסוימות ההתראה תיעלם אחרי פרק זמן קצר, ובפלטפורמות אחרות היא תישאר מוצגת עד שהמשתמש יבצע איתה פעולה כלשהי. (לדוגמה, אפשר להשוות בין ההתראות ב-Android ובמחשב).
בקטע הזה נסביר איך אפשר לשנות את התנהגויות ברירת המחדל האלה באמצעות אפשרויות בלבד. קל יחסית להטמיע את התכונות האלה וליהנות מהן.
אירוע של קליק על התראה
כשמשתמש לוחץ על התראה, ברירת המחדל היא שלא יקרה כלום. הוא אפילו לא סוגר או מסיר את ההתראה.
השיטה הנפוצה ביותר של קליק על התראה היא לסגור אותו ולבצע לוגיקה אחרת (כמו פתיחת חלון או ביצוע קריאה כלשהי ל-API לאפליקציה).
כדי לעשות זאת, צריך להוסיף ל-service worker שלנו מאזין לאירועים מסוג 'notificationclick'
. היא תופעל בכל פעם שלוחצים על התראה.
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
. מכאן ניתן לגשת למאפיינים ולשיטות של ההתראה. במקרה כזה, צריך להפעיל את השיטה 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);
כדאי להשתמש באפשרות הזו כדי להפעיל שיקול דעת. הצגת התראה והכרח המשתמשים להפסיק את מה שהם עושים כדי לסגור אותה יכולה להיות מתסכלת.
בקטע הבא נבחן כמה מהדפוסים הנפוצים באינטרנט לניהול התראות ולביצוע פעולות, כמו פתיחת דפים כשלוחצים על התראה.
לאן ממשיכים
- סקירה כללית בנושא התראות מאפליקציית אינטרנט
- איך פועלת התכונה 'התראות דחיפה'
- הרשמה של משתמש
- הרשאות UX
- שליחת הודעות באמצעות ספריות דחיפת הודעות מדפי אינטרנט
- Web Push Protocol
- טיפול באירועי Push
- הצגת התראה
- אופן הפעולה של ההתראות
- דפוסי התראות נפוצים
- שאלות נפוצות בנושא התראות
- בעיות נפוצות ודיווח על באגים