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

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

Code Labs

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