התנהגות ההתראות

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

כברירת מחדל, קריאה ל-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);

שם תוצג ההתראה הראשונה שלנו.

ההתראה הראשונה עם תג של קבוצת ההודעות 1.

נציג התראה שנייה עם תג חדש של '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);

תוצג למשתמש התראה שנייה.

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

עכשיו נציג התראה שלישית, אבל נשתמש מחדש בתג הראשון של '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);

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

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

לאן ממשיכים

שיעורי Lab קוד