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

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

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

  1. הוספת הלוגיקה בצד הלקוח כדי להירשם כמנוי של משתמש ל-push (כלומר, ה-JavaScript והממשק המשתמש באפליקציית האינטרנט שמרשמים משתמש להודעות push).
  2. קריאת ה-API מהקצה העורפי או מהאפליקציה שמפעילה הודעת דחיפה למכשיר של המשתמש.
  3. קובץ ה-JavaScript של ה-service worker שיקבל 'אירוע דחיפה' כשהדחיפה תגיע למכשיר. בקוד ה-JavaScript הזה תוכלו להציג התראה.

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

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

השלב הראשון הוא 'להירשם' למשתמש להודעות דחיפה.

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

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

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

תמיכה בדפדפנים

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

מקור

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

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

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

חשוב לשלוח את PushSubscription לקצה העורפי.

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

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

יכול להיות שאלה השאלות שתעמדו בפניכם:

  • מהו שירות ה-push ומי הוא?
  • איך נראה ה-API? האם זה JSON,‏ XML או משהו אחר?
  • מה ה-API יכול לעשות?

מהו שירות ה-push ומי הוא?

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

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

כדי לקבל את כתובת ה-URL המתאימה להפעלת הודעת דחיפה (כלומר כתובת ה-URL של שירות הדחיפה), פשוט צריך לבדוק את הערך של 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/]. שירות ה-push יהיה 'random-push-service.com' וכל נקודת קצה היא ייחודית למשתמש, ומסומנת בתור 'some-kind-of-unique-id-1234'. כשתתחילו לעבוד עם Push, תבחינו בתבנית הזו.

המפתחות במינוי יפורטו בהמשך.

איך נראה ה-API?

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

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

מה ה-API יכול לעשות?

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

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

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

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

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

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

  • נותנים להודעת ה-push שם 'נושא', וההודעה החדשה תחליף את כל ההודעות בהמתנה.

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

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

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

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

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

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

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

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

זהו התהליך המלא של שליחת הודעות Push.

לאן ממשיכים

Code labs