הצגת התראה

Alexey Rodionov

Matt Gaunt

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

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

אפשרויות תצוגה

ה-API להצגת התראה הוא פשוט:

<ServiceWorkerRegistration>.showNotification(<title>, <options>);

שני הארגומנטים, title ו-options, הם אופציונליים.

הכותרת היא מחרוזת, והאפשרויות יכולות להיות כל אחת מהאפשרויות הבאות:

{
  "//": "Visual Options",
  "body": "<String>",
  "icon": "<URL String>",
  "image": "<URL String>",
  "badge": "<URL String>",
  "dir": "<String of 'auto' | 'ltr' | 'rtl'>",
  "timestamp": "<Long>"

  "//": "Both visual & behavioral options",
  "actions": "<Array of Strings>",
  "data": "<Anything>",

  "//": "Behavioral Options",
  "tag": "<String>",
  "requireInteraction": "<boolean>",
  "renotify": "<Boolean>",
  "vibrate": "<Array of Integers>",
  "sound": "<URL String>",
  "silent": "<Boolean>",
}

אלה האפשרויות החזותיות:

אפשרויות לכותרת ולגוף הטקסט

כך נראית התראה בלי הכותרת והאפשרויות ב-Chrome ב-Windows:

כמו שאפשר לראות, שם הדפדפן משמש ככותרת והפלייסהולדר "התראה חדשה" משמש כגוף ההתראה.

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

אם נריץ את הקוד הבא:

const title = 'Simple Title';

const options = {
  body: 'Simple piece of body text.\nSecond line of body text :)',
};

registration.showNotification(title, options);

נקבל את ההתראה הזו ב-Chrome ב-Linux:

ב-Firefox ב-Linux זה ייראה כך:

כך נראית התראה עם הרבה טקסט בכותרת ובגוף ההודעה ב-Chrome ב-Linux:

ב-Firefox ב-Linux, גוף הטקסט מכווץ עד שמעבירים את העכבר מעל ההתראה, ואז ההתראה מתרחבת:

כך נראות אותן התראות ב-Firefox ב-Windows:

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

בפלטפורמות שבהן יש התראות מערכת ומרכז התראות, Chrome ו-Firefox משתמשים בהם.

לדוגמה, התראות מערכת ב-macOS לא תומכות בתמונות ובפעולות (כפתורים ותשובות מוטבעות).

ב-Chrome יש גם התראות בהתאמה אישית לכל הפלטפורמות למחשב. כדי להפעיל אותה, צריך להגדיר את הדגל chrome://flags/#enable-system-notifications למצב Disabled.

סמל

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

בקוד צריך לציין את כתובת ה-URL של התמונה שרוצים לטעון:

const title = 'Icon Notification';

const options = {
  icon: '/images/demos/icon-512x512.png',
};

registration.showNotification(title, options);

ההתראה הזו מופיעה ב-Chrome ב-Linux:

וב-Firefox ב-Linux:

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

נראה ש-Android דורשת תמונה בגודל 64dp (שהוא 64px כפול יחס הפיקסלים של המכשיר).

אם יחס הפיקסלים הגבוה ביותר של מכשיר הוא 3, סמל בגודל 192 פיקסלים או יותר הוא בחירה בטוחה.

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

תג

badge הוא סמל קטן בצבע אחד שמשמש כדי להציג למשתמש קצת יותר מידע על המקור של ההתראה:

const title = 'Badge Notification';

const options = {
  badge: '/images/demos/badge-128x128.png',
};

registration.showNotification(title, options);

נכון למועד כתיבת המאמר, התג משמש רק ב-Chrome ב-Android.

בדפדפנים אחרים (או ב-Chrome בלי התג), יופיע סמל של הדפדפן.

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

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

כלומר, תמונה בגודל 72 פיקסלים או יותר אמורה להתאים (בהנחה שיחס הפיקסלים המקסימלי של המכשיר הוא 3).

תמונה

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

const title = 'Image Notification';

const options = {
  image: '/images/demos/unsplash-farzad-nazifi-1600x1100.jpg',
};

registration.showNotification(title, options);

ב-Chrome ב-Linux, ההתראה תיראה כך:

ב-Chrome ב-Android, החיתוך והיחס שונים:

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

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

ב-Android, ההנחיה היחידה היא רוחב של 450dp.

לפי ההנחיה הזו, תמונה ברוחב של 1,350 פיקסלים או יותר תהיה בחירה טובה.

פעולות (כפתורים)

אפשר להגדיר את actions כדי להציג כפתורים עם התראה:

const title = 'Actions Notification';

const options = {
  actions: [
    {
      action: 'coffee-action',
      type: 'button',
      title: 'Coffee',
      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);

לכל פעולה אפשר להגדיר title, action (שהוא בעצם מזהה), icon ו-type. הכותרת והסמל הם מה שרואים בהתראה. המזהה משמש לזיהוי לחיצה על כפתור הפעולה (מידע נוסף על כך מופיע בקטע הבא). אפשר להשמיט את הסוג כי 'button' הוא ערך ברירת המחדל.

נכון לזמן כתיבת המאמר, רק Chrome ו-Opera ל-Android תומכים בפעולות.

בדוגמה שלמעלה מוגדרות ארבע פעולות כדי להמחיש שאפשר להגדיר יותר פעולות מאלה שיוצגו. כדי לדעת כמה פעולות יוצגו בדפדפן, אפשר לבדוק את window.Notification?.maxActions:

const maxVisibleActions = window.Notification?.maxActions;

if (maxVisibleActions) {
  options.body = `Up to ${maxVisibleActions} notification actions can be displayed.`;
} else {
  options.body = 'Notification actions are not supported.';
}

במחשב, הסמלים של כפתורי הפעולה מוצגים בצבעים שלהם (ראו את הסופגנייה הוורודה):

ב-Android 6 ובגרסאות קודמות, הסמלים צבועים בהתאם לערכת הצבעים של המערכת:

ב-Android מגרסה 7 ואילך, סמלי הפעולות לא מוצגים בכלל.

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

חשוב גם לציין שהסמלים נראים חדים ב-Android אבל לא במחשב.

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

השיטה המומלצת שאפשר להסיק מההבדלים האלה:

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

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

פעולות (תשובות בתוך השורה)

כדי להוסיף תשובה בתוך ההתראה, מגדירים פעולה עם הסוג 'text':

const title = 'Alexey Rodionov';

const options = {
  body: 'How are you doing? )',
  image: '/images/demos/avatar-512x512.jpg',
  icon: '/images/demos/icon-512x512.png',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'reply',
      type: 'text',
      title: 'Reply',
      icon: '/images/demos/action-5-128x128.png',
    }
  ],
};

registration.showNotification(title, options);

כך זה ייראה ב-Android:

לחיצה על כפתור הפעולה פותחת שדה להזנת טקסט:

אתם יכולים להתאים אישית את ה-placeholder של שדה הטקסט:

const title = 'Alexey Rodionov';

const options = {
  body: 'How are you doing? )',
  icon: '/images/demos/avatar-512x512.jpg',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'reply',
      type: 'text',
      title: 'Reply',
      icon: '/images/demos/action-5-128x128.png',
      placeholder: 'Type text here',
    }
  ],
};

registration.showNotification(title, options);

ב-Chrome ב-Windows, השדה להזנת טקסט תמיד גלוי, בלי שצריך ללחוץ על כפתור הפעולה:

אפשר להוסיף יותר מתשובה מהירה אחת או לשלב בין כפתורים לתשובות מהירות:

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);

כיוון

הפרמטר dir מאפשר להגדיר את כיוון הטקסט, מימין לשמאל או משמאל לימין.

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

כדאי להגדיר את השפה אם אפשר, אחרת הדפדפן ינסה לזהות אותה לפי הטקסט שסופק.

הפרמטר צריך להיות מוגדר בתור auto, ltr או rtl.

כך נראית שפה שנכתבת מימין לשמאל ב-Chrome ב-Linux:

ב-Firefox (כשמעבירים את העכבר מעל הקישור) יופיע:

רטט

אזהרה: התמיכה ב-vibrate הוצאה משימוש ב-Android מגרסה 8 ואילך.

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

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

const title = 'Vibrate Notification';

const options = {
  // Star Wars shamelessly taken from the awesome Peter Beverloo
  // https://tests.peter.sh/notification-generator/
  vibrate: [
    500, 110, 500, 110, 450, 110, 200, 110, 170, 40, 450, 110, 200, 110, 170,
    40, 500,
  ],
};

registration.showNotification(title, options);

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

צליל

הפרמטר sound מאפשר להגדיר צליל שיושמע כשההתראה תתקבל.

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

const title = 'Sound Notification';

const options = {
  sound: '/demos/notification-examples/audio/notification-sound.mp3',
};

registration.showNotification(title, options);

חותמת זמן

חותמת הזמן מאפשרת לכם לציין בפלטפורמה את הזמן שבו התרחש אירוע שהוביל לשליחת ההתראה.

הערך של timestamp צריך להיות מספר אלפיות השנייה מאז 00:00:00 UTC, שהוא 1 בינואר 1970 (ראשית זמן יוניקס).

const title = 'Timestamp Notification';

const options = {
  body: 'Timestamp is set to "01 Jan 2000 00:00:00".',
  timestamp: Date.parse('01 Jan 2000 00:00:00'),
};

registration.showNotification(title, options);

שיטות מומלצות לעיצוב חוויית המשתמש (UX)

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

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

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

כמה בעיות נפוצות שכדאי להימנע מהן:

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

דפדפנים וזיהוי תכונות

נכון לזמן כתיבת המאמר, יש פער די גדול בין Chrome ל-Firefox מבחינת התמיכה בתכונות של התראות.

למרבה המזל, אפשר לזהות תמיכה בתכונות של התראות על ידי עיון באב הטיפוס של window.Notification.

נניח שאנחנו רוצים לדעת אם התראה תומכת בכפתורי פעולה. אנחנו צריכים לבצע את הפעולות הבאות:

if ('actions' in window.Notification?.prototype) {
  // Action buttons are supported.
} else {
  // Action buttons are NOT supported.
}

כך נוכל לשנות את ההתראה שאנחנו מציגים למשתמשים.

באפשרויות האחרות, פשוט עושים את אותו הדבר כמו למעלה, ומחליפים את 'actions' בשם הפרמטר הרצוי.

לאן ממשיכים מכאן

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

Code Labs

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