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

Alexey Rodionov

Matt Gaunt

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

כברירת מחדל, הקריאה ל-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() ולבצע פעולות נוספות.

אזהרה: עליך להשתמש ב-event.waitUntil() כדי שה-Service Worker ימשיך לפעול בזמן שהקוד לא פנוי.

פעולות

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

לחצנים

בקטע הקודם הסברנו איך להגדיר לחצני פעולה כשקוראים ל-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);

אזהרה: אם מגדירים את renotify לערך true בהתראה ללא tag, תתקבל השגיאה הבאה: TypeError: Failed to execute 'showNotification' on 'ServiceWorkerRegistration': Notifications which set the renotify flag must specify a non-empty tag

שקטה

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

המצב הזה אידיאלי אם ההתראות לא דורשות התייחסות מיידית.

const title = 'Silent Notification';

const options = {
  silent: true,
};

registration.showNotification(title, options);

הערה: אם תגדיר גם את silent וגם את renotify, תינתן עדיפות ל-silent.

נדרשת אינטראקציה

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

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

const title = 'Require Interaction Notification';

const options = {
  requireInteraction: true,
};

registration.showNotification(title, options);

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

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

השלבים הבאים

• סקירה כללית של התראות באינטרנט
• איך Push פועל
• הרשמה של משתמש למינוי
• חוויית המשתמש עם ההרשאות
• שליחת הודעות באמצעות ספריות Push באינטרנט
• פרוטוקול Web Push
• טיפול באירועי Push
• הצגת התראה
• התנהגות ההתראות
• תבניות נפוצות של התראות
• שאלות נפוצות בנושא התראות בדחיפה
• בעיות נפוצות ודיווח על באגים

שיעורי Lab

• בניית לקוח התראות
• בניית שרת התראות