पुश सूचनाएँ
अनुमति माँगें, Push API से पुश की सदस्यता लें, सर्विस वर्कर में संदेश प्राप्त करें, और showNotification से सूचनाएँ दिखाएँ।
पुश सूचनाएँ, CoddyKit पर Frontend Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Frontend Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
पुश सूचनाएँ क्यों
पुश सूचनाएँ तब उपयोगकर्ताओं को वापस जोड़ती हैं जब ऐप खुला नहीं होता — जैसे संदेश अलर्ट, समाचार अपडेट और छोड़ी गई खरीदारी की याद दिलाना। इन्हें सर्विस वर्कर संचालित करता है, इसलिए पृष्ठ बंद होने पर भी ये काम करती हैं।
Push API + Notifications API
दो ब्राउज़र API मिलकर काम करते हैं। Push API पुश सदस्यता के माध्यम से सर्वर से संदेश प्राप्त करता है। Notifications API उपयोगकर्ता को संदेश दिखाता है।
permission का अनुरोध करना
सदस्यता लेने से पहले उपयोगकर्ता से permission माँगें — ऐसा केवल स्पष्ट उपयोगकर्ता कार्रवाई (बटन क्लिक) के उत्तर में करें, पृष्ठ लोड होते ही नहीं।
async function enableNotifications() {
const permission = await Notification.requestPermission();
if (permission !== 'granted') {
alert('Notifications denied');
return;
}
// proceed to subscribe...
}पुश सदस्यता
सक्रिय सर्विस वर्कर पंजीकरण के माध्यम से सदस्यता लें। सर्वर की VAPID सार्वजनिक कुंजी सदस्यता को प्रमाणित करती है।
async function subscribeToPush() {
const reg = await navigator.serviceWorker.ready;
const sub = await reg.pushManager.subscribe({
userVisibleOnly: true, // required: every push must show a notification
applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY)
});
// Send sub to your server:
await fetch('/api/save-subscription', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(sub)
});
}VAPID कुंजियाँ
VAPID (Voluntary Application Server Identification) कुंजियाँ आपके सर्वर की पहचान पुश सेवाओं (FCM, मोज़िला आदि) से कराती हैं। इन्हें एक बार जनरेट करें और निजी कुंजी अपने सर्वर पर रखें।
# Generate VAPID keys with web-push CLI:
npx web-push generate-vapid-keys
# Output:
# Public Key: BJ...
# Private Key: ka...सर्वर-पक्ष पुश
संग्रहीत सदस्यता पर पुश भेजने के लिए web-push npm लाइब्रेरी का उपयोग करें।
import webpush from 'web-push';
webpush.setVapidDetails(
'mailto:you@example.com',
process.env.VAPID_PUBLIC,
process.env.VAPID_PRIVATE
);
await webpush.sendNotification(savedSubscription, JSON.stringify({
title: 'New message',
body: 'Alice sent you a message',
url: '/inbox/123'
}));सर्विस वर्कर में पुश संभालना
SW पुश घटना प्राप्त करता है और एक सूचना दिखाता है।
// sw.js
self.addEventListener('push', (event) => {
const data = event.data ? event.data.json() : {};
event.waitUntil(
self.registration.showNotification(data.title || 'Notification', {
body: data.body,
icon: '/icons/192.png',
badge: '/icons/badge.png',
data: { url: data.url }
})
);
});सूचना क्लिक हैंडलर
उपयोगकर्ता के सूचना पर क्लिक करने पर ऐप खोलें या उसे focus करें।
self.addEventListener('notificationclick', (event) => {
event.notification.close();
const url = event.notification.data.url || '/';
event.waitUntil(
clients.matchAll({ type: 'window' }).then(clientList => {
for (const client of clientList) {
if (client.url.endsWith(url) && 'focus' in client) return client.focus();
}
return clients.openWindow(url);
})
);
});सूचना विकल्प
अनुकूलित करें: आइकन, बैज (सूचना क्षेत्र का छोटा आइकन), चित्र (बड़ा), कार्रवाइयाँ (बटन), टैग (समान टैग वाली पुरानी सूचनाओं को बदलता है), requireInteraction (खारिज किए जाने तक बनी रहती है) और मौन।
self.registration.showNotification('Message', {
body: 'Alice sent you a photo',
icon: '/icons/192.png',
image: '/images/alice-photo.jpg',
actions: [
{ action: 'view', title: 'View' },
{ action: 'reply', title: 'Reply' }
],
tag: 'message-from-alice', // replaces earlier 'message-from-alice'
requireInteraction: false
});सदस्यता समाप्त करना
उपयोगकर्ताओं को बाहर निकलने दें — pushSubscription.unsubscribe() को कॉल करें और अपने सर्वर से सदस्यता हटा दें।
async function disablePush() {
const reg = await navigator.serviceWorker.ready;
const sub = await reg.pushManager.getSubscription();
if (sub) {
await sub.unsubscribe();
await fetch('/api/delete-subscription', {
method: 'POST',
body: JSON.stringify({ endpoint: sub.endpoint })
});
}
}iOS समर्थन
iOS 16.4 और उसके बाद के संस्करण Web Push का समर्थन करते हैं, लेकिन केवल होम स्क्रीन पर इंस्टॉल किए गए PWA के लिए। iOS 16.4 से पहले के उपकरण और iPhone पर Safari का वेब संस्करण Web Push का बिल्कुल समर्थन नहीं करते।
सर्वोत्तम अभ्यास
1) permission केवल स्पष्ट उपयोगकर्ता कार्रवाई के बाद माँगें। 2) सार्थक और कम बार सूचनाएँ भेजें। 3) पुश घटना पर हमेशा एक सूचना दिखाएँ (यदि आप ऐसा न करें तो ब्राउज़र permission वापस ले सकते हैं)। 4) सदस्यता समाप्त करने का आसान तरीका दें। 5) सभी 3 पुश सेवाओं (FCM, मोज़िला, WindowsPush) के साथ परीक्षण करें।
आम समस्याएँ
पुश बिना कोई संकेत दिए विफल हो जाता है यदि: userVisibleOnly false हो (क्रोम में true आवश्यक है), VAPID कुंजियाँ मेल न खाती हों, सदस्यता समाप्त हो गई हो (फिर से subscribe करें) या पुश घटना पर कोई सूचना न दिखाई गई हो (ब्राउज़र सदस्यता रद्द कर देता है)।
त्वरित जाँच
हर पुश संदेश के परिणामस्वरूप दिखाई देने वाली सूचना (userVisibleOnly: true के साथ) आना क्यों आवश्यक है?
पुनरावलोकन: पुश सूचनाएँ
permission का अनुरोध केवल उपयोगकर्ता कार्रवाई के माध्यम से करें। VAPID सार्वजनिक कुंजी के साथ reg.pushManager.subscribe के माध्यम से सदस्यता लें। सर्वर भेजने के लिए web-push लाइब्रेरी का उपयोग करता है। SW की पुश घटना showNotification को कॉल करती है। notificationclick आपका ऐप खोलता या focus करता है। आइकन, बैज, चित्र, कार्रवाइयाँ और टैग अनुकूलित करें। हमेशा एक सूचना दिखाएँ (userVisibleOnly: true आवश्यक है)। iOS 16.4 और उसके बाद इसका समर्थन करते हैं, लेकिन केवल इंस्टॉल किए गए PWA के लिए।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 41
- पाठ
- 163
अक्सर पूछे जाने वाले प्रश्न
क्या “पुश सूचनाएँ” पाठ निःशुल्क है?
हाँ—“पुश सूचनाएँ” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Frontend Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“पुश सूचनाएँ” में मैं क्या सीखूँगा?
अनुमति माँगें, Push API से पुश की सदस्यता लें, सर्विस वर्कर में संदेश प्राप्त करें, और showNotification से सूचनाएँ दिखाएँ। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Frontend Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Frontend Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Frontend Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।
“पुश सूचनाएँ” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Frontend Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Frontend Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- वेब ऐप मेनिफ़ेस्ट
- सर्विस वर्कर पंजीकरण और जीवनचक्र
- ऑफ़लाइन कैशिंग रणनीतियाँ: CacheFirst और NetworkFirst
- पुश सूचनाएँ