הצגת התראה

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:

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

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

אם מריצים את הקוד הבא:

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 (שהכפולה של 64 פיקסלים ביחס ליחס הפיקסלים של המכשיר).

בהנחה שיחס הפיקסלים הגבוה ביותר למכשיר הוא 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.

לפי ההנחיה הזו, מומלץ להשתמש בתמונה ברוחב 1350 פיקסלים או יותר.

פעולות (לחצנים)

אפשר להגדיר את 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);

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

סאונד

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

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

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 (כלומר, התקופה של מערכת UNIX).

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

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

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

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

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

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

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

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

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

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

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

לכן אנחנו יכולים לשנות את ההודעה שאנחנו מציגים למשתמשים.

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

השלבים הבאים

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

שיעורי Lab

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