यह कोडलैब आपको पुश नोटिफ़िकेशन सर्वर बनाने के सिलसिलेवार तरीके के बारे में बताता है. कोडलैब के आखिर में, आपके पास एक सर्वर होगा जो:
- पुश नोटिफ़िकेशन की सदस्यताओं को ट्रैक करता है (यानी जब कोई क्लाइंट पुश नोटिफ़िकेशन के लिए ऑप्ट-इन करता है, तो सर्वर एक नया डेटाबेस रिकॉर्ड बनाता है और क्लाइंट के ऑप्ट आउट करने पर मौजूदा डेटाबेस रिकॉर्ड को मिटा देता है)
- किसी एक क्लाइंट को पुश नोटिफ़िकेशन भेजता है
- सदस्यता लिए हुए सभी क्लाइंट को पुश नोटिफ़िकेशन भेजता है
इस कोडलैब का मकसद, सीखने-सिखाने में आपकी मदद करना है. यह कॉन्सेप्ट के बारे में ज़्यादा बात नहीं करता है. यह देखें कि पुश नोटिफ़िकेशन के सिद्धांतों के बारे में जानने के लिए, पुश नोटिफ़िकेशन कैसे काम करते हैं?.
इस कोडलैब का क्लाइंट कोड पहले ही पूरा हो चुका है. सर्वर को सिर्फ़ इस कोडलैब में लागू किया जाएगा. पुश नोटिफ़िकेशन क्लाइंट को लागू करने का तरीका जानने के लिए, कोडलैब: पुश नोटिफ़िकेशन क्लाइंट बनाएं देखें.
पूरा कोड देखने के लिए, 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 यूज़र इंटरफ़ेस (यूआई) होगा.
- प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.
पुष्टि करने की सुविधा सेट अप करें
इससे पहले कि पुश नोटिफ़िकेशन चालू हो, आपको पुष्टि करने वाली कुंजियों के साथ अपना सर्वर और क्लाइंट सेट अप करना होगा. इसकी वजह जानने के लिए, अपने वेब पुश प्रोटोकॉल अनुरोधों पर हस्ताक्षर करना देखें.
- Glitch टर्मिनल को खोलने के लिए, टूल पर क्लिक करें. इसके बाद, Terminal पर क्लिक करें.
- टर्मिनल में,
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"
- Glitch टर्मिनल बंद करें.
public/index.jsखोलें.VAPID_PUBLIC_KEY_VALUE_HEREकी जगह अपनी सार्वजनिक कुंजी की वैल्यू का इस्तेमाल करें.
सदस्यताएं प्रबंधित करें
आपका क्लाइंट, सदस्यता की ज़्यादातर प्रोसेस खुद संभालता है. आपके सर्वर को मुख्य तौर पर पुश नोटिफ़िकेशन की नई सदस्यताओं को सेव करना होगा और पुरानी सदस्यताओं को मिटाना होगा. इन सदस्यताओं की मदद से, आने वाले समय में क्लाइंट को मैसेज भेजे जा सकते हैं. सदस्यता की प्रोसेस के बारे में ज़्यादा जानकारी के लिए, पुश नोटिफ़िकेशन के लिए क्लाइंट की सदस्यता लेना देखें.
नई सदस्यता की जानकारी सेव करें
- साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन
दबाएं.
- ऐप्लिकेशन टैब में सर्विस वर्कर रजिस्टर करें पर क्लिक करें. स्टेटस बॉक्स में, आपको इससे मिलता-जुलता मैसेज दिखेगा:
Service worker registered. Scope: https://desert-cactus-sunset.glitch.me/
- ऐप्लिकेशन टैब में पुश करने के लिए सदस्यता लें पर क्लिक करें. आपका ब्राउज़र या ऑपरेटिंग सिस्टम आपसे पूछेगा कि क्या आपको वेबसाइट को पुश नोटिफ़िकेशन भेजने की अनुमति देनी है. Allow पर क्लिक करें (या ऐसा कोई भी वाक्यांश जिसका इस्तेमाल आपका ब्राउज़र/OS करता हो). स्थिति बॉक्स में आपको इससे मिलता-जुलता मैसेज दिखेगा:
Service worker subscribed to push. Endpoint: https://fcm.googleapis.com/fcm/send/…
- Glitch यूज़र इंटरफ़ेस में सोर्स देखें पर क्लिक करके, अपने कोड पर वापस जाएं.
- टूल पर क्लिक करने के बाद, लॉग पर क्लिक करके Glitch लॉग खोलें. आपको
/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);
}
});
- ऐप्लिकेशन टैब पर वापस जाएं.
- पुश की सदस्यता छोड़ें पर क्लिक करें. इसके बाद, पुश करने के लिए सदस्यता लें पर फिर से क्लिक करें. यह सिर्फ़ इसलिए ज़रूरी है, क्योंकि जैसा कि पहले बताया गया है, Glitch हर बार कोड में बदलाव करने पर प्रोजेक्ट को रीस्टार्ट करता है. साथ ही, प्रोजेक्ट को स्टार्टअप पर डेटाबेस को मिटाने के लिए कॉन्फ़िगर किया जाता है.
- मुझे सूचना दें पर क्लिक करें. आपको एक पुश नोटिफ़िकेशन मिलेगा. टाइटल
Hello, Notifications!होना चाहिए और मुख्य भागID: <ID>होना चाहिए, जहां<ID>एक रैंडम नंबर है. - अपना ऐप्लिकेशन अन्य ब्राउज़र या डिवाइसों पर खोलें और पुश नोटिफ़िकेशन की सदस्यता लेने के बाद, सभी को सूचना दें बटन पर क्लिक करें. आपने जिन डिवाइसों की सदस्यता ली है उन सभी पर आपको एक ही सूचना मिलनी चाहिए. जैसे, पुश नोटिफ़िकेशन के मुख्य हिस्से में मौजूद आईडी एक ही होना चाहिए.
अगले चरण
- पुश नोटिफ़िकेशन के काम करने के तरीके को समझने के लिए, पुश नोटिफ़िकेशन की खास जानकारी लेख पढ़ें.
- ऐसा क्लाइंट बनाने का तरीका जानने के लिए कोडलैब: पुश नोटिफ़िकेशन क्लाइंट बनाएं देखें जो नोटिफ़िकेशन की अनुमति का अनुरोध करता हो, पुश नोटिफ़िकेशन पाने के लिए डिवाइस की सदस्यता लेता हो, और पुश मैसेज पाने और मैसेज को सूचनाओं के रूप में दिखाने के लिए सर्विस वर्कर का इस्तेमाल करता हो.