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

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

Kayce Basques

Matt Gaunt

מהן התראות?

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

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

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

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

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

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

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

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

בהמשך הדף מפורטים השלבים האלה.

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

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

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

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

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

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

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

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

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

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

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

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

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

הדומיין של endpoint הוא למעשה שירות הדחיפה. הנתיב של endpoint הוא מידע על מזהה הלקוח שעוזר לשירות הדחיפה לקבוע בדיוק לאיזה לקוח לדחוף את ההודעה.

מפתחות keys משמשים להצפנה, כמו שמוסבר בהמשך.

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

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

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

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

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

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

התאמה אישית של אופן המסירה של הודעת הפוש

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

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

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

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

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

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

לאן כדאי ללכת

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

Code labs

• איך יוצרים לקוח של התראות פוש
• פיתוח שרת של התראות פוש