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

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

अगले चरण