איך התראות Web Push עובדות מבפנים
אתם רואים התראות על הודעות חדשות, עדכוני הזמנות או תזכורות לתשלום.
זה נראה פשוט. ה-backend שלכם שולח הודעה והמשתמש מקבל אותה.
במציאות, התהליך כולל הרבה חלקים נעים. ה-backend שלכם לעולם לא מדבר ישירות עם הדפדפן. במקום זאת, הוא משתמש ב-Push Service.
Google Chrome משתמש ב-Firebase Cloud Messaging. Firefox משתמש ב-Mozilla Push Service.
זרימת העבודה עובדת כך:
Backend → Push Service → Browser → Service Worker → User
הנה איך בונים את המערכת הזו באמצעות React ו-Golang.
The Components
- Frontend (React): מבקש הרשאה ורושם Service Worker.
- Service Worker: סקריפט רקע שחי בדפדפן. הוא מטפל באירועים גם כשהאתר שלכם סגור.
- Backend (Golang): שומר מנויים (subscriptions) ושולח הודעות מוצפנות.
- Push Service: המתווך שמספק את ההודעה לדפדפן.
The Subscription Flow
כדי לשלוח הודעה, אתם צריכים מנוי (subscription).
- המשתמש מעניק הרשאה.
- הדפדפן מייצר אובייקט מנוי (subscription object) המכיל endpoint ומפתחות אבטחה.
- אפליקציית ה-React שלכם שולחת את האובייקט הזה ל-backend ב-Golang.
- ה-backend שלכם שומר אותו במסד נתונים (database).
עליכם להשתמש במפתחות VAPID כדי לזהות את השרת שלכם. השתמשו במפתח ציבורי (public key) עבור ה-frontend ובמפתח פרטי (private key) עבור ה-backend. לעולם אל תשתפו את המפתח הפרטי שלכם.
The Implementation
ב-React, אתם רושמים Service Worker כדי להאזין לאירועי push. ה-worker הזה רץ ברקע. הוא מקבל את הנתונים ומציג את ההתראה למשתמש.
ב-Golang, אתם משתמשים בספרייה (library) כדי לטפל בהצפנה ובאימות VAPID. השרת שלכם קורא את המנוי ממסד הנתונים, מצפין את ה-payload ושולח אותו ל-browser push service.
Scaling for Production
הגדרה פשוטה עובדת עבור פרויקטים קטנים. מערכת גדולה זקוקה ליותר.
- טיפול במספר מכשירים: למשתמש אחד עשויים להיות טלפון ומחשב נייד. שמרו מספר מנויים (subscriptions) לכל משתמש.
- ניקוי נתונים: מנויים פגים. אם אתם מקבלים שגיאת 404 או 410, מחקו את המנוי הזה ממסד הנתונים שלכם.
- שימוש בתורים (Queues): עבור מיליוני משתמשים, השתמשו ב-Kafka או בכלי דומה. זה מאפשר למערכת שלכם לעבד התראות בצורה אסינכרונית.
- מימוש ניסיונות חוזרים (retries): השתמשו ב-exponential backoff כדי להתמודד עם כשלי רשת.
WebSockets טובים לצ'אטים חיים כשהמשתמש פעיל. Web Push טוב יותר להגעה למשתמשים כשהלשונית (tab) סגורה.