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

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 को अपडेट करें. शुरू mailto:test@test.test के लिए VAPID_SUBJECT. इन सभी वैल्यू को रैप किया जाना चाहिए डबल कोट में. बदलाव करने के बाद, आपकी .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 पर क्लिक करें (या जो भी करें) आपके ब्राउज़र/ओएस में इस्तेमाल होने वाला मिलता-जुलता वाक्यांश). आपको स्टेटस बॉक्स में इससे मिलता-जुलता एक मैसेज दिखेगा इससे:

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

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

अगले चरण

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