कोडलैब (कोड बनाना सीखना): पुश नोटिफ़िकेशन क्लाइंट बनाना

Kate Jeffreys
Kate Jeffreys
Kayce Basques

इस कोडलैब से, पुश नोटिफ़िकेशन क्लाइंट बनाने के सिलसिलेवार निर्देश देखे जा सकते हैं. कोडलैब के आखिर तक, आपको एक क्लाइंट मिल जाएगा जो:

  • उपयोगकर्ता को पुश नोटिफ़िकेशन की सदस्यता देता है.
  • पुश मैसेज पाएं और उन्हें सूचनाओं के तौर पर दिखाएं.
  • पुश नोटिफ़िकेशन से उपयोगकर्ता की सदस्यता खत्म करता है.

इस कोडलैब का फ़ोकस, काम करके सीखने में आपकी मदद करना है, लेकिन ऐसा नहीं है कॉन्सेप्ट पर बहुत ज़्यादा बात करते हैं. चेक आउट करने का समय पुश नोटिफ़िकेशन कैसे काम करते हैं? ताकि आपको पुश नोटिफ़िकेशन के सिद्धांतों के बारे में ज़्यादा जानकारी मिल सके.

इस कोडलैब का सर्वर कोड पहले ही पूरा हो चुका है. आपको सिर्फ़ इस कोडलैब में क्लाइंट को लागू करना होगा. लागू करने का तरीका जानने के लिए पुश नोटिफ़िकेशन सर्वर, देखें कोडलैब: एक पुश नोटिफ़िकेशन बनाएं सर्वर पर जाएं.

push-notifications-client-codelab-complete . देखें (सोर्स) पूरा कोड देखने के लिए.

ब्राउज़र के साथ काम करना

यह कोडलैब, इन ऑपरेटिंग सिस्टम और ब्राउज़र को एक साथ काम करने के लिए जाना जाता है:

  • Windows: Chrome, Edge
  • macOS: Chrome, Firefox
  • Android: Chrome, Firefox

यह कोडलैब इन ऑपरेटिंग सिस्टम के साथ काम नहीं करता (या ऑपरेटिंग सिस्टम और ब्राउज़र के कॉम्बिनेशन):

  • macOS पर: Brave, Edge, Safari
  • iOS

सेटअप

कोड की ऐसी कॉपी पाएं जिसमें बदलाव किया जा सकता है

इन निर्देशों की दाईं ओर दिखने वाला कोड एडिटर, कोडलैब के इस वर्शन में Glitch यूज़र इंटरफ़ेस (यूआई) शामिल किया है.

  1. प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.

पुष्टि करने की सुविधा सेट अप करें

पुश नोटिफ़िकेशन की सुविधा चालू करने से पहले, आपको अपना खाता सेट अप करना होगा अपने सर्वर और क्लाइंट को पुष्टि करने वाली कुंजियों से कनेक्ट करें. वेब पुश प्रोटोकॉल के अनुरोधों पर हस्ताक्षर करना देखें इसकी वजह जानें.

  1. Glitch यूज़र इंटरफ़ेस (यूआई) में टूल पर क्लिक करें और फिर Glitch टर्मिनल को खोलने के लिए Terminal पर क्लिक करें.
  2. Glitch टर्मिनल में, npx web-push generate-vapid-keys चलाएं. निजी पासकोड कॉपी करें और सार्वजनिक पासकोड की वैल्यू शामिल होती हैं.
  3. Glitch यूज़र इंटरफ़ेस (यूआई) में .env खोलें और VAPID_PUBLIC_KEY और VAPID_PRIVATE_KEY को अपडेट करें. शुरू mailto:test@test.test के लिए VAPID_SUBJECT. इन सभी वैल्यू को रैप किया जाना चाहिए डबल कोट में. बदलाव करने के बाद, आपकी .env फ़ाइल कुछ ऐसी दिखेगी इससे मिलता-जुलता:
VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"
  1. ग्लिच टर्मिनल बंद करें.
  1. public/index.js खोलें.
  2. VAPID_PUBLIC_KEY_VALUE_HERE को अपनी सार्वजनिक कुंजी की वैल्यू से बदलें.

सर्विस वर्कर रजिस्टर करें

आपके क्लाइंट को मैसेज पाने और उन्हें दिखाने के लिए, सर्विस वर्कर की ज़रूरत पड़ेगी नोटिफ़िकेशन. सर्विस वर्कर का रजिस्ट्रेशन जल्द से जल्द करें. पु किए गए मैसेज को पाना और इस तरह दिखाना सूचनाएं पर जाएं.

  1. // 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);
  1. साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन फ़ुलस्क्रीन.
  1. DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.
  2. कंसोल टैब पर क्लिक करें. आपको यह मैसेज दिखेगा Service worker was registered. ने कंसोल में लॉग इन किया है.

पुश नोटिफ़िकेशन की अनुमति का अनुरोध करें

पेज लोड होने पर पुश नोटिफ़िकेशन भेजने के लिए, आपको कभी भी अनुमति का अनुरोध नहीं करना चाहिए. इसके बजाय, आपके यूज़र इंटरफ़ेस (यूआई) को उपयोगकर्ता से यह पूछना चाहिए कि क्या वे पुश नोटिफ़िकेशन पाना चाहते हैं. एक बार पुष्टि कर देने के बाद (उदाहरण के लिए, बटन पर क्लिक करके) ब्राउज़र से पुश नोटिफ़िकेशन अनुमति पाने की औपचारिक प्रक्रिया शुरू करें.

  1. Glitch यूज़र इंटरफ़ेस (यूआई) में अपने कोड पर वापस जाने के लिए, सोर्स देखें पर क्लिक करें.
  2. 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.');
}
  1. ऐप्लिकेशन टैब पर वापस जाएं और पुश करने के लिए सदस्यता लें पर क्लिक करें. आपका ब्राउज़र या ऑपरेटिंग सिस्टम आपसे पूछेगा कि क्या आप अपनी वेबसाइट को आपको पुश नोटिफ़िकेशन भेजता है. अनुमति दें (या इससे मिलता-जुलता कोई भी वाक्यांश) पर क्लिक करें जिन्हें आपका ब्राउज़र/ओएस इस्तेमाल करता है). कंसोल में आपको यह बताने वाला एक मैसेज दिखेगा कि अनुरोध को स्वीकार या अस्वीकार किया गया.

Push notification के सदस्य बनें

सदस्यता की प्रक्रिया में, कंट्रोल वाली वेब सेवा के साथ इंटरैक्ट करना शामिल है ब्राउज़र वेंडर के ज़रिए किया जा सकता है, जिसे पुश सेवा कहा जाता है. आपको एक बार पुश नोटिफ़िकेशन के लिए सदस्यता की जानकारी, जो आपको सर्वर पर भेजनी होगी और सर्वर को उसे लंबे समय तक डेटाबेस में सेव रखने के लिए कहना. पुश नोटिफ़िकेशन के लिए क्लाइंट की सदस्यता लेना देखें देखें.

  1. 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 में बदलता है. इस वैल्यू का इस्तेमाल इसके लिए किया जाता है पुष्टि करने की सुविधा चालू करें.

पुश नोटिफ़िकेशन की सदस्यता छोड़ें

जब कोई उपयोगकर्ता पुश नोटिफ़िकेशन की सदस्यता ले लेता है, तो आपके यूज़र इंटरफ़ेस (यूआई) को अगर उपयोगकर्ता अपना फ़ैसला बदलता है, तो उसे सदस्यता छोड़ने का विकल्प उपलब्ध कराएं और अब पुश नोटिफ़िकेशन नहीं पाना चाहता.

  1. 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;
}

एक पुश मैसेज पाएं और उसे सूचना के तौर पर दिखाएं

जैसा कि हमने पहले बताया है, आपको क्लाइंट को भेजे गए मैसेज पाना और दिखाना अपने सर्वर से हटाएं. पु किए गए मैसेज को पाना और इस तरह दिखाना सूचनाएं पर जाएं.

  1. public/service-worker.js खोलें और // TODO टिप्पणी बदलें सर्विस वर्कर के push इवेंट हैंडलर में:
// TODO
let data = event.data.json();
const image = 'https://cdn.glitch.com/614286c9-b4fc-4303-a6a9-a4cef0601b74%2Flogo.png?v=1605150951230';
const options = {
  body: data.options.body,
  icon: image
}
self.registration.showNotification(
  data.title, 
  options
);
  1. ऐप्लिकेशन टैब पर वापस जाएं.
  2. मुझे सूचना दें पर क्लिक करें. आपको एक पुश नोटिफ़िकेशन मिलेगा.
  3. अन्य ब्राउज़र पर अपने ऐप्लिकेशन टैब का URL खोलकर देखें (या यहां तक कि और फिर सदस्यता के वर्कफ़्लो से गुज़रना होगा. सभी को सूचना दें पर क्लिक करें. आपको एक ही पुश नोटिफ़िकेशन मिलेगा सदस्यता ली हुई है. इसे फिर से देखें ब्राउज़र/ओएस की सूची देखने के लिए, ब्राउज़र के साथ काम करने की सुविधा जो काम करने या नहीं करने के लिए जाने जाते हैं.

आप नोटिफ़िकेशन को कई तरीकों से कस्टमाइज़ कर सकते हैं. इसके पैरामीटर देखें ज़्यादा जानने के लिए ServiceWorkerRegistration.showNotification().

जब कोई उपयोगकर्ता किसी सूचना पर क्लिक करे, तो यूआरएल खोलें

असल में, हो सकता है कि आप सूचना को पाने के तरीके के तौर पर आपके उपयोगकर्ताओं को फिर से जोड़ने और उन्हें आपकी साइट पर जाने के लिए प्रेरित करने के बारे में बताया गया है. ऐसा करने के लिए, आपको अपने सर्विस वर्कर को थोड़ा और कॉन्फ़िगर करना होगा.

  1. सर्विस वर्कर के notificationclick में // TODO टिप्पणी बदलें इस कोड वाला इवेंट हैंडलर:
// TODO
event.notification.close();
event.waitUntil(self.clients.openWindow('https://web.dev'));
  1. ऐप्लिकेशन टैब पर वापस जाएं, खुद को एक और सूचना भेजें. इसके बाद उस सूचना पर क्लिक करें. आपके ब्राउज़र में एक नया टैब खुलेगा और वह लोड हो जाएगा https://web.dev.

अगले चरण