הצגת התראה

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

תג

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 במחשב היה 24px x 24px. לצערנו, הפיצ'ר הזה לא נראה תקין ב-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 (בזמן העברת העכבר מעליו) תקבלו את ההודעה הבאה:

רטט

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

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

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

שיטות מומלצות לשיפור חוויית המשתמש

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

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

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

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

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

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

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

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

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

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

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

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

מה השלב הבא?

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

שיעורי Lab קוד

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