इस कोडलैब में, पुश नोटिफ़िकेशन सर्वर बनाने का तरीका सिलसिलेवार तरीके से बताया गया है. इस कोडलैब को पूरा करने के बाद, आपके पास ऐसा सर्वर होगा जो:
- यह कुकी, पुश नोटिफ़िकेशन की सदस्यताओं को ट्रैक करती है.इसका मतलब है कि जब कोई क्लाइंट पुश नोटिफ़िकेशन के लिए ऑप्ट-इन करता है, तो सर्वर एक नया डेटाबेस रिकॉर्ड बनाता है. साथ ही, जब कोई क्लाइंट ऑप्ट-आउट करता है, तो यह मौजूदा डेटाबेस रिकॉर्ड को मिटा देता है
- यह फ़ंक्शन, किसी एक क्लाइंट को पुश नोटिफ़िकेशन भेजता है
- यह कुकी, सदस्यता लेने वाले सभी क्लाइंट को पुश नोटिफ़िकेशन भेजती है
इस कोडलैब का मकसद, आपको खुद करके सीखने में मदद करना है. इसमें सिद्धांतों के बारे में ज़्यादा जानकारी नहीं दी गई है. पुश नोटिफ़िकेशन के कॉन्सेप्ट के बारे में जानने के लिए, पुश नोटिफ़िकेशन कैसे काम करती हैं? लेख पढ़ें.
इस कोडलैब का क्लाइंट कोड पहले ही पूरा हो चुका है. इस कोडलैब में, आपको सिर्फ़ सर्वर को लागू करना होगा. पुश नोटिफ़िकेशन क्लाइंट को लागू करने का तरीका जानने के लिए, कोडलैब: पुश नोटिफ़िकेशन क्लाइंट बनाएं देखें.
ब्राउज़र के साथ काम करना
यह कोडलैब, इन ऑपरेटिंग सिस्टम और ब्राउज़र के साथ काम करता है:
- Windows: Chrome, Edge
- macOS: Chrome, Firefox
- Android: Chrome, Firefox
यह कोडलैब, इन ऑपरेटिंग सिस्टम के साथ काम नहीं करता: (या ऑपरेटिंग सिस्टम और ब्राउज़र के कॉम्बिनेशन):
- macOS: Brave, Edge, Safari
- iOS
ऐप्लिकेशन स्टैक
- यह सर्वर, Express.js पर बनाया गया है.
- web-push Node.js लाइब्रेरी, पुश नोटिफ़िकेशन से जुड़े सभी लॉजिक को मैनेज करती है.
- सदस्यता का डेटा, lowdb का इस्तेमाल करके JSON फ़ाइल में लिखा जाता है.
पुश नोटिफ़िकेशन लागू करने के लिए, आपको इनमें से किसी भी टेक्नोलॉजी का इस्तेमाल करने की ज़रूरत नहीं है. हमने इन टेक्नोलॉजी को इसलिए चुना है, क्योंकि इनसे कोडलैब का भरोसेमंद अनुभव मिलता है.
सेटअप
पुष्टि करने की सुविधा सेट अप करना
पुश नोटिफ़िकेशन की सुविधा चालू करने से पहले, आपको अपने सर्वर और क्लाइंट को पुष्टि करने वाली कुंजियों के साथ सेट अप करना होगा. इसकी वजह जानने के लिए, वेब पुश प्रोटोकॉल के अनुरोधों पर हस्ताक्षर करना लेख पढ़ें.
- टर्मिनल खोलें.
- टर्मिनल में,
npx web-push generate-vapid-keysचलाएं. निजी पासकोड और सार्वजनिक पासकोड की वैल्यू कॉपी करें. .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"
public/index.jsखोलें.VAPID_PUBLIC_KEY_VALUE_HEREको अपनी सार्वजनिक पासकोड की वैल्यू से बदलें.
सदस्यताएं प्रबंधित करें
सदस्यता लेने की ज़्यादातर प्रोसेस को आपका क्लाइंट मैनेज करता है. आपके सर्वर को ये मुख्य काम करने होंगे: नई पुश नोटिफ़िकेशन सदस्यताएं सेव करना और पुरानी सदस्यताएं मिटाना. इन सदस्यताओं की मदद से, आने वाले समय में क्लाइंट को मैसेज भेजे जा सकते हैं. सदस्यता लेने की प्रोसेस के बारे में ज़्यादा जानने के लिए, क्लाइंट को पुश नोटिफ़िकेशन पाने के लिए सदस्यता दिलाना लेख पढ़ें.
सदस्यता की नई जानकारी सेव करना
- ऐप्लिकेशन टैब में, Register service worker पर क्लिक करें. स्थिति वाले बॉक्स में, आपको इस तरह का मैसेज दिखेगा:
Service worker registered. Scope: https://example.com
- ऐप्लिकेशन टैब में जाकर, पुश नोटिफ़िकेशन पाने के लिए सदस्यता लें पर क्लिक करें. आपका ब्राउज़र या ऑपरेटिंग सिस्टम आपसे पूछेगा कि क्या आपको वेबसाइट को पुश नोटिफ़िकेशन भेजने की अनुमति देनी है. अनुमति दें पर क्लिक करें. इसके अलावा, आपके ब्राउज़र/ओएस में इस्तेमाल होने वाले मिलते-जुलते वाक्यांश पर भी क्लिक किया जा सकता है. आपको स्टेटस बॉक्स में, इस तरह का मैसेज दिखेगा:
Service worker subscribed to push. Endpoint: https://fcm.googleapis.com/fcm/send/…
- लॉग देखने के लिए, टर्मिनल खोलें. आपको
/add-subscriptionके बाद कुछ डेटा दिखेगा./add-subscriptionवह यूआरएल है जिस पर क्लाइंट, पुश नोटिफ़िकेशन की सदस्यता लेने के लिए POST अनुरोध भेजता है. इसके बाद दिया गया डेटा, क्लाइंट की सदस्यता की जानकारी है. इसे आपको सेव करना होगा. server.jsखोलें.- नीचे दिए गए कोड की मदद से,
/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);
});
सदस्यता की पुरानी जानकारी मिटाना
- ऐप्लिकेशन टैब पर वापस जाएं.
- पुश नोटिफ़िकेशन की सदस्यता छोड़ें पर क्लिक करें.
- लॉग फिर से देखें. आपको
/remove-subscriptionके बाद, क्लाइंट की सदस्यता की जानकारी दिखेगी. - नीचे दिए गए कोड की मदद से,
/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);
});
सूचनाएं भेजना
पुश मैसेज भेजना लेख में बताया गया है कि आपका सर्वर, क्लाइंट को सीधे तौर पर पुश मैसेज नहीं भेजता है. इसके बजाय, यह ऐसा करने के लिए पुश सेवा पर निर्भर करता है. आपका सर्वर, क्लाइंट को मैसेज पुश करने की प्रोसेस शुरू करता है. इसके लिए, वह वेब सेवा (पुश सेवा) को वेब सेवा के अनुरोध (वेब पुश प्रोटोकॉल के अनुरोध) भेजता है. यह वेब सेवा, ब्राउज़र बनाने वाली उस कंपनी के मालिकाना हक वाली होती है जिसका इस्तेमाल आपका उपयोगकर्ता करता है.
- नीचे दिए गए कोड की मदद से,
/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);
});
- नीचे दिए गए कोड की मदद से,
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} `);
});
});
}
- नीचे दिए गए कोड की मदद से,
/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);
}
});
- ऐप्लिकेशन टैब पर वापस जाएं.
- मुझे सूचना दें पर क्लिक करें. आपको एक पुश नोटिफ़िकेशन मिलेगा. टाइटल
Hello, Notifications!और बॉडीID: <ID>होनी चाहिए. इसमें<ID>कोई भी संख्या हो सकती है. - अपने ऐप्लिकेशन को दूसरे ब्राउज़र या डिवाइसों पर खोलें. इसके बाद, उन्हें पुश नोटिफ़िकेशन पाने के लिए सदस्यता लेने का विकल्प दें. इसके बाद, सभी को सूचना दें बटन पर क्लिक करें. आपको सूचना पाने के लिए रजिस्टर किए गए सभी डिवाइसों पर एक ही सूचना मिलनी चाहिए. इसका मतलब है कि पुश नोटिफ़िकेशन के मुख्य हिस्से में मौजूद आईडी एक ही होना चाहिए.
अगले चरण
- पुश नोटिफ़िकेशन के काम करने के तरीके के बारे में ज़्यादा जानने के लिए, पुश नोटिफ़िकेशन की खास जानकारी पढ़ें.
- कोडलैब: पुश नोटिफ़िकेशन क्लाइंट बनाएं देखें. इससे आपको यह जानने में मदद मिलेगी कि ऐसा क्लाइंट कैसे बनाया जाता है जो सूचना पाने की अनुमति का अनुरोध करता है, डिवाइस को पुश नोटिफ़िकेशन पाने के लिए सदस्यता लेता है, और पुश मैसेज पाने के लिए सर्विस वर्कर का इस्तेमाल करता है. साथ ही, यह क्लाइंट मैसेज को सूचनाओं के तौर पर दिखाता है.