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

Kate Jeffreys
Kate Jeffreys
Kayce Basques

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

  • उपयोगकर्ता को पुश नोटिफ़िकेशन की सदस्यता देता है.
  • पुश मैसेज पाता है और उन्हें सूचनाओं के तौर पर दिखाता है.
  • उपयोगकर्ता को पुश नोटिफ़िकेशन की सदस्यता से हटाता है.

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

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

पूरा कोड देखने के लिए, push-notifications-client-codelab-complete (सोर्स) देखें.

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

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

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

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

  • macOS: Brave, Edge, Safari
  • iOS

सेटअप

कोड की ऐसी कॉपी पाएं जिसमें बदलाव किया जा सकता है

इन निर्देशों की दाईं ओर दिखने वाले कोड एडिटर को, इस कोडलैब में गड़बड़ी वाले यूज़र इंटरफ़ेस कहा जाएगा.

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

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

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

  1. Glitch के यूज़र इंटरफ़ेस (यूआई) में, टूल पर क्लिक करें. इसके बाद, Glitch टर्मिनल खोलने के लिए टर्मिनल पर क्लिक करें.
  2. Glitch टर्मिनल में, npx web-push generate-vapid-keys चलाएं. निजी कुंजी और सार्वजनिक कुंजी की वैल्यू कॉपी करें.
  3. Glitch के यूज़र इंटरफ़ेस में, .env खोलें और VAPID_PUBLIC_KEY और VAPID_PRIVATE_KEY को अपडेट करें. VAPID_SUBJECT को mailto:test@test.test पर सेट करें. इन सभी वैल्यू को डबल कोट में रखा जाना चाहिए. अपडेट करने के बाद, आपकी .env फ़ाइल कुछ ऐसी दिखनी चाहिए:
VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"
  1. Glitch टर्मिनल बंद करें.
  1. public/index.js खोलें.
  2. VAPID_PUBLIC_KEY_VALUE_HERE को अपनी सार्वजनिक कुंजी की वैल्यू से बदलें.

सर्विस वर्कर रजिस्टर करें

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

  1. // TODO add startup logic here टिप्पणी को इस कोड से बदलें:
// 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);
  1. साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन फ़ुलस्क्रीन दबाएं.
  1. DevTools खोलने के लिए, `Control+Shift+J` दबाएं. Mac पर, `Command+Option+J` दबाएं.
  2. कंसोल टैब पर क्लिक करें. आपको Console में मैसेज Service worker was registered. दिखेगा.

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

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

  1. अपने कोड पर वापस जाने के लिए, Glitch के यूज़र इंटरफ़ेस (यूआई) में सोर्स देखें पर क्लिक करें.
  2. public/index.js में, subscribeButtonHandler() में मौजूद // TODO टिप्पणी को इस कोड से बदलें:
// TODO
// 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.');
}
  1. ऐप्लिकेशन टैब पर वापस जाएं और पुश नोटिफ़िकेशन पाने के लिए सदस्यता लें पर क्लिक करें. आपका ब्राउज़र या ऑपरेटिंग सिस्टम आपसे पूछेगा कि क्या आपको वेबसाइट से पुश नोटिफ़िकेशन चाहिए. अनुमति दें (या आपके ब्राउज़र/ओएस में मौजूद मिलते-जुलते वाक्यांश) पर क्लिक करें. आपको कंसोल में एक मैसेज दिखेगा. इससे आपको पता चलेगा कि अनुरोध स्वीकार किया गया है या अस्वीकार.

Push notification के सदस्य बनें

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

  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 में बदलता है. इस वैल्यू का इस्तेमाल, आपके सर्वर और पुश सेवा के बीच पुष्टि करने के लिए किया जाता है.

पुश नोटिफ़िकेशन की सदस्यता छोड़ना

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

  1. unsubscribeButtonHandler() में मौजूद // TODO टिप्पणी को, यहां दिए गए कोड से बदलें:
// 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 टिप्पणी को इस कोड से बदलें:
// TODO
let data = event.data.json();
const image = 'https://cdn.glitch.com/614286c9-b4fc-4303-a6a9-a4cef0601b74%2Flogo.png?v=1605150951230';
const options = {
  body: data.options.body,
  icon: image
}
self.registration.showNotification(
  data.title, 
  options
);
  1. ऐप्लिकेशन टैब पर वापस जाएं.
  2. मुझे सूचना दें पर क्लिक करें. आपको एक पुश नोटिफ़िकेशन मिलेगा.
  3. किसी दूसरे ब्राउज़र (या दूसरे डिवाइस पर भी) पर अपने ऐप्लिकेशन टैब का यूआरएल खोलें और सदस्यता के वर्कफ़्लो को देखें. इसके बाद, सभी को सूचना दें पर क्लिक करें. आपको उन सभी ब्राउज़र पर एक ही पुश नोटिफ़िकेशन मिलेगा जिनकी आपने सदस्यता ली है. ब्राउज़र/ओएस के उन कॉम्बिनेशन की सूची देखने के लिए, ब्राउज़र के साथ काम करने की सुविधा पर वापस जाएं जो काम करते हैं या नहीं.

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

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

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

  1. सेवा वर्कर के notificationclick इवेंट हैंडलर में, // TODO टिप्पणी को यहां दिए गए कोड से बदलें:
// TODO
event.notification.close();
event.waitUntil(self.clients.openWindow('https://web.dev'));
  1. ऐप्लिकेशन टैब पर वापस जाएं, खुद को एक और सूचना भेजें और फिर सूचना पर क्लिक करें. आपके ब्राउज़र में एक नया टैब खुलेगा और https://web.dev लोड होगा.

अगले चरण