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

Alexey Rodionov

Matt Gaunt

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

כברירת מחדל, כשמתקשרים אל showNotification() עם אפשרויות חזותיות בלבד, הפרטים הבאים יהיו: התנהגויות:

• לחיצה על ההתראה לא תגרום לשום דבר.
• כל התראה חדשה מוצגת אחת אחרי השנייה. הדפדפן לא יכווץ את התראות בכל דרך שהיא.
• הפלטפורמה עשויה להשמיע צליל או לרטוט את המכשיר של המשתמש (בהתאם לפלטפורמה).
• בפלטפורמות מסוימות ההתראה תיעלם לאחר זמן קצר, ואילו בפלטפורמות אחרות ההתראה תיעלם להציג את ההתראה, אלא אם המשתמש מקיים איתה אינטראקציה. (לדוגמה, אפשר להשוות בין ההתראות ב-Android ובמחשבים).

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

אירוע של קליק על התראה

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

שיטת העבודה הנפוצה של קליק על התראה היא לסגור אותו ולבצע לוגיקה אחרת (כלומר, לפתוח חלון או לבצע קריאה כלשהי ל-API לאפליקציה).

כדי לעשות זאת, צריך להוסיף ל-service worker שלנו פונקציות event listener ב-'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 מכאן ניתן לגשת למאפיינים ולשיטות של ההתראה. כאן עליך לקרוא ל-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 היא בעצם מזהה מחרוזת ש"groups" הודעות ביחד, כדי לקבוע כמה התראות יוצגו למשתמש. הכי קל להסביר את זה עם דוגמה.

נציג הודעה וניתן לה תג, מתוך '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
• שליחת הודעות באמצעות ספריות דחיפת הודעות מדפי אינטרנט
• פרוטוקול דחיפה באינטרנט
• טיפול באירועי Push
• הצגת התראה
• אופן הפעולה של התראות
• דפוסים נפוצים של התראות
• שאלות נפוצות בנושא התראות
• בעיות נפוצות ובאגים בדיווח

שיעורי Lab קוד

• יצירת לקוח התראות
• פיתוח שרת התראות