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