סקירה כללית לגבי התראות, למה כדאי להשתמש בהן ואיך הן פועלות.
מהן התראות?
הודעות דחיפה מאפשרות לכם למשוך מידע גם כשהם לא משתמשים באתר שלכם. הן נקראות התראות כי אפשר לדחוף הודעות למשתמשים, גם כשהם לא פעיל. השוואת Push עם Pull טכנולוגיות כדי להבין את המונח עצמו.
התראות מציגות למשתמש מקטעי מידע קטנים. אתרים יכולים להשתמש התראות שנועדו לעדכן את המשתמשים על פעולות או אירועים חשובים שמתרחשים בזמן אמת שהמשתמש צריך לבצע. העיצוב והסגנון של ההתראות משתנים בין הפלטפורמות:
הודעות והתראות הן שתי טכנולוגיות נפרדות אך משלימות. דחיפה היא הטכנולוגיה לשליחת הודעות מהשרת שלכם למשתמשים גם כאשר הם לא משתמשים באתר שלכם באופן פעיל. ההתראות הן הטכנולוגיה הצגת המידע שנדחף במכשיר של המשתמש. אפשר להשתמש התראות ללא הודעות דחיפה. יום אחד אפשר גם להשתמש הודעות דחיפה ללא התראות למשתמש (דחיפה שקטה) אבל דפדפנים אינן מאפשרות כרגע את זה. בפועל, בדרך כלל משתמשים בהם יחד. משתמש לא טכני כנראה לא יבין את ההבדל בין דחיפה הודעות והתראות. באוסף הזה כאשר אנחנו אומרים התראות. אנחנו מתכוונים לשילוב של דחיפת הודעה ולאחר מכן להציג אותו כהתראה. כשאומרים הודעות דחיפה אנחנו מתכוונים לדחוף טכנולוגיה בפני עצמה. וכשאנחנו אומרים התראות אנחנו מתייחסים לטכנולוגיית התראות בפני עצמה.
למה כדאי להשתמש בהתראות
- מבחינת המשתמשים, התראות הן דרך לקבל התראות בזמן, רלוונטיות, ומידע מדויק.
- מבחינת בעלי האתר, התראות הן דרך להגדיל את מספר המשתמשים מעורבות.
איך פועלות התראות?
ברמה הכללית, השלבים העיקריים להטמעת התראות הם:
- הוספת לוגיקת לקוח כדי לבקש מהמשתמש הרשאה לשליחת התראות, וגם ואז לשלוח לשרת שלכם את פרטי מזהה הלקוח לצורך אחסון במסד נתונים.
- הוספת לוגיקת שרת לדחיפה של הודעות למכשירי לקוח.
- הוספת לוגיקת לקוח לקבלת הודעות שנדחו למכשיר ולהציג אותן כהתראות.
השלבים האלה מוסברים בפירוט בהמשך הדף.
קבלת הרשאה לשליחת התראות
קודם כול, האתר צריך לקבל הרשאה מהמשתמש לשליחת התראות.
הפעולה הזו צריכה להיות מופעלת באמצעות תנועת משתמש, כמו לחיצה על לחצן כן.
לצד הנחיה ב-Do you want to receive push notifications?. אחרי האישור,
קוראים לפונקציה Notification.requestPermission(). מערכת ההפעלה או
הדפדפן במכשיר של המשתמש כנראה יציג ממשק משתמש כלשהו כדי לאשר באופן רשמי
המשתמש רוצה להביע הסכמה לקבלת התראות. ממשק המשתמש הזה משתנה בהתאם לפלטפורמות.
הרשמה של הלקוח לקבלת התראות
אחרי שתקבלו הרשאה, האתר צריך להתחיל בתהליך של לרשום את המשתמש לקבלת התראות. אפשר לעשות את זה באמצעות JavaScript, באמצעות Push API. עליך לספק מפתח אימות ציבורי בתהליך ההרשמה, ונספק לכם מידע נוסף עליו בהמשך. אחרי התחלת תהליך ההרשמה, הדפדפן שולח בקשה לרשת לשירות אינטרנט שידוע כשירות דחיפה, שעליו תוסבר גם בהמשך.
בהנחה שההרשמה בוצעה בהצלחה, הדפדפן מחזיר
PushSubscription
לאובייקט. צריך לאחסן את הנתונים האלה לטווח ארוך.
בדרך כלל הדבר נעשה על ידי שליחת המידע לשרת שנמצא בשליטתכם.
ואז לשמור אותם במסד נתונים.
שליחת הודעה בדחיפה
השרת לא שולח את ההודעה ישירות ללקוח. א' שירות דחיפה עושה את זה. שירות Push הוא שירות אינטרנט הנשלט על ידי ספק הדפדפן של המשתמש. כשרוצים לשלוח התראה ללקוח שנחוץ לך כדי לשלוח בקשת דחיפה לשירות אינטרנט. שירות האינטרנט מבקש שאתם שולחים לשירות ה-Push נקראת בקשת פרוטוקול דחיפה באינטרנט. בקשת פרוטוקול Web Push צריכה לכלול:
- אילו נתונים לכלול בהודעה.
- לאיזה לקוח לשלוח את ההודעה.
- הוראות לאופן שבו שירות ה-Push אמור להעביר את ההודעה. לדוגמה, יכול לציין ששירות ה-Push צריך להפסיק לנסות לשלוח את ההודעה אחרי 10 דקות.
בדרך כלל שולחים את בקשת פרוטוקול דחיפת האינטרנט דרך שרת שנמצא בשליטתכם. כמובן שהשרת לא צריך ליצור את הבקשה הגולמית של שירות האינטרנט עצמו. יש ספריות שיכולות לטפל בזה בשבילכם, כמו web-push-libs. אבל המנגנון הבסיסי בבקשת שירות אינטרנט ב-HTTP.
שירות הדחיפה מקבל את הבקשה שלכם, מאמת אותה ומנתב את הדחיפה ללקוח המתאים. אם הדפדפן של הלקוח נמצא במצב אופליין, השירות מעביר את ההודעה לתור עד שהדפדפן יחובר לאינטרנט.
כל דפדפן משתמש בכל שירות Push שהוא רוצה. אתם כמפתחי אתרים אין להם שליטה על זה. זו לא בעיה כי פרוטוקול דחיפת האינטרנט הבקשה סטנדרטית. במילים אחרות, לא צריך לדעת איזו שירות דחיפה מספק הדפדפן באמצעות. צריך רק לוודא שבקשת פרוטוקול דחיפת האינטרנט שלך עומדת במפרט. בין היתר, במפרט מצוין שהבקשה חייבת לכלול כותרות מסוימות. והנתונים חייבים להישלח כזרם של בייטים.
עם זאת, עליך לוודא שאתה שולח את פרוטוקול דחיפה באינטרנט
לשלוח את הבקשה לשירות הדחיפה הנכון. הנתונים של PushSubscription ש
בדפדפן שהוחזר במהלך תהליך ההרשמה,
מידע. אובייקט PushSubscription נראה כך:
{
"endpoint": "https://fcm.googleapis.com/fcm/send/c1KrmpTuRm…",
"expirationTime": null,
"keys": {
"p256dh": "BGyyVt9FFV…",
"auth": "R9sidzkcdf…"
}
}
הדומיין של endpoint הוא בעצם שירות ה-Push. הנתיב של
endpoint הוא פרטי מזהה לקוח שעוזרים לשירות ה-push
לאיזה לקוח בדיוק להעביר את ההודעה.
הערכים keys משמשים להצפנה, כפי שמוסבר בהמשך.
הצפנת ההודעה
הנתונים ששולחים לשירות Push חייבים להיות מוצפנים. דבר זה מונע
את שירות ה-push כך שלא יוכל להציג את הנתונים שאתה שולח ללקוח.
זכרו שספק הדפדפן מחליט באיזה שירות Push להשתמש,
שירות דחיפת הודעות עלול להיות לא בטוח או לא מאובטח באופן תיאורטי. חובה להשתמש בשרת
רכיב keys שסופק ב-PushSubscription כדי להצפין את פרוטוקול דחיפת הנתונים באינטרנט.
בקשות.
חתימה על בקשות פרוטוקול דחיפה באינטרנט
שירות ה-Push מאפשר למנוע מאחרים לשלוח הודעות אל משתמשים. מבחינה טכנית אין צורך לעשות זאת, אבל ההטמעה הקלה ביותר זה נדרש ב-Chrome. ב-Firefox, ההגדרה הזו אופציונלית. יכול להיות שיהיה צורך לבצע אותה בדפדפנים אחרים הוא בעתיד.
תהליך העבודה הזה כולל מפתח פרטי ומפתח ציבורי שהם ייחודיים תרגום מכונה. תהליך האימות פועל בערך כך:
- יוצרים את המפתח הפרטי והציבורי כמשימה חד-פעמית. השילוב של המפתח הפרטי והציבורי נקרא מפתחות לשרת אפליקציות. הם עשויים גם להופיע בשם VAPID . VAPID הוא המפרט שמגדיר את תהליך האימות הזה.
- כשאתם נרשמים ללקוח לקבלת התראות מקוד ה-JavaScript שלכם,
מספקים את המפתח הציבורי. כששירות ה-Push יוצר
endpointשל המכשיר, הוא משייך את המפתח הציבורי שסופק ל-endpoint. - כששולחים בקשה לפרוטוקול Web Push, חותמים על חלק מהמידע בפורמט JSON באמצעות המפתח הפרטי שלך.
- כששירות ה-Push מקבל את הבקשה שלך בפרוטוקול Push באינטרנט, הוא משתמש מפתח ציבורי לאימות המידע החתום. אם החתימה חוקית אז שירות ה-Push יודע שהבקשה הגיעה משרת עם מפתח פרטי תואם.
התאמה אישית של העברת ההודעה
במפרט הבקשות של פרוטוקול דחיפה באינטרנט מוגדרים גם פרמטרים שמאפשרים לך להתאים אישית את האופן שבו שירות ה-Push מנסה לשלוח את ההודעה ללקוח. לדוגמה, אפשר להתאים אישית את הדברים הבאים:
- אורך החיים (TTL) של הודעה, שקובע כמה זמן שירות הדחיפה מנסה להעביר הודעה.
- הדחיפות של ההודעה, והיא שימושית במקרה ששירות ה-Push פועל את חיי הסוללה של הלקוח על ידי שליחה של הודעות בעדיפות גבוהה בלבד.
- נושא של הודעה, שמחליף הודעות ממתינות באותו נושא עם ההודעה האחרונה.
לקבל את ההודעות שנדחו ולהציג אותן כהתראות
אחרי שתשלחו את הבקשה לפרוטוקול אינטרנט Push לשירות ה-Push, שירות ה-Push ימשיך הבקשה שלך ממתינה בתור עד שמתרחש אחד מהאירועים הבאים:
- הלקוח מתחבר לאינטרנט ושירות הדחיפה מעביר את ההודעה.
- תוקף ההודעה יפוג.
כשדפדפן לקוח מקבל הודעת דחיפה, הוא מפענח את ההודעה
נתונים ושליחה של אירוע push לשירות שלך
worker. קובץ שירות (service worker) הוא
בעיקרון קוד JavaScript שיכול לרוץ ברקע, גם כשהאתר שלכם
לא פתוח או שהדפדפן סגור. באירוע push של קובץ השירות (service worker)
ה-handler שאפשר לקרוא לו ServiceWorkerRegistration.showNotification() כדי להציג את המידע
כהתראה.
מה השלב הבא?
- סקירה כללית של התראות הדחיפה מהאינטרנט
- כיצד פועלת דחיפת הודעות
- הרשמה של משתמש
- הרשאות UX
- שליחת הודעות באמצעות ספריות דחיפת הודעות מדפי אינטרנט
- פרוטוקול דחיפה באינטרנט
- טיפול באירועי Push
- הצגת התראה
- אופן ההתנהלות של ההתראות
- דפוסים נפוצים של התראות
- שאלות נפוצות בנושא התראות
- בעיות נפוצות ובאגים בדיווח