कोडलैब (कोड बनाना सीखना): पुश नोटिफ़िकेशन क्लाइंट बनाना

Kate Jeffreys

Kayce Basques

इस कोडलैब में, पुश नोटिफ़िकेशन क्लाइंट बनाने का तरीका सिलसिलेवार तरीके से बताया गया है. इस कोडलैब को पूरा करने के बाद, आपके पास ऐसा क्लाइंट होगा जो:

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

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

इस कोडलैब का सर्वर कोड पहले ही पूरा हो चुका है. इस कोडलैब में, आपको सिर्फ़ क्लाइंट को लागू करना होगा. पुश नोटिफ़िकेशन सर्वर लागू करने का तरीका जानने के लिए, कोडलैब: पुश नोटिफ़िकेशन सर्वर बनाएं देखें.

ब्राउज़र के साथ काम करना

यह कोडलैब, इन ऑपरेटिंग सिस्टम और ब्राउज़र के साथ काम करता है:

• Windows: Chrome, Edge
• macOS: Chrome, Firefox
• Android: Chrome, Firefox

यह कोडलैब, इन ऑपरेटिंग सिस्टम (या ऑपरेटिंग सिस्टम और ब्राउज़र के कॉम्बिनेशन) के साथ काम नहीं करता:

• macOS: Brave, Edge, Safari
• iOS

सेटअप

प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.

पुष्टि करने की सुविधा सेट अप करना

पुश नोटिफ़िकेशन की सुविधा चालू करने से पहले, आपको अपने सर्वर और क्लाइंट को पुष्टि करने वाली कुंजियों के साथ सेट अप करना होगा. इसकी वजह जानने के लिए, वेब पुश प्रोटोकॉल के अनुरोधों पर हस्ताक्षर करना लेख पढ़ें. आम तौर पर, सीक्रेट को इस तरह की .env फ़ाइल में सेव किया जाता है.

VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"

1. public/index.js खोलें.
2. VAPID_PUBLIC_KEY_VALUE_HERE को अपनी सार्वजनिक पासकोड की वैल्यू से बदलें.

सर्विस वर्कर रजिस्टर करना

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

1. // TODO add startup logic here टिप्पणी को इस कोड से बदलें:

   if ('serviceWorker' in navigator && 'PushManager' in window) {
     navigator.serviceWorker.register('./service-worker.js').then(serviceWorkerRegistration => {
       console.info('Service worker was registered.');
       console.info({serviceWorkerRegistration});
     }).catch(error => {
       console.error('An error occurred while registering the service worker.');
       console.error(error);
     });
     subscribeButton.disabled = false;
   } else {
     console.error('Browser does not support service workers or push messages.');
   }
   
   subscribeButton.addEventListener('click', subscribeButtonHandler);
   unsubscribeButton.addEventListener('click', unsubscribeButtonHandler);
   

2. Chrome में, DevTools Console खोलें.

3. आपको कंसोल में Service worker was registered. लॉग किया गया मैसेज दिखेगा.

पुश नोटिफ़िकेशन की अनुमति के लिए अनुरोध करना

आपको पेज लोड होने पर, पुश नोटिफ़िकेशन भेजने की अनुमति का अनुरोध कभी नहीं करना चाहिए. इसके बजाय, आपके यूज़र इंटरफ़ेस (यूआई) को उपयोगकर्ता से यह पूछना चाहिए कि क्या उसे पुश नोटिफ़िकेशन चाहिए. जब उपयोगकर्ता साफ़ तौर पर पुष्टि कर देता है (जैसे, बटन पर क्लिक करके), तब ब्राउज़र से पुश नोटिफ़िकेशन की अनुमति पाने के लिए, औपचारिक प्रोसेस शुरू की जा सकती है.

1. public/index.js में, // TODO टिप्पणी को subscribeButtonHandler() में दिए गए इस कोड से बदलें:

   // Prevent the user from clicking the subscribe button multiple times.
   subscribeButton.disabled = true;
   const result = await Notification.requestPermission();
   if (result === 'denied') {
     console.error('The user explicitly denied the permission request.');
     return;
   }
   if (result === 'granted') {
     console.info('The user accepted the permission request.');
   }
   

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

3. अनुमति दें को चुनें. इसके अलावा, आपके ब्राउज़र या ऑपरेटिंग सिस्टम में इस्तेमाल किया गया कोई भी मिलता-जुलता वाक्यांश चुना जा सकता है. आपको कंसोल में एक मैसेज दिखेगा. इससे पता चलेगा कि अनुरोध स्वीकार किया गया है या अस्वीकार किया गया है.

पुश नोटिफ़िकेशन पाने के लिए सदस्यता लें

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

1. subscribeButtonHandler() में हाइलाइट किया गया यह कोड जोड़ें:

   subscribeButton.disabled = true;
   const result = await Notification.requestPermission();
   if (result === 'denied') {
     console.error('The user explicitly denied the permission request.');
     return;
   }
   if (result === 'granted') {
     console.info('The user accepted the permission request.');
   }
   const registration = await navigator.serviceWorker.getRegistration();
   const subscribed = await registration.pushManager.getSubscription();
   if (subscribed) {
     console.info('User is already subscribed.');
     notifyMeButton.disabled = false;
     unsubscribeButton.disabled = false;
     return;
   }
   const subscription = await registration.pushManager.subscribe({
     userVisibleOnly: true,
     applicationServerKey: urlB64ToUint8Array(VAPID_PUBLIC_KEY)
   });
   notifyMeButton.disabled = false;
   fetch('/add-subscription', {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json'
     },
     body: JSON.stringify(subscription)
   });
   

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

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

पुश नोटिफ़िकेशन पाने की सुविधा बंद करना

अगर कोई उपयोगकर्ता पुश नोटिफ़िकेशन पाने के लिए ऑप्ट-इन करता है, तो आपके यूज़र इंटरफ़ेस (यूआई) में ऑप्ट-आउट करने का विकल्प होना चाहिए. ऐसा तब होता है, जब उपयोगकर्ता का मन बदल जाता है और वह पुश नोटिफ़िकेशन नहीं पाना चाहता.

• unsubscribeButtonHandler() में मौजूद // TODO टिप्पणी की जगह, यह कोड डालें:

const registration = await navigator.serviceWorker.getRegistration();
const subscription = await registration.pushManager.getSubscription();
fetch('/remove-subscription', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({endpoint: subscription.endpoint})
});
const unsubscribed = await subscription.unsubscribe();
if (unsubscribed) {
  console.info('Successfully unsubscribed from push notifications.');
  unsubscribeButton.disabled = true;
  subscribeButton.disabled = false;
  notifyMeButton.disabled = true;
}

पुश मैसेज पाना और उसे सूचना के तौर पर दिखाना

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

1. public/service-worker.js खोलें और सर्विस वर्कर के push इवेंट हैंडलर में मौजूद // TODO कमेंट को इस कोड से बदलें:

   let data = event.data.json();
   const image = 'logo.png';
   const options = {
     body: data.options.body,
     icon: image
   }
   self.registration.showNotification(
     data.title,
     options
   );
   

2. ऐप्लिकेशन टैब पर वापस जाएं.

3. मुझे सूचना दें पर क्लिक करें. आपको एक पुश नोटिफ़िकेशन मिलेगा.

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

सूचना को कई तरीकों से अपनी पसंद के मुताबिक बनाया जा सकता है. ज़्यादा जानने के लिए, ServiceWorkerRegistration.showNotification() के पैरामीटर देखें.

जब कोई उपयोगकर्ता सूचना पर क्लिक करे, तब यूआरएल खोलना

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

1. सर्विस वर्कर के notificationclick इवेंट हैंडलर में मौजूद // TODO टिप्पणी को इस कोड से बदलें:

   event.notification.close();
   event.waitUntil(self.clients.openWindow('https://web.dev'));
   

2. ऐप्लिकेशन टैब पर वापस जाएं. खुद को एक और सूचना भेजें. इसके बाद, सूचना पर क्लिक करें. आपके ब्राउज़र में एक नया टैब खुलना चाहिए और https://web.dev लोड होना चाहिए.

अगले चरण

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