Vue Academy · पाठ

Vue PWA में पुश सूचनाएँ

Push API, Notification API, VAPID कुंजियाँ, उपयोगकर्ताओं की सदस्यता और सर्वर से भेजना

पाठ 4, कुल 4 में से13 चरण

Vue PWA में पुश सूचनाएँ, CoddyKit पर Vue Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Vue Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Vue Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

PWA में पुश सूचनाएँ

वेब पुश आपके सर्वर को ऐप बंद होने पर भी उपयोगकर्ता को सूचनाएँ भेजने देता है। यह सूचना एपीआई, पुश एपीआई और सर्विस वर्कर को मिलाकर काम करता है और इन सभी के लिए उपयोगकर्ता की स्पष्ट अनुमति आवश्यक होती है।

अनुमति माँगना

सदस्यता लेने से पहले आपको अनुमति माँगनी होगी। Notification.requestPermission() एक प्रॉमिस लौटाता है, जिसका परिणाम "granted", "denied" या "default" हो सकता है।

const permission = await Notification.requestPermission();
if (permission === "granted") {
  // proceed to subscribe
}

उपयोगकर्ता की क्रिया से अनुरोध शुरू करें

ब्राउज़र अनुमति संवाद को बटन क्लिक जैसी उपयोगकर्ता कार्रवाई के तुरंत बाद दिखाना अनिवार्य करते हैं। पेज लोड होते समय कभी अनुमति न माँगें - इसे अनदेखा किया जा सकता है या इससे उपयोगकर्ता परेशान हो सकते हैं।

<button @click="enableNotifications">
  Enable notifications
</button>

सर्विस वर्कर पंजीकरण प्राप्त करना

पुश सदस्यताएँ सक्रिय सर्विस वर्कर पंजीकरण से जुड़ी होती हैं। इसे पाने के लिए navigator.serviceWorker.ready की प्रतीक्षा करें।

const registration = await navigator.serviceWorker.ready;

applicationServerKey

पुश में VAPID कुंजियों का उपयोग होता है। सर्वर निजी कुंजी रखता है; क्लाइंट सार्वजनिक कुंजी से सदस्यता लेता है, जिसे Uint8Array में बदला जाता है।

function urlBase64ToUint8Array(base64) {
  const padding = "=".repeat((4 - base64.length % 4) % 4);
  const raw = atob((base64 + padding).replace(/-/g, "+").replace(/_/g, "/"));
  return Uint8Array.from([...raw].map((c) => c.charCodeAt(0)));
}

pushManager.subscribe

पंजीकरण के pushManager के माध्यम से सदस्यता लें। userVisibleOnly: true सेट करें और बदली हुई applicationServerKey पास करें।

const subscription = await registration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY)
});

userVisibleOnly क्यों

userVisibleOnly: true यह सुनिश्चित करता है कि हर पुश एक दिखाई देने वाली सूचना दिखाए। मूक पृष्ठभूमि ट्रैकिंग रोकने के लिए ब्राउज़र इसे अनिवार्य करते हैं।

सदस्यता अपने सर्वर को भेजना

सदस्यता ऑब्जेक्ट में वह endpoint और कुंजियाँ होती हैं जिनकी सर्वर को आवश्यकता होती है। बाद में भेजने के लिए इसे अपने बैकएंड को POST करें।

await fetch("/api/subscribe", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(subscription)
});

सर्वर पुश भेजता है

आपका बैकएंड वेब पुश लाइब्रेरी और VAPID निजी कुंजी का उपयोग करके संग्रहीत endpoint पर payload भेजता है।

// Node backend (web-push library)
webpush.sendNotification(
  subscription,
  JSON.stringify({ title: "Hello", body: "New message" })
);

सर्विस वर्कर में पुश प्राप्त करना

सर्विस वर्कर push इवेंट संभालता है और इसे दिखाने के लिए showNotification का आह्वान करता है।

// service worker
self.addEventListener("push", (event) => {
  const data = event.data.json();
  event.waitUntil(
    self.registration.showNotification(data.title, {
      body: data.body,
      icon: "/pwa-192.png"
    })
  );
});

सूचना क्लिक संभालना

सही पेज पर ऐप को सक्रिय करने या खोलने के लिए notificationclick इवेंट के माध्यम से क्लिक का उत्तर दें।

self.addEventListener("notificationclick", (event) => {
  event.notification.close();
  event.waitUntil(clients.openWindow("/inbox"));
});

त्वरित जाँच

पुश की सदस्यता लेते समय userVisibleOnly: true क्यों आवश्यक है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

वेब पुश की शुरुआत उपयोगकर्ता की क्रिया से Notification.requestPermission() के साथ होती है। इसके बाद userVisibleOnly: true और applicationServerKey के साथ registration.pushManager.subscribe का उपयोग किया जाता है। सदस्यता अपने सर्वर को भेजें; सर्वर payload भेजता है, जिसे सर्विस वर्कर अपने push इवेंट में प्राप्त करके showNotification से दिखाता है।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 42
पाठ: 156

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “Vue PWA में पुश सूचनाएँ” पाठ निःशुल्क है?

हाँ — Vue Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “Vue PWA में पुश सूचनाएँ” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Vue Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Vue PWA में पुश सूचनाएँ” में मैं क्या सीखूँगा?

Push API, Notification API, VAPID कुंजियाँ, उपयोगकर्ताओं की सदस्यता और सर्वर से भेजना आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Vue Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Vue Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Vue Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“Vue PWA में पुश सूचनाएँ” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Vue Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Vue Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Vue Academy पर वापस जाएँ