התראות PPush מאפשרות לכם לספק למשתמשים חוויה נהדרת, דמויית אפליקציה, ולהציג להם התראות על עדכונים חשובים ועדכניים, כמו הודעות צ'אט נכנסות. פלטפורמת ההתראות חדשה יחסית בדפדפנים, וככל שנוספים עוד ועוד תרחישים ודרישות לשימוש, אנחנו רואים תוספות רבות לממשקי ה-API להתראות. Chrome 50 (בטא במרץ 2016) אינו יוצא מן הכלל, עם לא פחות מארבע תכונות חדשות שמאפשרות למפתחים שליטה רבה יותר בהתראות. מקבלים את היכולת:
- להוסיף סמלים ללחצני התראות,
- לשנות את חותמת הזמן כדי ליצור חוויה עקבית,
- לעקוב אחרי אירועי סגירת התראות כדי לעזור לסנכרן התראות ולספק ניתוח נתונים,
- לנהל את חוויית שליחת ההתראה מחדש כאשר התראה מחליפה את ההתראה שמוצגת כרגע.
ב-Chrome 50 נוספו גם מטענים ייעודיים (payloads) להתראות שנשלחות מהאפליקציה. כדי להתעדכן לגבי השימוש ב-Notification API שמוטמע ב-Chrome, צריך לפעול לפי הspec והכלי למעקב אחר בעיות במפרטים.
יצירת לחצני פעולה מושכים באמצעות סמלים מותאמים אישית
בפוסט שפרסמתי לאחרונה על לחצני פעולה לשליחת התראות ב-Chrome 49, ציינתי שלא ניתן לצרף תמונות ללחצני התראות כדי להפוך אותן לנעימות ומושכות, אבל אפשר להשתמש בתווי Unicode כדי להטביע סמלי אמוג'י וכו'. עכשיו אין צורך לדאוג: בעזרת התוספת האחרונה הזו תוכלו להוסיף תמונה על לחצן הפעולה:
self.registration.showNotification('New message from Alice', {
actions: [
{action: 'like', title: 'Like', icon: 'https://example/like.png'},
{action: 'reply', title: 'Reply', icon: 'https://example/reply.png'}]
});
המראה של סמל הפעולה משתנה בהתאם לפלטפורמה. לדוגמה, ב-Android הסמל יכלול מסנן אפור כהה ב-Lollipop ומעלה, ומסנן לבן יהיה לפני Lollipop. לעומת זאת, במחשב הוא יופיע בצבע מלא. (הערה: מתקיים דיון לגבי העתיד של האפשרות הזו במחשב.) יכול להיות שבפלטפורמות מסוימות לא יופיעו סמלי פעולות, לכן חשוב להשתמש בסמלים כדי לספק הקשר לפעולה ולא כמדד היחיד לכוונה.
לסיום, מכיוון שצריך להוריד את המשאבים, מומלץ לשמור על הסמלים קטנים ככל האפשר ולשמור אותם מראש באירוע ההתקנה. (נכון להיום, שליפה של משאבי התראות ב-Chrome עוד לא מנותבת דרך ה-Service Worker.)
אירועי סגירת התראות
אחת התכונות הנפוצות של ההתראות היא האפשרות לדעת מתי המשתמש סגר את ההתראה. לא הייתה לנו דרך לעשות זאת עד שבקבוצת שינויים מהזמן האחרון במפרט ההתראות נוספה אירוע notificationclose.
תוכלו להבין את האינטראקציה של המשתמשים עם ההתראות על ידי שימוש ב-alertclick ובאירוע notificationclose. האם הם משאירים אותם פתוחים למשך זמן רב ולאחר מכן דוחים אותם באופן פעיל או האם הם פועלים בהם באופן מיידי.
אחד התרחישים הנפוצים הוא היכולת לסנכרן התראות בין מכשירים. אם משתמשים סוגרים התראה במחשב, צריך לסגור את אותה התראה במכשיר הנייד. עדיין אין לנו את היכולת לבצע את הפעולה בשקט (חשוב לזכור שבכל הודעת Push צריכה להופיע התראה), אבל בסגירה של התראה נפתחת היכולת לטפל בה. לשם כך, אפשר לעקוב אחרי מצב ההתראות בשרת ולסנכרן את הנתונים עם המכשירים האחרים כשהמשתמשים משתמשים בהם.
כדי להשתמש באירוע התראת הסגירה, צריך לרשום אותו בתוך קובץ השירות (service worker) והוא יופעל רק כשהמשתמש יסגור את ההתראה באופן פעיל. לדוגמה, אם משתמש סוגר התראה ספציפית או סוגר את כל ההתראות שבמגש (ב-Android).
אם הסימון requiredInteraction מוגדר כ-False או לא מוגדר, ואם ההתראה לא נסגרת באופן ידני על ידי המשתמש אלא באופן אוטומטי על ידי המערכת, האירוע notificationclose לא יופעל.
למטה מוצג הטמעה פשוטה. כשהמשתמש סוגר את ההתראה, מקבלים גישה לאובייקט ההתראות שממנו אפשר לבצע לוגיקה בהתאמה אישית.
self.addEventListener('notificationclose', e => console.log(e.notification));
אפשר לבדוק את זה במחולל ההתראות – תקבלו התראה כשתסגרו את ההתראה.
לא להטריד את המשתמשים כשמחליפים התראה קיימת
אני די בטוח שהדוד בן דיבר על מערכת ההתראות ולא על הכוח של פיטר פארקר כשאמר "כשכוח גדול מגיע אחריות גדולה". מערכת ההתראות היא אמצעי רב-עוצמה לאינטראקציה עם משתמשים. אם תנצלו לרעה את האמון שלהם, הם ישביתו את כל ההתראות וייתכן שתאבדו אותן לחלוטין.
כשיוצרים התראה, אפשר להגדיר אותה לצליל או לרטט כדי למשוך את תשומת הלב של המשתמשים. בנוסף, אפשר להחליף התראה קיימת על ידי שימוש חוזר במאפיין 'tag' באובייקט התראה חדש.
בגרסאות ישנות יותר מ-Chrome 50, בכל פעם שיוצרים הודעה או מחליפים הודעה קיימת, הופעל דפוס רטט או יושמע צליל התראה. מצב כזה עלול לגרום לתסכול בקרב המשתמשים. ב-Chrome 50, יש לכם עכשיו שליטה על מה שקורה במהלך ההודעה החוזרת, באמצעות סימון בוליאני פשוט שנקרא 'renotify'. ההתנהגות החדשה שמוגדרת כברירת מחדל כשמשתמשים באותו 'תג' להתראות הבאות היא שקטה, ובתור המפתח, עליכם להביע הסכמה "להודיע מחדש" למשתמש על ידי הגדרת הסימון כ-"true".
self.registration.showNotification('Oi!', {
'renotify': true,
'tag': 'tag-id-1'
});
אפשר לנסות את זה במחולל ההתראות.
ניהול חותמת הזמן שמוצגת למשתמש
כברירת מחדל, זמני היצירה של ההתראות של Chrome ב-Android מוצגים בפינה השמאלית העליונה. לצערנו, ייתכן שלא זו השעה שבה המערכת שלכם יצרה בפועל את ההתראה. לדוגמה, יכול להיות שהאירוע הופעל כשהמכשיר היה אופליין או שתוצג התראה לגבי פגישה קרובה. החל מגרסה 50 של Chrome, נוסף מאפיין חותמת זמן חדש ל-Chrome שמאפשר למפתחים לציין את השעה שאמורה להופיע בהודעה.
self.registration.showNotification('Best day evar!', {
'timestamp': 360370800000
});
חותמת הזמן גלויה כרגע רק ב-Chrome ל-Android. למרות שלא ניתן לראות אותו במחשב, הוא ישפיע על סדר ההתראות בנייד ובמחשב.
.