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

Kate Jeffreys
Kate Jeffreys
Kayce Basques
Kayce Basques
X GitHub

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

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

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

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

वेबसाइट का अलग-अलग ब्राउज़र पर चलना

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

  • 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 में, subscribeButtonHandler() में मौजूद // 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.');
}

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

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

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

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

  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 लोड होगा.

अगले चरण