איך דחיפת הודעות עובדת

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

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

  1. הוספת הלוגיקה בצד הלקוח כדי לרשום משתמש להתראות (כלומר, ה-JavaScript וממשק המשתמש באפליקציית האינטרנט שרושמים משתמש להתראות).
  2. הקריאה ל-API מה-back-end או מהאפליקציה שמפעילה הודעת Push למכשיר של המשתמש.
  3. קובץ ה-JavaScript של ה-Service Worker שיקבל "אירוע התראה" כשההתראה תגיע למכשיר. בקוד ה-JavaScript הזה תוכלו להציג התראה.

בואו נבחן מה כל אחד מהשלבים האלה כולל בפירוט רב יותר.

שלב 1: בצד הלקוח

השלב הראשון הוא "לצרף" משתמש להודעות דחיפה.

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

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

כל זה נעשה ב-JavaScript באמצעות Push API.

Browser Support

  • Chrome: 42.
  • Edge: 17.
  • Firefox: 44.
  • Safari: 16.

Source

לפני שרושמים משתמש, צריך ליצור קבוצה של "מפתחות שרת אפליקציות", שעליהם נדבר בהמשך.

המפתחות של שרת האפליקציה, שנקראים גם מפתחות VAPID, הם ייחודיים לשרת שלכם. הם מאפשרים לשירות ההתראות לדעת איזה שרת אפליקציות רשם משתמש, ולוודא שזה אותו שרת שמפעיל את ההתראות לאותו משתמש.

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

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

שלב 2: שולחים הודעת Push

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

כמה שאלות שאולי אתם שואלים את עצמכם:

  • מהו שירות ההתראות ומי מספק אותו?
  • איך נראה ה-API? האם זה JSON,‏ XML או משהו אחר?
  • מה אפשר לעשות באמצעות ה-API?

מהו שירות ההתראות ומי מספק אותו?

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

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

כדי לקבל את כתובת ה-URL המתאימה להפעלת הודעת Push (כלומר כתובת ה-URL של שירות ה-Push), צריך רק להסתכל על הערך של endpoint ב-PushSubscription.

בהמשך מוצגת דוגמה לערכים שתקבלו מ-PushSubscription:

{
  "endpoint": "https://random-push-service.com/some-kind-of-unique-id-1234/v2/",
  "keys": {
    "p256dh": "BNcRdreALRFXTkOOUHK1EtK2wtaz5Ry4YfYCA_0QTpQtUbVlUls0VJXg7A8u-Ts1XbjhazAkj7I99e8QcYP7DkM=",
    "auth": "tBHItJI5svbpez7KI4CCXg=="
  }
}

נקודת הקצה במקרה הזה היא https://random-push-service.com/some-kind-of-unique-id-1234/v2/. שירות ההתראות יהיה random-push-service.com וכל נקודת קצה תהיה ייחודית למשתמש, ותצוין באמצעות some-kind-of-unique-id-1234. כשתתחילו לעבוד עם התראות, תבחינו בתבנית הזו.

בהמשך נסביר על המפתחות במינוי.

איך נראה ה-API?

ציינתי שכל שירות התראות באינטרנט מצפה לאותה קריאה ל-API. ה-API הזה הוא Web Push Protocol. זהו תקן IETF שמגדיר איך לבצע קריאה ל-API לשירות התראות.

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

מה אפשר לעשות באמצעות ה-API?

ה-API מאפשר לשלוח הודעה למשתמש, עם או בלי נתונים, ומספק הוראות איך לשלוח את ההודעה.

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

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

ההוראות כוללות פרטים כמו:

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

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

  • נותנים להודעת Push שם של "נושא" שיחליף כל הודעה בהמתנה בהודעה החדשה הזו.

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

שלב 3: אירוע שליחה במכשיר של המשתמש

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

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

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

Service Worker הוא קובץ JavaScript "מיוחד". הדפדפן יכול להריץ את קוד ה-JavaScript הזה גם אם הדף לא פתוח. הוא יכול להריץ את ה-JavaScript הזה גם כשהדפדפן סגור. ל-Service Worker יש גם ממשקי API, כמו push, שלא זמינים בדף האינטרנט (כלומר, ממשקי API שלא זמינים מחוץ לסקריפט של Service Worker).

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

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

זה כל התהליך של הודעות דחיפה.

לאן ממשיכים מכאן

Code Labs