वेब पुश के साथ काम करते समय सबसे ज़्यादा परेशानी यह है कि पुश मैसेज बहुत ज़्यादा ट्रिगर होता है "फ़िढ़ से". पुश मैसेज को ट्रिगर करने के लिए, किसी ऐप्लिकेशन को पुश के लिए पोस्ट अनुरोध करना होगा वेब पुश की वजह से सेवा प्रोटोकॉल. सभी में पुश करने की सुविधा इस्तेमाल करने के लिए ऐसे ब्राउज़र जिनमें आपको VAPID का इस्तेमाल करना होगा (जैसे कि ऐप्लिकेशन सर्वर कुंजियां) जिन्हें मूल रूप से हेडर सेट करने की ज़रूरत होती है. तो आपका ऐप्लिकेशन किसी उपयोगकर्ता को मैसेज भेज सकता है. पुश मैसेज के साथ डेटा भेजने के लिए, यह ज़रूरी है कि डेटा एन्क्रिप्ट किया गया और खास हेडर को जोड़ना ज़रूरी है, ताकि ब्राउज़र मैसेज को सही तरीके से डिक्रिप्ट कर सके.
ट्रिगर पुश के साथ मुख्य समस्या यह है कि अगर आपको कोई समस्या होती है, तो उसका विश्लेषण करना मुश्किल होता है समस्या. इसमें ज़्यादा समय और ब्राउज़र की सुविधा के साथ-साथ सुधार हो रहा है, लेकिन यह बहुत आसान है. इसके लिए इस वजह से, हमारा सुझाव है कि आप एन्क्रिप्ट (सुरक्षित) करने के तरीके, फ़ॉर्मैट, और आपका पुश मैसेज ट्रिगर कर रहा था या नहीं.
अगर लाइब्रेरी के काम के बारे में आपको जानना है, तो हम पब्लिशर के लिए पढ़ें. फ़िलहाल, हम सदस्यताओं को मैनेज करने और किसी मौजूदा वेब पुश लाइब्रेरी का इस्तेमाल करके पुश अनुरोध किए जा सकते हैं.
इस सेक्शन में, हम वेब-पुश नोड लाइब्रेरी पर जाएं. दूसरी भाषाओं में थोड़ा अंतर होगा, लेकिन वे बहुत असमान नहीं होंगे. हम नोड पर गौर कर रहे हैं क्योंकि यह JavaScript है और सबसे ज़्यादा ऐक्सेस किए जा सकते हैं.
हम यहां दिया गया तरीका अपनाएं:
- हमारे बैकएंड पर सदस्यता भेजें और इसे सेव करें.
- सेव की गई सदस्यताएं वापस पाएं और पुश मैसेज ट्रिगर करें.
सदस्यताएं सेव की जा रही हैं
PushSubscription को डेटाबेस में सेव करने और क्वेरी करने की सुविधा, इन बातों पर निर्भर करती है
अपनी पसंद का डेटा सेट कर सकते हैं. हालांकि, अगर आपको यह जानना है कि
उदाहरण के तौर पर दिया गया है कि इसे कैसे किया जा सकता है.
डेमो वेब पेज में, एक आसान से पोस्ट अनुरोध करके, PushSubscription को हमारे बैकएंड पर भेजा जाता है:
function sendSubscriptionToBackEnd(subscription) {
return fetch('/api/save-subscription/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(subscription),
})
.then(function (response) {
if (!response.ok) {
throw new Error('Bad status code from server.');
}
return response.json();
})
.then(function (responseData) {
if (!(responseData.data && responseData.data.success)) {
throw new Error('Bad response from server.');
}
});
}
हमारे डेमो के एक्सप्रेस सर्वर में
/api/save-subscription/ एंडपॉइंट:
app.post('/api/save-subscription/', function (req, res) {
इस प्रोसेस में, हम सदस्यता की पुष्टि करते हैं, ताकि यह पक्का किया जा सके कि अनुरोध में दी गई जानकारी सही है और पूरी तरह से भरी नहीं है गै़रबेज:
const isValidSaveRequest = (req, res) => {
// Check the request body has at least an endpoint.
if (!req.body || !req.body.endpoint) {
// Not a valid subscription.
res.status(400);
res.setHeader('Content-Type', 'application/json');
res.send(
JSON.stringify({
error: {
id: 'no-endpoint',
message: 'Subscription must have an endpoint.',
},
}),
);
return false;
}
return true;
};
अगर सदस्यता मान्य है, तो हमें इसे सेव करके किसी उचित JSON का रिस्पॉन्स:
return saveSubscriptionToDatabase(req.body)
.then(function (subscriptionId) {
res.setHeader('Content-Type', 'application/json');
res.send(JSON.stringify({data: {success: true}}));
})
.catch(function (err) {
res.status(500);
res.setHeader('Content-Type', 'application/json');
res.send(
JSON.stringify({
error: {
id: 'unable-to-save-subscription',
message:
'The subscription was received but we were unable to save it to our database.',
},
}),
);
});
यह डेमो सदस्यताएं संग्रहित करने के लिए नेडी का इस्तेमाल करता है, यह एक आसान फ़ाइल आधारित डेटाबेस, लेकिन अपनी पसंद के किसी भी डेटाबेस का इस्तेमाल किया जा सकता है. हम इसे सिर्फ़ इस तरह इस्तेमाल कर रहे हैं इसके लिए कोई सेट-अप नहीं करना पड़ता. प्रोडक्शन के लिए आपको ज़्यादा भरोसेमंद सोर्स का इस्तेमाल करना चाहिए. (मुझे अक्सर अच्छे पुराने MySQL के साथ बने रहें.)
function saveSubscriptionToDatabase(subscription) {
return new Promise(function (resolve, reject) {
db.insert(subscription, function (err, newDoc) {
if (err) {
reject(err);
return;
}
resolve(newDoc._id);
});
});
}
पुश मैसेज भेजे जा रहे हैं
जब पुश मैसेज भेजने की बात आती है, तो हमें इस प्रोसेस को ट्रिगर करने के लिए किसी इवेंट की ज़रूरत होती है
उपयोगकर्ताओं को मैसेज भेजने के लिए करते हैं. इसके लिए एक सामान्य तरीका यह है कि आप एडमिन पेज बनाएं. इससे आपको
पुश मैसेज को कॉन्फ़िगर और ट्रिगर कर सकता है. लेकिन आप स्थानीय रूप से या किसी भी समय चलाने के लिए एक प्रोग्राम बना सकते है
दूसरा तरीका है, जो PushSubscription की सूची को ऐक्सेस करने और कोड को इस तरह से चलाने की अनुमति देता है:
पुश मैसेज को ट्रिगर कर सकता है.
हमारे डेमो में "एडमिन पसंद" है पुश को ट्रिगर किया जा सकता है. यह सिर्फ़ डेमो है, सार्वजनिक पेज.
मैं डेमो को काम करने के लिए, इसके हर चरण पर करूंगी. ये बच्चे होंगे यह ज़रूरी है, ताकि सभी लोग आगे बढ़ सकें. इनमें ऐसे लोग भी शामिल हैं जो नोड पर नए हैं.
जब हमने किसी उपयोगकर्ता की सदस्यता लेने के बारे में चर्चा की, तब हमनेapplicationServerKey
subscribe() विकल्प. पीछे की ओर, हमें इस निजी कुंजी की ज़रूरत होगी.
डेमो में, इन वैल्यू को हमारे नोड ऐप्लिकेशन में ठीक उसी तरह जोड़ा जाता है जैसे (बोरिंग कोड मुझे पता है, लेकिन मुझे सिर्फ़ जैसा कि बताया गया है),
const vapidKeys = {
publicKey:
'BEl62iUYgUivxIkv69yViEuiBIa-Ib9-SkvMeAtA3LFgDzkrxZJjSgSnfckjBJuBkr3qBUYIHBQFLXYp5Nksh8U',
privateKey: 'UUxI4O8-FbRouAevSmBQ6o18hgE4nSG3qwvJTfKc-ls',
};
इसके बाद हमें अपने नोड सर्वर के लिए web-push मॉड्यूल इंस्टॉल करना होगा:
npm install web-push --save
इसके बाद, हमारी नोड स्क्रिप्ट में web-push मॉड्यूल होना ज़रूरी है
पसंद:
const webpush = require('web-push');
अब हम web-push मॉड्यूल का इस्तेमाल करना शुरू कर सकते हैं. सबसे पहले हमें web-push मॉड्यूल को इसके बारे में बताना होगा
हमारी ऐप्लिकेशन सर्वर कुंजियों के बारे में ज़्यादा जानें. (याद रखें कि इन्हें VAPID कुंजियां भी कहा जाता है, क्योंकि
में बदलाव करना होगा.)
const vapidKeys = {
publicKey:
'BEl62iUYgUivxIkv69yViEuiBIa-Ib9-SkvMeAtA3LFgDzkrxZJjSgSnfckjBJuBkr3qBUYIHBQFLXYp5Nksh8U',
privateKey: 'UUxI4O8-FbRouAevSmBQ6o18hgE4nSG3qwvJTfKc-ls',
};
webpush.setVapidDetails(
'mailto:web-push-book@gauntface.com',
vapidKeys.publicKey,
vapidKeys.privateKey,
);
ध्यान दें कि हमने एक "mailto:" भी शामिल किया है: स्ट्रिंग. यह स्ट्रिंग कोई URL या mailto होनी चाहिए ईमेल पता. इस जानकारी का यह हिस्सा असल में वेब पुश सेवा को पुश नोटिफ़िकेशन का अनुरोध करें. ऐसा इसलिए किया जाता है, ताकि किसी वेब पुश सेवा की ज़रूरत पड़ने पर, भेजने वाले से संपर्क करने के लिए, उसके पास कुछ जानकारी होती है. इसकी मदद से वह व्यक्ति से संपर्क कर सकता है.
इसके साथ, web-push मॉड्यूल इस्तेमाल के लिए तैयार है. अगला चरण पुश मैसेज ट्रिगर करना है.
डेमो, पुश मैसेज को ट्रिगर करने के लिए, एडमिन पैनल की भूमिका निभाता है.
"ट्रिगर पुश मैसेज" पर क्लिक करके बटन /api/trigger-push-msg/ को एक पोस्ट अनुरोध करेगा,
जो हमारे बैकएंड के लिए पुश मैसेज भेजने का सिग्नल है, इसलिए हम रूट बनाते हैं
इस एंडपॉइंट के लिए एक्सप्रेस करें:
app.post('/api/trigger-push-msg/', function (req, res) {
यह अनुरोध मिलने पर, हम डेटाबेस से सदस्यताएं ले लेते हैं और करते हैं, तो हम एक पुश मैसेज ट्रिगर करते हैं.
return getSubscriptionsFromDatabase().then(function (subscriptions) {
let promiseChain = Promise.resolve();
for (let i = 0; i < subscriptions.length; i++) {
const subscription = subscriptions[i];
promiseChain = promiseChain.then(() => {
return triggerPushMsg(subscription, dataToSend);
});
}
return promiseChain;
});
इसके बाद, triggerPushMsg() फ़ंक्शन वेब-पुश लाइब्रेरी का इस्तेमाल करके
दी गई सदस्यता.
const triggerPushMsg = function (subscription, dataToSend) {
return webpush.sendNotification(subscription, dataToSend).catch((err) => {
if (err.statusCode === 404 || err.statusCode === 410) {
console.log('Subscription has expired or is no longer valid: ', err);
return deleteSubscriptionFromDatabase(subscription._id);
} else {
throw err;
}
});
};
webpush.sendNotification() पर किए गए कॉल में प्रॉमिस प्रॉमिस होगा. अगर
संदेश भेज दिया गया था, इसलिए वचन का समाधान हो जाएगा और अब
करने की ज़रूरत नहीं है. अगर प्रॉमिस अस्वीकार हो जाता है, तो आपको
गड़बड़ी मिलेगी, क्योंकि इससे आपको यह पता चल जाएगा कि PushSubscription अब भी है या नहीं
मान्य है या नहीं.
पुश सेवा से मिलने वाली गड़बड़ी किस तरह की है, यह पता करने के लिए स्टेटस कोड देखें. गड़बड़ी हुई पुश सेवाओं के बीच संदेश अलग-अलग होते हैं और कुछ अन्य की तुलना में अधिक उपयोगी होते हैं.
इस उदाहरण में, यह स्टेटस कोड 404 और 410 की जांच करता है, जो कि
'नहीं मिला' और 'ग गया'. अगर हमें इनमें से कोई एक सूचना मिलती है, तो इसका मतलब है कि आपकी सदस्यता खत्म हो गई है
या अब मान्य नहीं है. ऐसी स्थितियों में, हमें अपने डेटाबेस से सदस्यताओं को हटाना होगा.
किसी अन्य गड़बड़ी की स्थिति में, हम सिर्फ़ throw err करते हैं, जिससे प्रॉमिस पास करके,
triggerPushMsg() ने अस्वीकार किया.
जब हम वेब पुश नोटिफ़िकेशन पर गौर करेंगे, तो हम अगले सेक्शन में कुछ अन्य स्टेटस कोड के बारे में बताएंगे प्रोटोकॉल के बारे में ज़्यादा जानें.
सदस्यताओं को लूप में चलाने के बाद, हमें JSON कोड दिखाना होगा.
.then(() => {
res.setHeader('Content-Type', 'application/json');
res.send(JSON.stringify({ data: { success: true } }));
})
.catch(function(err) {
res.status(500);
res.setHeader('Content-Type', 'application/json');
res.send(JSON.stringify({
error: {
id: 'unable-to-send-messages',
message: `We were unable to send messages to all subscriptions : ` +
`'${err.message}'`
}
}));
});
हमने लागू करने के बुनियादी चरणों को देख लिया है:
- हमारे वेब पेज से सदस्यताओं को हमारे बैक-एंड पर भेजने के लिए, एक एपीआई बनाएं ताकि उन्हें डेटाबेस में सेव किया जा सके.
- पुश मैसेज भेजने को ट्रिगर करने के लिए एक एपीआई बनाएं (इस मामले में, एपीआई को एडमिन पैनल से कॉल किया गया है).
- हमारे बैकएंड से सभी सदस्यताएं वापस पाना और एक वेब-पुश विंडो के साथ हर सदस्यता को एक मैसेज भेजें लाइब्रेरी.
आप बैकएंड (Node, PHP, Python, ...) पर ध्यान दिए बिना भी पुश लागू करने के चरण पूरे कर रहे हैं एक जैसा रहेगा.
आगे, ये वेब-पुश लाइब्रेरी हमारे लिए असल में क्या कर रही हैं?
आगे कहां जाना है
- वेब पर मिले पुश नोटिफ़िकेशन के बारे में खास जानकारी
- पुश के काम करने का तरीका
- किसी उपयोगकर्ता की सदस्यता लेना
- उपयोगकर्ता अनुभव से जुड़ी अनुमति
- वेब पुश लाइब्रेरी से मैसेज भेजना
- वेब पुश प्रोटोकॉल
- पुश इवेंट को मैनेज करना
- सूचना दिखाना
- सूचना किस तरह की है
- सूचना के सामान्य पैटर्न
- पुश नोटिफ़िकेशन के बारे में अक्सर पूछे जाने वाले सवाल
- सामान्य समस्याएं और गड़बड़ियां रिपोर्ट करना