वेब पुश नोटिफिकेशन्स अंतर्गतरीत्या कसे काम करतात

तुम्हाला नवीन मेसेज, ऑर्डर अपडेट्स किंवा पेमेंट रिमाइंडर्ससाठी नोटिफिकेशन्स दिसतात.

हे सोपे वाटते. तुमचा backend एक मेसेज पाठवतो आणि वापरकर्त्याला तो प्राप्त होतो.

प्रत्यक्षात, या प्रक्रियेत अनेक घटक समाविष्ट असतात. तुमचा backend ब्राउझरशी थेट संवाद साधत नाही. त्याऐवजी, तो Push Service चा वापर करतो.

Google Chrome मध्ये Firebase Cloud Messaging वापरले जाते. Firefox मध्ये Mozilla Push Service वापरले जाते.

वर्कफ्लो असा काम करतो:

Backend → Push Service → Browser → Service Worker → User

React आणि Golang वापरून तुम्ही ही सिस्टम कशी तयार करू शकता ते खाली दिले आहे.

घटक (The Components)

  1. Frontend (React): परवानगी मागते आणि Service Worker रजिस्टर करते.
  2. Service Worker: एक बॅकग्राउंड स्क्रिप्ट जी ब्राउझरमध्ये असते. तुमची वेबसाइट बंद असतानाही ती इव्हेंट्स हाताळते.
  3. Backend (Golang): सबस्क्रिप्शन्स साठवते आणि एन्क्रिप्टेड मेसेज पाठवते.
  4. Push Service: एक मध्यस्थ जो ब्राउझरला मेसेज पोहोचवतो.

सबस्क्रिप्शन फ्लो (The Subscription Flow)

मेसेज पाठवण्यासाठी, तुम्हाला सबस्क्रिप्शनची आवश्यकता असते.

  • वापरकर्ता परवानगी देतो.
  • ब्राउझर एक सबस्क्रिप्शन ऑब्जेक्ट तयार करतो ज्यामध्ये endpoint आणि security keys असतात.
  • तुमचे React app हे ऑब्जेक्ट तुमच्या Golang backend ला पाठवते.
  • तुमचा backend ते डेटाबेसमध्ये सेव्ह करते.

तुमच्या सर्व्हरची ओळख पटवण्यासाठी तुम्हाला VAPID keys वापरणे आवश्यक आहे. Frontend साठी public key आणि backend साठी private key वापरा. तुमची private key कधीही कोणाशी शेअर करू नका.

अंमलबजावणी (The Implementation)

React मध्ये, तुम्ही push इव्हेंट्स ऐकण्यासाठी (listen करण्यासाठी) Service Worker रजिस्टर करता. हा worker बॅकग्राउंडमध्ये चालतो. तो डेटा प्राप्त करतो आणि वापरकर्त्याला नोटिफिकेशन दाखवतो.

Golang मध्ये, तुम्ही एन्क्रिप्शन आणि VAPID authentication हाताळण्यासाठी लायब्ररी वापरता. तुमचा सर्व्हर डेटाबेसमधून सबस्क्रिप्शन वाचतो, payload एन्क्रिप्ट करतो आणि तो ब्राउझर push service ला पाठवतो.

प्रोडक्शनसाठी स्केलिंग (Scaling for Production)

लहान प्रकल्पांसाठी साधी सेटअप पुरेशी असते. मोठ्या सिस्टमसाठी अधिक गोष्टींची आवश्यकता असते.

  • मल्टिपल डिव्हाइसेस हाताळा: एका वापरकर्त्याकडे फोन आणि लॅपटॉप दोन्ही असू शकतात. प्रत्येक वापरकर्त्यासाठी मल्टिपल सबस्क्रिप्शन्स साठवा.
  • डेटा क्लीन अप करा: सबस्क्रिप्शन्सची मुदत संपते. जर तुम्हाला 404 किंवा 410 एरर आला, तर ते सबस्क्रिप्शन तुमच्या डेटाबेसमधून काढून टाका.
  • Queues वापरा: लाखो वापरकर्त्यांसाठी, Kafka किंवा तत्सम टूल वापरा. यामुळे तुमची सिस्टम नोटिफिकेशन्स asynchronously प्रोसेस करू शकते.
  • Retries लागू करा: नेटवर्क फेल्युअर हाताळण्यासाठी exponential backoff वापरा.

जेव्हा वापरकर्ता सक्रिय असतो, तेव्हा लाइव्ह चॅटसाठी WebSockets चांगले असतात. जेव्हा टॅब बंद असतो, तेव्हा वापरकर्त्यांपर्यंत पोहोचण्यासाठी Web Push अधिक चांगले आहे.

स्रोत: https://dev.to/chandu_bobbili_06/how-web-push-notifications-work-internally-implementing-with-react-golang-6m