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

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

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

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

בואו נסתכל לעומק על כל אחד מהשלבים האלה.

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

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

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

PushSubscription מכיל את כל המידע הדרוש לנו כדי לשלוח הודעה למשתמש הזה. אפשר "סוג" זהו מזהה של המכשיר של המשתמש.

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

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

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

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

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

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

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

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

מי ומה זה שירות הדחיפה?

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

כל דפדפן יכול להשתמש בכל שירות דחיפה שהוא רוצה, זה דבר שלמפתחים אין שליטה עליו מעל. זו לא בעיה, כי כל שירות Push מצפה לאותה קריאה ל-API. משמעות לא צריך לחשוב מיהו שירות הדחיפה. צריך רק לוודא שהקריאה ל-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'. אפשר לראות את הדפוס הזה בתחילת העבודה עם הדחיפה.

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

איך נראה ה-API?

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

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

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

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

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

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

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

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

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

• הוספת 'נושא' להודעות דחיפה שם שיחליף כל הודעה ממתינה בהודעה חדשה זו.

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

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

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

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

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

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

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

מה השלב הבא?

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

שיעורי Lab קוד

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