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

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

पहला हिस्सा: सर्विस वर्कर को रजिस्टर करना और पुश नोटिफ़िकेशन पाने के लिए ऑप्ट-इन करना

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

अगले चरण

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

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