उपयोगकर्ताओं को अपने साथ जोड़ने और उन्हें फिर से जोड़ने के लिए पुश नोटिफ़िकेशन का इस्तेमाल करें

Kate Jeffreys

पुश नोटिफ़िकेशन का इस्तेमाल क्यों करना चाहिए?

सूचनाओं से, उपयोगकर्ता को कुछ जानकारी मिलती है. वेब ऐप्लिकेशन, उपयोगकर्ताओं को किसी अहम इवेंट या ज़रूरी कार्रवाई के बारे में बताने के लिए, सूचनाओं का इस्तेमाल कर सकते हैं.

अलग-अलग प्लैटफ़ॉर्म पर सूचनाओं का रंग-रूप अलग-अलग होता है. उदाहरण के लिए:

पहले, वेब ब्राउज़र को एक अनुरोध करके सर्वर और क्लाइंट के बीच जानकारी का लेन-देन शुरू करना पड़ता था. वहीं दूसरी ओर, वेब पुश टेक्नोलॉजी, आपको अपने सर्वर को कॉन्फ़िगर करने देती है, ताकि ऐप्लिकेशन के काम की सूचनाएं भेजने के लिए इसका इस्तेमाल किया जा सके. पुश सेवा की मदद से, सदस्यता वाले हर सर्विस वर्कर के लिए यूनीक यूआरएल बनाए जाते हैं. किसी सर्विस वर्कर के यूआरएल पर मैसेज भेजने से उस सर्विस वर्कर पर इवेंट शुरू हो जाते हैं और सूचना दिखने लगती है.

पुश नोटिफ़िकेशन की मदद से, उपयोगकर्ताओं को आपके ऐप्लिकेशन का ज़्यादा से ज़्यादा फ़ायदा पाने में मदद मिल सकती है. इसके लिए, उन्हें ऐप्लिकेशन को फिर से खोलने और नई जानकारी के आधार पर ऐप्लिकेशन का इस्तेमाल करने के लिए कहा जाता है.

सूचनाएं बनाना और भेजना

Notifications API का इस्तेमाल करके सूचनाएं बनाएं. Notification ऑब्जेक्ट में, title स्ट्रिंग और options ऑब्जेक्ट होता है. उदाहरण के लिए:

let title = 'Hi!';
let options = {
  body: 'Very Important Message',
  /* other options can go here */
};
let notification = new Notification(title, options);

सूचना के चालू होने पर title बोल्ड में दिखता है, जबकि body में अतिरिक्त टेक्स्ट होता है.

सूचनाएं भेजने की अनुमति पाना

कोई सूचना दिखाने के लिए, आपके ऐप्लिकेशन को उपयोगकर्ता की अनुमति लेनी होगी:

Notification.requestPermission();

पुश नोटिफ़िकेशन कैसे काम करते हैं?

नोटिफ़िकेशन की असली ताकत सर्विस वर्कर और पुश टेक्नोलॉजी के मेल से आती है:

• सर्विस वर्कर, बैकग्राउंड में काम कर सकते हैं और स्क्रीन पर आपका ऐप्लिकेशन न दिखने पर भी सूचनाएं दिखा सकते हैं.

• पुश टेक्नोलॉजी की मदद से, सर्वर को ऐप्लिकेशन के लिए सही समय पर सूचनाएं भेजने के लिए, कॉन्फ़िगर किया जा सकता है. पुश सेवा की मदद से, सदस्यता वाले हर सर्विस वर्कर के लिए यूनीक यूआरएल बनाए जाते हैं. किसी सर्विस वर्कर के यूआरएल पर मैसेज भेजने से उस सर्विस वर्कर पर इवेंट शुरू हो जाते हैं और सूचना दिखने लगती है.

नीचे दिए गए उदाहरण के फ़्लो में, क्लाइंट ने सर्विस वर्कर को रजिस्टर किया और पुश नोटिफ़िकेशन के लिए सदस्यता ली. इसके बाद, सर्वर सदस्यता के एंडपॉइंट पर सूचना भेजता है.

क्लाइंट और सर्विस वर्कर, बिना अतिरिक्त लाइब्रेरी के वैनिला JavaScript का इस्तेमाल करते हैं. सर्वर को Node.js पर express npm पैकेज के साथ बनाया गया है और यह सूचनाएं भेजने के लिए, web-push npm पैकेज का इस्तेमाल करता है. सर्वर पर जानकारी भेजने के लिए, क्लाइंट उस पोस्ट यूआरएल पर कॉल करता है जिसे सर्वर ने सार्वजनिक कर दिया है.

पहला भाग: सर्विस वर्कर को रजिस्टर करना और Push की सदस्यता लेना

1. क्लाइंट ऐप्लिकेशन, ServiceWorkerContainer.register() के साथ सर्विस वर्कर को रजिस्टर करता है. क्लाइंट के बंद होने पर, रजिस्टर किया गया सर्विस वर्कर बैकग्राउंड में चलता रहेगा.

   क्लाइंट कोड:

   navigator.serviceWorker.register('sw.js');
   

2. सूचनाएं भेजने के लिए, क्लाइंट उपयोगकर्ता से अनुमति का अनुरोध करता है.

   क्लाइंट कोड:

   Notification.requestPermission();
   

3. पुश नोटिफ़िकेशन चालू करने के लिए, सर्विस वर्कर पुश सदस्यता बनाने के लिए PushManager.subscribe() का इस्तेमाल करता है. PushManager.subscribe() को किए गए कॉल में, सर्विस वर्कर, एक आइडेंटिफ़ायर के तौर पर ऐप्लिकेशन की एपीआई कुंजी उपलब्ध कराता है.

   क्लाइंट कोड:

   navigator.serviceWorker.register('sw.js').then(sw => {
     sw.pushManager.subscribe({ /* API key */ });
   });
   

   Firebase क्लाउड से मैसेज जैसी पुश सेवाएं, सदस्यता वाले मॉडल पर काम करती हैं. जब कोई सर्विस वर्कर PushManager.subscribe() को कॉल करके किसी पुश सेवा की सदस्यता लेता है, तो पुश सर्विस उस सर्विस वर्कर के लिए खास यूआरएल बनाता है. यूआरएल को सदस्यता का एंडपॉइंट कहा जाता है.

4. क्लाइंट, ऐप्लिकेशन सर्वर पर सदस्यता का एंडपॉइंट भेजता है.

   क्लाइंट कोड:

   navigator.serviceWorker.register('sw.js').then(sw => {
     sw.pushManager.subscribe({ /* API key */ }).then(subscription => {
       sendToServer(subscription, '/new-subscription', 'POST');
     });
   });
   

   सर्वर कोड:

   app.post('/new-subscription', (request, response) => {
     // extract subscription from request
     // send 'OK' response
   });
   

दूसरा भाग: सूचना भेजना

1. वेब सर्वर, सदस्यता के एंडपॉइंट पर सूचना भेजता है.

   सर्वर कोड:

   const webpush = require('web-push');
   
   let options = { /* config info for cloud messaging and API key */ };
   let subscription = { /* subscription created in Part 1*/ };
   let payload = { /* notification */ };
   
   webpush.sendNotification(subscription, payload, options);
   

2. सदस्यता के एंडपॉइंट पर भेजी गई सूचनाएं, सर्विस वर्कर को टारगेट के तौर पर पुश इवेंट के ट्रिगर करती हैं. सर्विस वर्कर को मैसेज मिलता है और वह उपयोगकर्ता को सूचना के तौर पर दिखाता है.

   सर्विस वर्कर कोड:

   self.addEventListener('push', (event) => {
     let title = { /* get notification title from event data */ }
     let options = { /* get notification options from event data */ }
     showNotification(title, options);
   })
   

3. अगर वेब ऐप्लिकेशन पहले से चालू नहीं था, तो उपयोगकर्ता इस सूचना को ऐक्सेस करके इंटरैक्ट करता है.

अगले चरण

अगले चरण में, पुश नोटिफ़िकेशन लागू करें!

प्रोसेस के हर चरण में आपकी मदद करने के लिए, हमने कोडलैब की एक सीरीज़ बनाई है.