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

Kate Jeffreys
Kate Jeffreys

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

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

Android डिवाइस पर कोई सूचना दिख रही है.
MacBook पर सूचना.

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

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

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

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 पैकेज का इस्तेमाल करता है. सर्वर को जानकारी भेजने के लिए, क्लाइंट उस पीओएसटी यूआरएल को कॉल करता है जिसे सर्वर ने सार्वजनिक किया है.

भाग 1: सर्विस वर्कर को रजिस्टर करें और पुश की सदस्यता लें

  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. अगर उपयोगकर्ता ने सूचना के साथ इंटरैक्ट किया है, तो वेब ऐप्लिकेशन चालू हो जाएगा. ऐसा तब होगा, जब वेब ऐप्लिकेशन पहले से चालू नहीं था.

अगले चरण

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

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