בתחילת 2015 השקנו את התכונות 'הודעות דחיפה' ו'התראות' ב-Chrome ל-Android ולמחשב. זה היה צעד משמעותי קדימה באינטרנט. המשתמשים יכולים להתחיל להתנסות בצורה מעמיקה יותר בחוויית השימוש באינטרנט גם כשהדפדפן סגור.
נהדר שאפשר לשלוח את ההודעות האלה, אבל הדבר היחיד שאפשר לעשות עם אחת מהן הוא ללחוץ עליה ולפתוח דף או לסגור אותה לגמרי.
אם תבחנו את ההתראות שמוצגות באופן מקורי באפליקציות בפלטפורמות לנייד כמו iOS ו-Android, תראו שבכל אחת מהן המפתח יכול להגדיר פעולות לפי הקשר שהמשתמש יכול להפעיל ולנהל איתן אינטראקציה. ב-Chrome 48 הוספנו יכולת דומה להתראות אינטרנט במחשב וב-Chrome ל-Android.
ההוספה ל-API היא די פשוטה. פשוט יוצרים מערך של פעולות ומוסיפים אותן לאובייקט NotificationOptions
כשקוראים ל-showNotification
מרישום של ServiceWorker (באופן ישיר ב-ServiceWorker או בדף דרך navigator.serviceWorker.ready
).
נכון לעכשיו, ב-Chrome אפשר לבצע רק שתי פעולות בכל התראה.
יכול להיות שחלק מהפלטפורמות תומכות בפורמטים נוספים, וחלק מהפלטפורמות תומכות בפחות פורמטים או לא תומכות בכלל. אפשר לבדוק את התמיכה בפלטפורמה בקטע Notification.maxActions
. בדוגמאות הבאות נניח שהפלטפורמה תומכת בשתי פעולות.
self.registration.showNotification('New message from Alice', {
actions: [
{action: 'like', title: 'Like'},
{action: 'reply', title: 'Reply'}]
});
כך תיווצר התראה פשוטה עם שני לחצנים. לתשומת ליבכם: אי אפשר להוסיף סמלים ישירות לפעולה (עדיין), אבל אפשר להשתמש בסמלי אמוג'י ובקבוצת התווים המורחבת של Unicode כדי להוסיף הקשר נוסף ללחצני ההתראות.
לדוגמה:
self.registration.showNotification("New message from Alice", {
actions: [
{action: 'like', title: '👍Like'},
{action: 'reply', title: '⤻ Reply'}]
});
עכשיו, אחרי שיצרתם התראה והפכתם אותה למגניבה 😻, יכול להיות שהמשתמש יתקשר עם ההתראה מתישהו בעתיד. כל האינטראקציות עם ההתראה (נכון ל-Chrome 48) מתבצעות דרך האירוע notificationclick
שמירת ב-service worker, והן יכולות להיות לחיצה כללית על ההתראה או הקשה ספציפית על אחד מלחצני הפעולה. הערה: בעתיד תוכלו גם להשיב לאירועnotificationclose.
כדי להבין איזו פעולה המשתמש ביצע, צריך לבדוק את המאפיין action
באירוע. לאחר מכן, אפשר לפתוח דף חדש כדי שהמשתמש יוכל להשלים פעולה או לבצע את המשימה ברקע.
self.addEventListener('notificationclick', function(event) {
var messageId = event.notification.data;
event.notification.close();
if (event.action === 'like') {
silentlyLikeItem();
}
else if (event.action === 'reply') {
clients.openWindow("/messages?reply=" + messageId);
}
else {
clients.openWindow("/messages?reply=" + messageId);
}
}, false);
העניין המעניין הוא שהפעולות לא חייבות לפתוח חלון חדש, הן יכולות לבצע אינטראקציות כלליות באפליקציה בלי ליצור ממשק משתמש. לדוגמה, משתמש יכול להביע 'לייק' או 'מחיקה' לפרסום ברשתות החברתיות, והפעולה תתבצע בנתונים המקומיים של המשתמש ולאחר מכן תתבצע סנכרון עם הענן בלי לפתוח ממשק משתמש (למרות שמומלץ לשלוח הודעה על שינוי הנתונים לכל החלונות הפתוחים כדי לעדכן את ממשק המשתמש). אם מדובר בפעולה שדורשת אינטראקציה של המשתמש, צריך לפתוח חלון כדי שהמשתמש יוכל להשיב.
הפלטפורמות לא תומכות באותו מספר פעולות, ובמקרים מסוימים הן לא תומכות בלחצני פעולה של התראות בכלל. לכן, תמיד צריך לספק חלופה הגיונית למשימות שהמשתמשים אמורים לבצע אם הם לוחצים על ההתראה.
כדי לראות את התכונה הזו בפעולה כבר היום, אפשר לעיין בהדוגמה של Peter Beverloo לבדיקה של התראות ולקרוא את המפרט של ההתראות או לעקוב אחרי המפרט בזמן שהוא מתעדכן.