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

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

Kayce Basques

מהן התראות?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

מקבלים הרשאה לשלוח הודעות דחיפה. אחזור של PushSubscription. שולחים את PushSubscription לשרת.

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

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

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

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

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

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

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

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

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

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

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

הצפנת הודעת ה-push

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

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

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

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

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

התאמה אישית של העברת ההודעה

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

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

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

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

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

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

ההודעה מגיעה למכשיר. קובץ השירות (service worker) של הדפדפן יוצא ממצב שינה. אירוע הדחיפה נשלח.

לאן ממשיכים

Codelabs