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

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

सेटअप

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

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

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

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

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

  1. Glitch यूज़र इंटरफ़ेस (यूआई) में टूल पर क्लिक करें और फिर Glitch टर्मिनल को खोलने के लिए Terminal पर क्लिक करें.
  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. ग्लिच टर्मिनल बंद करें.
  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. कंसोल टैब पर क्लिक करें. आपको यह मैसेज दिखेगा: 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. ऐप्लिकेशन टैब पर वापस जाएं और पुश करने के लिए सदस्यता लें पर क्लिक करें. आपका ब्राउज़र या ऑपरेटिंग सिस्टम आपसे पूछेगा कि क्या आप वेबसाइट को आपको पुश नोटिफ़िकेशन भेजने देना चाहते हैं. Allow पर क्लिक करें (या आपका ब्राउज़र/OS द्वारा उपयोग किया जाने वाला ऐसा कोई भी वाक्यांश). कंसोल में आपको यह बताने वाला एक मैसेज दिखेगा कि अनुरोध स्वीकार किया गया या अस्वीकार किया गया.

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

अगले चरण