इस कोडलैब में, पुश नोटिफ़िकेशन क्लाइंट बनाने का तरीका सिलसिलेवार तरीके से बताया गया है. इस कोडलैब को पूरा करने के बाद, आपके पास ऐसा क्लाइंट होगा जो:
- यह कुकी, उपयोगकर्ता को पुश नोटिफ़िकेशन पाने की सुविधा के लिए रजिस्टर करती है.
- यह कुकी, पुश मैसेज पाने और उन्हें सूचनाओं के तौर पर दिखाने का काम करती है.
- यह कुकी, उपयोगकर्ता को पुश नोटिफ़िकेशन पाने की सुविधा से ऑप्ट आउट करती है.
इस कोडलैब का मकसद, आपको खुद करके सीखने में मदद करना है. इसमें सिद्धांतों के बारे में ज़्यादा जानकारी नहीं दी गई है. पुश नोटिफ़िकेशन के कॉन्सेप्ट के बारे में जानने के लिए, पुश नोटिफ़िकेशन कैसे काम करती हैं? लेख पढ़ें.
इस कोडलैब का सर्वर कोड पहले ही पूरा हो चुका है. इस कोडलैब में, आपको सिर्फ़ क्लाइंट को लागू करना होगा. पुश नोटिफ़िकेशन सर्वर लागू करने का तरीका जानने के लिए, कोडलैब: पुश नोटिफ़िकेशन सर्वर बनाएं देखें.
ब्राउज़र के साथ काम करना
यह कोडलैब, इन ऑपरेटिंग सिस्टम और ब्राउज़र के साथ काम करता है:
- Windows: Chrome, Edge
- macOS: Chrome, Firefox
- Android: Chrome, Firefox
यह कोडलैब, इन ऑपरेटिंग सिस्टम के साथ काम नहीं करता: (या ऑपरेटिंग सिस्टम और ब्राउज़र के कॉम्बिनेशन):
- macOS: Brave, Edge, Safari
- iOS
सेटअप
कोड की ऐसी कॉपी पाना जिसमें बदलाव किया जा सके
- प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.
पुष्टि करने की सुविधा सेट अप करना
पुश नोटिफ़िकेशन की सुविधा चालू करने से पहले, आपको अपने सर्वर और क्लाइंट को पुष्टि करने वाली कुंजियों के साथ सेट अप करना होगा.
इसकी वजह जानने के लिए, वेब पुश प्रोटोकॉल के अनुरोधों पर हस्ताक्षर करना लेख पढ़ें. आम तौर पर, सीक्रेट को इस तरह की .env फ़ाइल में सेव किया जाता है.
VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"
public/index.jsखोलें.VAPID_PUBLIC_KEY_VALUE_HEREको अपनी सार्वजनिक पासकोड की वैल्यू से बदलें.
सर्विस वर्कर रजिस्टर करना
आपके क्लाइंट को सूचनाएं पाने और उन्हें दिखाने के लिए, सर्विस वर्कर की ज़रूरत होगी. सर्विस वर्कर को जल्द से जल्द रजिस्टर करना सबसे अच्छा होता है. ज़्यादा जानकारी के लिए, पुश किए गए मैसेज को सूचनाओं के तौर पर पाना और दिखाना लेख पढ़ें.
// TODO add startup logic hereटिप्पणी की जगह यह कोड डालें:
// TODO add startup logic here
if ('serviceWorker' in navigator && 'PushManager' in window) {
navigator.serviceWorker.register('./service-worker.js').then(serviceWorkerRegistration => {
console.info('Service worker was registered.');
console.info({serviceWorkerRegistration});
}).catch(error => {
console.error('An error occurred while registering the service worker.');
console.error(error);
});
subscribeButton.disabled = false;
} else {
console.error('Browser does not support service workers or push messages.');
}
subscribeButton.addEventListener('click', subscribeButtonHandler);
unsubscribeButton.addEventListener('click', unsubscribeButtonHandler);
- DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.
- कंसोल टैब पर क्लिक करें. आपको कंसोल में
Service worker was registered.लॉग किया गया मैसेज दिखेगा.
पुश नोटिफ़िकेशन की अनुमति के लिए अनुरोध करना
आपको पेज लोड होने पर, पुश नोटिफ़िकेशन भेजने की अनुमति का अनुरोध कभी नहीं करना चाहिए. इसके बजाय, आपके यूज़र इंटरफ़ेस (यूआई) को उपयोगकर्ता से यह पूछना चाहिए कि क्या उसे पुश नोटिफ़िकेशन चाहिए. जब उपयोगकर्ता साफ़ तौर पर पुष्टि कर देता है (जैसे, बटन पर क्लिक करके), तब ब्राउज़र से पुश नोटिफ़िकेशन की अनुमति पाने के लिए, औपचारिक प्रोसेस शुरू की जा सकती है.
public/index.jsमें,// TODOटिप्पणी कोsubscribeButtonHandler()में दिए गए इस कोड से बदलें:
// TODO
// Prevent the user from clicking the subscribe button multiple times.
subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
console.error('The user explicitly denied the permission request.');
return;
}
if (result === 'granted') {
console.info('The user accepted the permission request.');
}
- ऐप्लिकेशन टैब पर वापस जाएं और पुश नोटिफ़िकेशन के लिए सदस्यता लें पर क्लिक करें. आपका ब्राउज़र या ऑपरेटिंग सिस्टम आपसे पूछेगा कि क्या आपको वेबसाइट को पुश नोटिफ़िकेशन भेजने की अनुमति देनी है. अनुमति दें पर क्लिक करें. इसके अलावा, आपके ब्राउज़र/ओएस में जो भी विकल्प उपलब्ध हो उसे चुनें. आपको कंसोल में एक मैसेज दिखेगा. इससे पता चलेगा कि अनुरोध स्वीकार किया गया है या अस्वीकार.
पुश नोटिफ़िकेशन पाने के लिए सदस्यता लें
सदस्यता लेने की प्रोसेस में, ब्राउज़र बनाने वाली कंपनी की कंट्रोल की गई वेब सेवा के साथ इंटरैक्ट करना शामिल होता है. इसे पुश सेवा कहा जाता है. पुश नोटिफ़िकेशन की सदस्यता से जुड़ी जानकारी मिलने के बाद, आपको इसे सर्वर पर भेजना होगा. साथ ही, सर्वर को इसे डेटाबेस में लंबे समय तक सेव करने के लिए कहना होगा. सदस्यता लेने की प्रोसेस के बारे में ज़्यादा जानने के लिए, क्लाइंट को पुश नोटिफ़िकेशन पाने के लिए सदस्यता दिलाना लेख पढ़ें.
subscribeButtonHandler()में हाइलाइट किया गया यह कोड जोड़ें:
subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
console.error('The user explicitly denied the permission request.');
return;
}
if (result === 'granted') {
console.info('The user accepted the permission request.');
}
const registration = await navigator.serviceWorker.getRegistration();
const subscribed = await registration.pushManager.getSubscription();
if (subscribed) {
console.info('User is already subscribed.');
notifyMeButton.disabled = false;
unsubscribeButton.disabled = false;
return;
}
const subscription = await registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: urlB64ToUint8Array(VAPID_PUBLIC_KEY)
});
notifyMeButton.disabled = false;
fetch('/add-subscription', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(subscription)
});
userVisibleOnly विकल्प true होना चाहिए. ऐसा हो सकता है कि आने वाले समय में, उपयोगकर्ताओं को सूचनाएं दिखाए बिना मैसेज भेजे जा सकें (साइलेंट पुश). हालांकि, निजता से जुड़ी चिंताओं की वजह से, ब्राउज़र फ़िलहाल इसकी अनुमति नहीं देते हैं.
applicationServerKey वैल्यू, यूटिलिटी फ़ंक्शन पर निर्भर करती है. यह फ़ंक्शन, base64 स्ट्रिंग को Uint8Array में बदलता है. इस वैल्यू का इस्तेमाल, आपके सर्वर और पुश सेवा के बीच पुष्टि करने के लिए किया जाता है.
पुश नोटिफ़िकेशन पाने की सुविधा बंद करना
अगर कोई उपयोगकर्ता पुश नोटिफ़िकेशन पाने के लिए ऑप्ट-इन करता है, तो आपके यूज़र इंटरफ़ेस (यूआई) में ऑप्ट-आउट करने का विकल्प होना चाहिए. ऐसा तब होता है, जब उपयोगकर्ता अपना मन बदल लेता है और अब पुश नोटिफ़िकेशन नहीं पाना चाहता.
unsubscribeButtonHandler()में मौजूद// TODOटिप्पणी की जगह, यह कोड डालें:
// TODO
const registration = await navigator.serviceWorker.getRegistration();
const subscription = await registration.pushManager.getSubscription();
fetch('/remove-subscription', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({endpoint: subscription.endpoint})
});
const unsubscribed = await subscription.unsubscribe();
if (unsubscribed) {
console.info('Successfully unsubscribed from push notifications.');
unsubscribeButton.disabled = true;
subscribeButton.disabled = false;
notifyMeButton.disabled = true;
}
पुश मैसेज पाना और उसे सूचना के तौर पर दिखाना
जैसा कि पहले बताया गया है, आपको एक सर्विस वर्कर की ज़रूरत होगी. इसकी मदद से, क्लाइंट को आपके सर्वर से पुश किए गए मैसेज को रिसीव और डिसप्ले किया जा सकेगा. ज़्यादा जानकारी के लिए, पुश किए गए मैसेज को सूचनाओं के तौर पर पाना और दिखाना लेख पढ़ें.
public/service-worker.jsखोलें और सर्विस वर्कर केpushइवेंट हैंडलर में मौजूद// TODOटिप्पणी को इस कोड से बदलें:
// TODO
let data = event.data.json();
const image = 'logo.png';
const options = {
body: data.options.body,
icon: image
}
self.registration.showNotification(
data.title,
options
);
- ऐप्लिकेशन टैब पर वापस जाएं.
- मुझे सूचना दें पर क्लिक करें. आपको एक पुश नोटिफ़िकेशन मिलेगा.
- अपने ऐप्लिकेशन टैब का यूआरएल, दूसरे ब्राउज़र या अन्य डिवाइसों पर खोलें. इसके बाद, सदस्यता लेने की प्रोसेस पूरी करें. इसके बाद, सभी को सूचना भेजें पर क्लिक करें. आपको उन सभी ब्राउज़र पर एक ही पुश नोटिफ़िकेशन मिलेगा जिनके लिए आपने सदस्यता ली है. ब्राउज़र के साथ काम करने की सुविधा के बारे में जानकारी देने वाला लेख पढ़ें. इसमें ब्राउज़र/ओएस के उन कॉम्बिनेशन की सूची दी गई है जिनके साथ यह सुविधा काम करती है या नहीं करती.
सूचना को कई तरीकों से अपनी पसंद के मुताबिक बनाया जा सकता है. ज़्यादा जानने के लिए, ServiceWorkerRegistration.showNotification() के पैरामीटर देखें.
जब कोई उपयोगकर्ता सूचना पर क्लिक करे, तब यूआरएल खोलना
असल दुनिया में, सूचना का इस्तेमाल शायद उपयोगकर्ता को फिर से जोड़ने और उसे अपनी साइट पर आने के लिए प्रेरित करने के लिए किया जाएगा. इसके लिए, आपको अपने सर्विस वर्कर को थोड़ा और कॉन्फ़िगर करना होगा.
- सर्विस वर्कर के
notificationclickइवेंट हैंडलर में मौजूद// TODOटिप्पणी को इस कोड से बदलें:
// TODO
event.notification.close();
event.waitUntil(self.clients.openWindow('https://web.dev'));
- ऐप्लिकेशन टैब पर वापस जाएं. खुद को एक और सूचना भेजें. इसके बाद, सूचना पर क्लिक करें. आपके ब्राउज़र में एक नया टैब खुलना चाहिए और
https://web.devलोड होना चाहिए.
अगले चरण
- सूचनाओं को पसंद के मुताबिक बनाने के सभी तरीकों के बारे में जानने के लिए,
ServiceWorkerRegistration.showNotification()पर जाएं. - पुश नोटिफ़िकेशन के काम करने के तरीके के बारे में ज़्यादा जानने के लिए, पुश नोटिफ़िकेशन की खास जानकारी पढ़ें.
- कोडलैब: पुश नोटिफ़िकेशन सर्वर बनाना देखें. इससे आपको ऐसा सर्वर बनाने का तरीका पता चलेगा जो सदस्यताएं मैनेज करता है और वेब पुश प्रोटोकॉल के अनुरोध भेजता है.
- सूचनाओं को पसंद के मुताबिक बनाने के सभी तरीकों को आज़माने के लिए, सूचना जनरेट करने वाला टूल आज़माएं.