בתחילת 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. הן יכולות להיות קליק כללי על ההתראה או הקשה ספציפית על אחד מלחצני הפעולה. הערה צדדית: בעתיד תהיה לך גם אפשרות להשיב לאירועההתראה.
כדי להבין איזו פעולה המשתמש ביצע, צריך לבדוק את המאפיין 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's Notification Test Harnes ולקרוא את מפרט ההתראות או לפעול לפי המפרט תוך כדי עדכון.