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

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 फ़ाइल में लिखा जाता है.

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

सेटअप

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

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

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

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

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

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

अगले चरण

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