סקירה כללית של התראות

סקירה כללית על התראות, למה כדאי להשתמש בהן ואיך הן פועלות.

Kayce Basques

Matt Gaunt

מהן התראות?

הודעות דחיפה מאפשרות לך להביא מידע לתשומת הלב של המשתמשים שלך, גם כשהם לא משתמשים באתר שלך. הן נקראות push כי הן יכולות "לדחוף" מידע למשתמשים גם כשהם לא פעילים. כדי להבין טוב יותר את המושג הזה, צריך להשוות בין טכנולוגיית Push ל-Pull Technology.

התראות מציגות למשתמש מקטעים קטנים של מידע. אתרים יכולים להשתמש בהתראות כדי לעדכן את המשתמשים על אירועים חשובים שחשוב לזכור, או על פעולות שהם צריכים לבצע. העיצוב והסגנון של ההתראות משתנים בהתאם לפלטפורמה:

דוגמאות להתראות ב-macOS וב-Android.

הודעות והתראות הן שתי טכנולוגיות נפרדות, אך משלימות. Push הוא הטכנולוגיה לשליחת הודעות מהשרת למשתמשים גם כשהם לא משתמשים באתר באופן פעיל. התכונה 'התראות' היא הטכנולוגיה להצגת המידע שנדחף במכשיר של המשתמש. אפשר להשתמש בהתראות בלי להעביר הודעות Push. ביום מסוים תוכלו גם להשתמש בהודעות Push בלי התראות שמוצגות למשתמשים (התראות שקטות), אבל הדפדפנים לא מאפשרים זאת כרגע. בפועל, לרוב משתמשים בהן יחד. משתמש לא טכני כנראה לא יבין את ההבדל בין הודעות דחיפה להתראות. בדוגמה הזו, כשאומרים התראות, אנחנו מתכוונים לשילוב של שליחת הודעה ואחריה הצגתה כהתראה. המונח הודעות Push מתייחס לטכנולוגיה של דחיפה בפני עצמה. כשאנחנו אומרים התראות, אנחנו מתייחסים לטכנולוגיית התראות לבדה.

למה כדאי להשתמש בהתראות?

• מבחינת המשתמשים, התראות הן דרך לקבל מידע בזמן, רלוונטי ומדויק.
• במקרה שלכם (בעלי האתר), התראות הן דרך להגביר את מעורבות המשתמשים.

אזהרה: אם תנסו להשתמש בהתראות כדי לקבל התראות על תוכן שהמשתמשים שלכם לא חושבים שהוא עדכני, רלוונטי ומדויק, יכול להיות שבסופו של דבר תרגשו את המשתמשים ותפחיתו את המעורבות הכוללת שלהם.

איך פועלות התראות?

ככלל, השלבים העיקריים להטמעת התראות הם:

1. הוספת לוגיקת לקוח על מנת לבקש מהמשתמש הרשאה לשלוח התראות, ואז שליחת מידע של מזהי לקוח לשרת שלכם לצורך אחסון במסד נתונים.
2. הוספת לוגיקת שרת לדחיפת הודעות למכשירי לקוח.
3. הוספת לוגיקת לקוח לקבלת הודעות שנדחפו למכשיר והצגתן כהתראות.

שאר הדף הזה מכיל הסבר מפורט על השלבים האלה.

קבלת הרשאה לשליחת התראות

קודם כל, האתר צריך לקבל הרשאה מהמשתמש לשליחת התראות. צריך להפעיל אותה על ידי תנועת משתמש, כמו לחיצה על הלחצן Yes (כן) ליד ההודעה Do you want to receive push notifications?. אחרי האישור, מתקשרים אל Notification.requestPermission(). סביר להניח שמערכת ההפעלה או הדפדפן במכשיר של המשתמש יציגו סוג כלשהו של ממשק משתמש כדי לאשר באופן רשמי שהמשתמש מעוניין להביע הסכמה לקבלת התראות. ממשק המשתמש הזה משתנה בפלטפורמות שונות.

רישום הלקוח לקבלת התראות

אחרי שתקבלו הרשאה, האתר שלכם צריך להתחיל את תהליך ההרשמה של המשתמש לקבלת התראות. אפשר לעשות זאת באמצעות JavaScript באמצעות Push API. תצטרכו לספק מפתח אימות ציבורי בתהליך המינוי. תוכלו לקרוא מידע נוסף בהמשך. אחרי שמתחילים את תהליך המינוי, הדפדפן שולח בקשת רשת לשירות אינטרנט שנקרא 'שירות דחיפה'. תוכלו לקרוא עליו גם בהמשך.

בהנחה שהמינוי הצליח, הדפדפן יחזיר אובייקט PushSubscription. צריך לאחסן את הנתונים האלה לטווח ארוך. בדרך כלל זה נעשה על ידי שליחת המידע לשרת שבשליטתכם, ולאחר מכן בקשה לשרת לאחסן אותו במסד הנתונים.

שליחת הודעה בדחיפה

השרת שלכם לא שולח את הודעת הדחיפה ישירות ללקוח. שירות Push עושה את זה. שירות Push הוא שירות אינטרנט שנשלט על ידי ספק הדפדפן של המשתמש. כשרוצים לשלוח התראה ללקוח, צריך לשלוח בקשת שירות אינטרנט לשירות Push. הבקשה של שירות האינטרנט ששולחים לשירות ה-Push נקראת בקשה לפרוטוקול Web Push. הבקשה של פרוטוקול דחיפת האינטרנט צריכה לכלול:

• אילו נתונים לכלול בהודעה.
• לאיזה לקוח צריך לשלוח את ההודעה.
• הוראות לאופן שבו שירות ה-Push צריך להעביר את ההודעה. לדוגמה, תוכלו לציין ששירות ה-Push צריך להפסיק לנסות לשלוח את ההודעה אחרי 10 דקות.

בדרך כלל שולחים את הבקשה לפרוטוקול דחיפה באינטרנט דרך שרת שבשליטתכם. כמובן שהשרת שלכם לא צריך ליצור בעצמו את הבקשה של שירות האינטרנט הגולמי. יש ספריות שיכולות לטפל בזה בשבילכם, כמו web-push-libs. אבל המנגנון הבסיסי הוא בקשה של שירות אינטרנט באמצעות HTTP.

שירות ה-Push מקבל את הבקשה, מאמת אותה ומנתב את ההודעה בדחיפה ללקוח המתאים. אם הדפדפן של הלקוח במצב אופליין, שירות ה-push יכניס את ההודעה לתור עד שהדפדפן יתחבר לאינטרנט.

כל דפדפן משתמש בכל שירות דחיפה שהוא רוצה. לכם, כמפתחי אתרים, אין שליטה על כך. זו לא בעיה כי הבקשה של פרוטוקול דחיפה ל-Web היא סטנדרטית. במילים אחרות, לא צריך לדעת באיזה שירות דחיפה משתמש ספק הדפדפן. צריך רק לוודא שהבקשה של פרוטוקול ה-web Push תואמת למפרט. בין היתר, במפרט מצוין שהבקשה צריכה לכלול כותרות מסוימות והנתונים צריכים להישלח בתור זרם של בייטים.

עם זאת, עליכם לוודא שאתם שולחים את הבקשה לפרוטוקול Web Push לשירות הדחיפה הנכון. נתוני PushSubscription שהדפדפן החזיר לכם בתהליך המינוי מספקים את המידע הזה. אובייקט PushSubscription נראה כך:

{
  "endpoint": "https://fcm.googleapis.com/fcm/send/c1KrmpTuRm…",
  "expirationTime": null,
  "keys": {
    "p256dh": "BGyyVt9FFV…",
    "auth": "R9sidzkcdf…"
  }
}

הדומיין של endpoint הוא בעצם שירות ה-Push. הנתיב של endpoint הוא מידע של מזהה הלקוח שעוזר לשירות ה-Push לקבוע בדיוק לאיזה לקוח להעביר את ההודעה.

השדות keys משמשים להצפנה. מוסבר בשלב הבא.

הצפנה של הודעת הדחיפה

הנתונים שאתם שולחים לשירות Push חייבים להיות מוצפנים. הבעיה הזו מונעת משירות ה-Push לראות את הנתונים שאתם שולחים ללקוח. חשוב לזכור שספק הדפדפן מחליט באיזה שירות דחיפה להשתמש, ושתיאורטית שירות הדחיפה עלול להיות לא בטוח או לא מאובטח. השרת שלכם צריך להשתמש ב-keys שסופק ב-PushSubscription כדי להצפין את הבקשות שלו לפרוטוקול אינטרנט בדחיפה.

חתימה על הבקשות לפרוטוקול אינטרנט Push

שירות ה-Push מאפשר למנוע מאחרים לשלוח הודעות למשתמשים. מבחינה טכנית לא צריך לעשות זאת, אבל היישום הפשוט ביותר ב-Chrome מחייב זאת. אם משתמשים ב-Firefox, זו אפשרות אופציונלית. יכול להיות שדפדפנים אחרים יבקשו זאת בעתיד.

תהליך העבודה הזה כולל מפתח פרטי ומפתח ציבורי ייחודיים לאפליקציה שלכם. תהליך האימות פועל בערך כך:

• יוצרים את המפתח הפרטי והציבורי כמשימה חד-פעמית. השילוב של המפתח הפרטי והמפתח הציבורי נקרא מפתחות של שרת אפליקציות. יכול להיות גם שהשם של המפתחות הוא מפתחות VAPID. VAPID הוא המפרט שמגדיר את תהליך האימות הזה.
• כשרושמים לקוח לשליחת התראות מקוד JavaScript, צריך לספק את המפתח הציבורי. כששירות ה-Push יוצר endpoint עבור המכשיר, הוא משייך את המפתח הציבורי שסופק ל-endpoint.
• כששולחים בקשה לפרוטוקול אינטרנט בדחיפה, חותמים על פרטי JSON באמצעות המפתח הפרטי.
• כששירות ה-Push מקבל את הבקשה לפרוטוקול Push, הוא משתמש במפתח הציבורי המאוחסן כדי לאמת את המידע החתום. אם החתימה חוקית, שירות ה-Push יודע שהבקשה הגיעה משרת עם המפתח הפרטי התואם.

התאמה אישית של אופן השליחה של הודעת ה-Push

במפרט הבקשות לפרוטוקול Web Push מוגדרים גם פרמטרים שמאפשרים להתאים אישית את האופן שבו שירות ה-Push מנסה לשלוח את הודעת ה-Push ללקוח. לדוגמה, אפשר להתאים אישית את הדברים הבאים:

• אורך חיים (TTL) של הודעה, שמגדיר כמה זמן שירות הדחיפה ינסה להעביר הודעה.
• הדחיפות של ההודעה, שהיא שימושית אם שירות ה-push שומר על חיי הסוללה של הלקוח בכך שהוא מעביר רק הודעות עם עדיפות גבוהה.
• הנושא של ההודעה, שמחליף את כל ההודעות הממתינות באותו נושא בהודעה האחרונה.

קבלה והצגה של הודעות שנדחפו כהתראות

אחרי ששולחים את הבקשה לפרוטוקול דחיפה באינטרנט לשירות ה-Push, שירות ה-Push ישאיר את הבקשה בתור עד שמתרחש אחד מהאירועים הבאים:

1. הלקוח מגיע לאינטרנט ושירות ה-Push מעביר את ההודעה.
2. תוקף ההודעה יפוג.

כשדפדפן לקוח מקבל הודעה בדחיפה, הוא מפענח את הנתונים של ההודעה בדחיפה ושולח אירוע push אל ה-service worker. קובץ שירות (service worker) הוא בעצם קוד JavaScript שיכול לרוץ ברקע, גם כאשר האתר שלכם לא פתוח או כשהדפדפן סגור. ב-handler של האירועים push של ה-Service Worker מבצעים קריאה ל-ServiceWorkerRegistration.showNotification() כדי להציג את המידע כהודעה.

השלבים הבאים

• סקירה כללית של התראות באינטרנט
• איך Push פועל
• הרשמה של משתמש למינוי
• חוויית המשתמש עם ההרשאות
• שליחת הודעות באמצעות ספריות Push באינטרנט
• פרוטוקול Web Push
• טיפול באירועי Push
• הצגת התראה
• התנהגות התראות
• תבניות נפוצות של התראות
• שאלות נפוצות בנושא התראות בדחיפה
• בעיות נפוצות ודיווח על באגים

שיעורי Lab

• בניית לקוח התראות
• בניית שרת התראות