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

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

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

  1. הוספת הלוגיקה בצד הלקוח כדי להירשם לעדכוני דחיפה של משתמש (כלומר, ה-JavaScript והממשק המשתמש באפליקציית האינטרנט שמרשמים משתמש לקבלת הודעות דחיפה).
  2. קריאת ה-API מהקצה העורפי או מהאפליקציה שמפעילה הודעת דחיפה למכשיר של משתמש.
  3. קובץ ה-JavaScript של Service Worker שיקבל 'אירוע push' כשהדחיפה תגיע למכשיר. בקוד ה-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=="
  }
}

נקודת הקצה (endpoint) במקרה הזה היא [https://random-push-service.com/some-kind-of-Unique-id-1234/v2/]. שירות ה-push יהיה 'random-push-service.com' וכל נקודת קצה היא ייחודית למשתמש, ומסומנת בתור 'some-kind-of-unique-id-1234'. אפשר לראות את הדפוס הזה בתחילת העבודה עם הדחיפה.

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

איך נראה ה-API?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

כשהודעה נשלחת משירות דחיפה למכשיר של משתמש, ה-Service Worker מקבל אירוע דחיפה

זה כל מה שצריך כדי להעביר הודעות דחיפה.

לאן ממשיכים

Codelabs