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

Kate Jeffreys

Kayce Basques

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

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

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

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

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

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

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

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

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

• macOS पर: Brave, Edge, Safari
• iOS

ऐप्लिकेशन स्टैक

• यह सर्वर, Express.js पर बनाया गया है.
• web-push Node.js लाइब्रेरी, पुश नोटिफ़िकेशन के सभी लॉजिक को मैनेज करती है.
• सदस्यता का डेटा, lowdb का इस्तेमाल करके JSON फ़ाइल में लिखा जाता है.

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

सेटअप

कोड की ऐसी कॉपी पाना जिसमें बदलाव किया जा सके

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

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

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

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

1. टूल पर क्लिक करके, Glitch टर्मिनल खोलें. इसके बाद, टर्मिनल पर क्लिक करें.
2. टर्मिनल में, npx web-push generate-vapid-keys चलाएं. निजी कुंजी और सार्वजनिक कुंजी की वैल्यू कॉपी करें.
3. .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. साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन दबाएं.

1. ऐप्लिकेशन टैब में, सेवा वर्कर रजिस्टर करें पर क्लिक करें. स्टेटस बॉक्स में, आपको ऐसा मैसेज दिखेगा:

Service worker registered. Scope: https://desert-cactus-sunset.glitch.me/

1. ऐप्लिकेशन टैब में, पुश नोटिफ़िकेशन पाने के लिए सदस्यता लें पर क्लिक करें. आपका ब्राउज़र या ऑपरेटिंग सिस्टम आपसे पूछेगा कि क्या आप वेबसाइट को पुश नोटिफ़िकेशन भेजने देना चाहते हैं. Allow पर क्लिक करें (या आपके ब्राउज़र/OS द्वारा उपयोग किए जाने वाले किसी भी वाक्यांश) पर क्लिक करें. स्टेटस बॉक्स में, आपको इस तरह का मैसेज दिखेगा:

Service worker subscribed to push.  Endpoint: https://fcm.googleapis.com/fcm/send/…

1. Glitch के यूज़र इंटरफ़ेस (यूआई) में, सोर्स देखें पर क्लिक करके अपने कोड पर वापस जाएं.
2. टूल पर क्लिक करने के बाद लॉग पर क्लिक करके, Glitch लॉग खोलें. आपको /add-subscription के बाद कुछ डेटा दिखेगा. /add-subscription वह यूआरएल है जिस पर क्लाइंट, पुश नोटिफ़िकेशन की सदस्यता लेने के लिए POST अनुरोध भेजता है. इसके बाद का डेटा, क्लाइंट की सदस्यता की जानकारी है. आपको इसे सेव करना होगा.
3. server.js खोलें.
4. इस कोड की मदद से, /add-subscription रूट हैंडलर लॉजिक को अपडेट करें:

app.post('/add-subscription', (request, response) => {
  console.log('/add-subscription');
  console.log(request.body);
  console.log(`Subscribing ${request.body.endpoint}`);
  db.get('subscriptions')
    .push(request.body)
    .write();
  response.sendStatus(200);
});

सदस्यता की पुरानी जानकारी मिटाना

1. ऐप्लिकेशन टैब पर वापस जाएं.
2. पुश नोटिफ़िकेशन की सदस्यता छोड़ें पर क्लिक करें.
3. गड़बड़ी के लॉग फिर से देखें. आपको /remove-subscription के बाद, क्लाइंट की सदस्यता की जानकारी दिखेगी.
4. /remove-subscription रूट हैंडलर लॉजिक को नीचे दिए गए कोड से अपडेट करें:

app.post('/remove-subscription', (request, response) => {
  console.log('/remove-subscription');
  console.log(request.body);
  console.log(`Unsubscribing ${request.body.endpoint}`);
  db.get('subscriptions')
    .remove({endpoint: request.body.endpoint})
    .write();
  response.sendStatus(200);
});

सूचनाएं भेजना

जैसा कि पुश मैसेज भेजें में बताया गया है, आपका सर्वर असल में क्लाइंट को पुश मैसेज सीधे नहीं भेजता. इसके बजाय, यह पुश सेवा पर निर्भर करता है. आपका सर्वर, वेब सेवा के अनुरोध (वेब पुश प्रोटोकॉल के अनुरोध) करके, क्लाइंट को मैसेज भेजने की प्रोसेस शुरू करता है. यह वेब सेवा, उस ब्राउज़र वेंडर के मालिकाना हक वाली वेब सेवा (पुश सेवा) होती है जिसका इस्तेमाल आपका उपयोगकर्ता करता है.

1. इस कोड की मदद से, /notify-me रूट हैंडलर लॉजिक को अपडेट करें:

app.post('/notify-me', (request, response) => {
  console.log('/notify-me');
  console.log(request.body);
  console.log(`Notifying ${request.body.endpoint}`);
  const subscription = 
      db.get('subscriptions').find({endpoint: request.body.endpoint}).value();
  sendNotifications([subscription]);
  response.sendStatus(200);
});

1. इस कोड की मदद से, sendNotifications() फ़ंक्शन को अपडेट करें:

function sendNotifications(subscriptions) {
  // TODO
  // Create the notification content.
  const notification = JSON.stringify({
    title: "Hello, Notifications!",
    options: {
      body: `ID: ${Math.floor(Math.random() * 100)}`
    }
  });
  // Customize how the push service should attempt to deliver the push message.
  // And provide authentication information.
  const options = {
    TTL: 10000,
    vapidDetails: vapidDetails
  };
  // Send a push message to each client specified in the subscriptions array.
  subscriptions.forEach(subscription => {
    const endpoint = subscription.endpoint;
    const id = endpoint.substr((endpoint.length - 8), endpoint.length);
    webpush.sendNotification(subscription, notification, options)
      .then(result => {
        console.log(`Endpoint ID: ${id}`);
        console.log(`Result: ${result.statusCode}`);
      })
      .catch(error => {
        console.log(`Endpoint ID: ${id}`);
        console.log(`Error: ${error} `);
      });
  });
}

1. /notify-all रूट हैंडलर लॉजिक को इस कोड से अपडेट करें:

app.post('/notify-all', (request, response) => {
  console.log('/notify-all');
  response.sendStatus(200);
  console.log('Notifying all subscribers');
  const subscriptions =
      db.get('subscriptions').cloneDeep().value();
  if (subscriptions.length > 0) {
    sendNotifications(subscriptions);
    response.sendStatus(200);
  } else {
    response.sendStatus(409);
  }
});

1. ऐप्लिकेशन टैब पर वापस जाएं.
2. पुश नोटिफ़िकेशन की सदस्यता छोड़ें पर क्लिक करें. इसके बाद, पुश नोटिफ़िकेशन की सदस्यता लें पर फिर से क्लिक करें. ऐसा करना ज़रूरी है, क्योंकि जैसा कि पहले बताया गया है कि Glitch हर बार कोड में बदलाव करने पर प्रोजेक्ट को फिर से शुरू करता है. साथ ही, प्रोजेक्ट को स्टार्टअप पर डेटाबेस मिटाने के लिए कॉन्फ़िगर किया गया है.
3. मुझे सूचना दें पर क्लिक करें. आपको एक पुश नोटिफ़िकेशन मिलेगा. टाइटल Hello, Notifications! और मुख्य हिस्सा ID: <ID> होना चाहिए. यहां <ID> कोई भी संख्या हो सकती है.
4. अपने ऐप्लिकेशन को दूसरे ब्राउज़र या डिवाइसों पर खोलें और उन्हें पुश नोटिफ़िकेशन की सदस्यता लेने की कोशिश करें. इसके बाद, सभी को सूचना दें बटन पर क्लिक करें. आपको सदस्यता वाले सभी डिवाइसों पर एक ही सूचना मिलनी चाहिए. इसका मतलब है कि पुश नोटिफ़िकेशन के मुख्य हिस्से में मौजूद आईडी एक ही होना चाहिए.

अगले चरण

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