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

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

अगले चरण

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

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