התראות Push מאפשרות לכם לספק למשתמשים חוויה מעולה כמו באפליקציה, ולהתריע להם על עדכונים חשובים בזמן אמת, כמו הודעות צ'אט נכנסות. פלטפורמת ההתראות חדשה יחסית בדפדפנים, וככל שאנחנו מפתחים יותר ויותר תרחישי שימוש ודרישות, אנחנו מוסיפים עוד ועוד לממשקי ה-API של ההתראות. גם גרסת Chrome 50 (בטא במרץ 2016) לא יוצאת דופן, עם לא פחות מארבעה פיצ'רים חדשים שמעניקים למפתחים שליטה רבה יותר על ההתראות. תוכלו:
- להוסיף סמלים ללחצני התראות,
- לשנות את חותמת הזמן כדי ליצור חוויה עקבית,
- לעקוב אחרי אירועי סגירה של התראות כדי לסנכרן את ההתראות ולספק ניתוח נתונים,
- ניהול חוויית ההתראה החוזרת כשהתראה מחליפה את ההתראה המוצגת כרגע.
ב-Chrome 50 נוספו גם מטענים חיים להתרעות דחיפה. כדי להתעדכן ב-Notifications API כפי שהוא מוטמע ב-Chrome, כדאי לעיין במפרט ובכלי למעקב אחר בעיות במפרט.
יצירת לחצני פעולה מרתקים עם סמלים מותאמים אישית
בפוסט האחרון שלי על לחצני פעולה בהתראות ב-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 עדיין לא מנותב דרך קובץ השירות).
אירועי סגירה של התראות
בקשה נפוצה לגבי התראות היא לדעת מתי המשתמש סגר התראה. לא הייתה לנו אפשרות לעשות זאת עד שקבוצת השינויים האחרונה במפרט ההתראות הוסיפה את האירוע notificationclose.
בעזרת האירוע notificationclick והאירוע notificationclose תוכלו להבין איך המשתמשים מקיימים אינטראקציה עם ההתראות שלכם. האם הם משאירים אותן פתוחות במשך זמן רב ואז סוגרים אותן באופן פעיל, או שהם פועלים עליהן מיד.
תרחיש לדוגמה פופולרי הוא סנכרון התראות בין מכשירים. אם המשתמש סוגר התראה במחשב, אותה התראה אמורה להיסגר גם בנייד. עדיין אין לנו אפשרות לעשות זאת בשקט (חשוב לזכור שכל הודעת דחיפה חייבת לכלול התראה מוצגת), אבל באמצעות notificationclose תוכלו לעקוב אחרי מצב ההתראות של המשתמש בשרת ולסנכרן אותו עם המכשירים האחרים בזמן שהמשתמש משתמש בהם.
כדי להשתמש באירוע notificationclose, צריך לרשום אותו ב-service worker. הוא יופעל רק אם המשתמש סוגר הודעה באופן פעיל, למשל אם הוא סוגר הודעה ספציפית או סוגר את כל ההתראות שבמגש (ב-Android).
אם הדגל requireInteraction הוא false או לא מוגדר, אם ההתראה לא תיסגר באופן ידני על ידי המשתמש אלא באופן אוטומטי על ידי המערכת, האירוע notificationclose לא יופעל.
בהמשך מוצגת הטמעה פשוטה. כשהמשתמש סוגר את ההתראה, אתם מקבלים גישה לאובייקט ההתראה, שממנו תוכלו לבצע לוגיקה מותאמת אישית.
self.addEventListener('notificationclose', e => console.log(e.notification));
אפשר לבדוק את זה בכלי ליצירת התראות. תקבלו התראה כשתסגרו את ההתראה.
אל תטרידו את המשתמשים כשאתם מחליפים התראה קיימת
אני די בטוח שדוד בנג'י דיבר על מערכת ההתראות ולא על הכוחות של פיטר פארקר כשאמר "עם כוח גדול מגיעות אחריות גדולה". מערכת ההתראות היא אמצעי יעיל ליצירת אינטראקציה עם משתמשים. אם תשתמשו לרעה באמון שלהם, הם ישביתו את כל ההתראות ואתם עלולים לאבד אותם לגמרי.
כשיוצרים התראה, אפשר להגדיר לה התראה קולית או רטט כדי למשוך את תשומת הלב של המשתמש. בנוסף, אפשר להחליף התראה קיימת על ידי שימוש חוזר במאפיין 'תג' שלה באובייקט התראה חדש.
לפני Chrome 50, בכל פעם שיצרתם התראה או החלפתם התראה קיימת, המערכת הפעילה דפוס רטט או הפעלה התראה קולית, וזה יכול היה לגרום לתסכול בקרב המשתמשים. עכשיו ב-Chrome 50, יש לכם שליטה על מה שקורה במהלך ההתראה החוזרת באמצעות דגל בוליאני פשוט שנקרא 'renotify'. התנהגות ברירת המחדל החדשה כשמשתמשים באותו 'תג' להתראות הבאות היא להימנע מהצגת התראות. המפתחים צריכים להביע הסכמה ל'הצגת התראה חוזרת' למשתמש על ידי הגדרת הדגל לערך 'true'.
self.registration.showNotification('Oi!', {
'renotify': true,
'tag': 'tag-id-1'
});
אפשר לנסות את זה בכלי ליצירת התראות.
ניהול חותמת הזמן שמוצגת למשתמש
ב-Android, כברירת מחדל, זמני היצירה של ההתראות ב-Chrome מוצגים בפינה השמאלית העליונה. לצערנו, יכול להיות שהשעה הזו לא תהיה השעה שבה ההתראה נוצרה בפועל על ידי המערכת. לדוגמה, יכול להיות שהאירוע הופעל כשהמכשיר היה במצב אופליין, או שההתראה מוצגת לגבי פגישה שצפויה בקרוב. החל מגרסה 50 של Chrome, נוסף לממשק המשתמש של Chrome מאפיין חדש בשם חותמת זמן שמאפשר למפתחים לציין את השעה שצריכה להופיע בהתראה.
self.registration.showNotification('Best day evar!', {
'timestamp': 360370800000
});
חותמת הזמן מוצגת כרגע רק ב-Chrome ל-Android. הוא לא גלוי במחשב, אבל ישפיע על סדר ההתראות גם בנייד וגם במחשב.