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

केट जेफ़रीज़

केयस बास्क

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

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

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

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

पूरा कोड देखने के लिए, 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 को खोलने के लिए, Terminal पर क्लिक करें.
2. Glitch टर्मिनल में, npx web-push generate-vapid-keys चलाएं. निजी कुंजी और सार्वजनिक कुंजी की वैल्यू को कॉपी करें.
3. Glitch यूज़र इंटरफ़ेस (यूआई) में .env खोलें और VAPID_PUBLIC_KEY और VAPID_PRIVATE_KEY को अपडेट करें. VAPID_SUBJECT को mailto:test@test.test पर सेट करें. ये सभी वैल्यू, डबल कोट में रखी जानी चाहिए. अपडेट करने के बाद, आपकी .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 में, subscribeButtonHandler() में मौजूद // TODO टिप्पणी को इस कोड से बदलें:

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

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 खोलें और सर्विस वर्कर के push इवेंट हैंडलर में // TODO टिप्पणी को नीचे दिए गए कोड से बदलें:

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

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

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

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

1. सर्विस वर्कर के notificationclick इवेंट हैंडलर में // TODO टिप्पणी को नीचे दिए गए कोड से बदलें:

// TODO
event.notification.close();
event.waitUntil(self.clients.openWindow('https://web.dev'));

1. ऐप्लिकेशन टैब पर वापस जाएं, खुद को एक और सूचना भेजें, और फिर सूचना पर क्लिक करें. आपके ब्राउज़र में नया टैब खुलेगा और https://web.dev लोड होगा.

अगले चरण

• ServiceWorkerRegistration.showNotification() पर क्लिक करके, सूचनाओं को पसंद के मुताबिक बनाने के सभी तरीके जानें.
• पुश नोटिफ़िकेशन के काम करने के तरीके को समझने के लिए, पुश नोटिफ़िकेशन की खास जानकारी लेख पढ़ें.
• कोडलैब: पुश नोटिफ़िकेशन सर्वर बनाने का तरीका लेख पढ़ें. इससे आपको ऐसा सर्वर बनाने का तरीका पता चलेगा जो सदस्यताओं को मैनेज करने और वेब पुश प्रोटोकॉल के अनुरोध भेजने का तरीका है.
• सूचना जनरेट करने वाले टूल का इस्तेमाल करके, सूचनाओं को पसंद के मुताबिक बनाने के सभी तरीके आज़माएं.