वेब ऐप्लिकेशन में पुश नोटिफ़िकेशन जोड़ना

1. खास जानकारी

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

आपको क्या सीखने को मिलेगा

• किसी उपयोगकर्ता को पुश मैसेज पाने के लिए ऑप्ट-इन करने और ऑप्ट-आउट करने का तरीका
• आने वाले पुश मैसेज को मैनेज करने का तरीका
• सूचना दिखाने का तरीका
• सूचना पर किए गए क्लिक का जवाब देने का तरीका

आपको इन चीज़ों की ज़रूरत होगी

• Chrome 52 या उसके बाद का वर्शन
• Web Server for Chrome या अपनी पसंद का कोई वेब सर्वर
• टेक्स्ट एडिटर
• एचटीएमएल, सीएसएस, JavaScript, और Chrome DevTools की बुनियादी जानकारी
• सैंपल कोड (सेट अप करने का तरीका देखें.)

2. सेट अप करें

सैंपल कोड डाउनलोड करना

इस कोडलैब के लिए सैंपल कोड पाने के दो तरीके हैं:

• Git रिपॉज़िटरी को क्लोन करें:

git clone https://github.com/GoogleChrome/push-notifications.git

• ZIP फ़ाइल डाउनलोड करें:

सोर्स कोड डाउनलोड करें

सोर्स को ZIP फ़ाइल के तौर पर डाउनलोड करने पर, उसे अनपैक करने से आपको रूट फ़ोल्डर push-notifications-master मिलता है.

वेब सर्वर इंस्टॉल करना और उसकी पुष्टि करना

हालांकि, आपके पास अपने वेब सर्वर का इस्तेमाल करने का विकल्प होता है, लेकिन यह कोडलैब, Web Server for Chrome ऐप्लिकेशन के साथ काम करने के लिए डिज़ाइन किया गया है. अगर आपने अब तक यह ऐप्लिकेशन इंस्टॉल नहीं किया है, तो इसे Chrome Web Store से डाउनलोड किया जा सकता है:

Web Server for Chrome इंस्टॉल करना

Web Server for Chrome ऐप्लिकेशन इंस्टॉल करने के बाद, बुकमार्क बार पर मौजूद ऐप्लिकेशन शॉर्टकट पर क्लिक करें:

ऐप्लिकेशन विंडो में, वेब सर्वर आइकॉन पर क्लिक करें:

इसके बाद, आपको यह डायलॉग दिखेगा. इसकी मदद से, लोकल वेब सर्वर को कॉन्फ़िगर किया जा सकता है:

फ़ोल्डर चुनें बटन पर क्लिक करें. इसके बाद, डाउनलोड किए गए push-notifications फ़ोल्डर में मौजूद app फ़ोल्डर चुनें. इससे, आपको डायलॉग बॉक्स के वेब सर्वर यूआरएल सेक्शन में दिखाए गए यूआरएल के ज़रिए, अपने काम को पूरा करने में मदद मिलती है.

विकल्प में जाकर, index.html अपने-आप दिखाएं के बगल में मौजूद बॉक्स पर सही का निशान लगाएं. यह बॉक्स यहां दिखाया गया है:

इसके बाद, Web Server: STARTED टॉगल को बाईं ओर स्लाइड करके सर्वर को बंद करें. फिर, इसे दाईं ओर स्लाइड करके सर्वर को फिर से चालू करें.

अपने वेब ब्राउज़र में अपनी साइट पर जाने के लिए, वेब सर्वर यूआरएल पर क्लिक करें. आपको इस तरह का पेज दिखेगा. हालांकि, आपके वर्शन में पता 127.0.0.1:8887 के तौर पर दिख सकता है:

सर्विस वर्कर को हमेशा अपडेट करें

डेवलपमेंट के दौरान, यह पक्का करना ज़रूरी होता है कि आपका सर्विस वर्कर हमेशा अप-टू-डेट हो और उसमें नए बदलाव शामिल हों.

Chrome में इसे सेट अप करने के लिए:

1. पुश कोडलैब टैब पर जाएं.
2. DevTools खोलें: Windows और Linux पर Ctrl-Shift-I दबाएं. macOS पर Cmd-Option-I दबाएं.
3. ऐप्लिकेशन पैनल चुनें. इसके बाद, सर्विस वर्कर टैब पर क्लिक करें और फिर से लोड करने पर अपडेट करें चेकबॉक्स पर सही का निशान लगाएं. इस चेकबॉक्स को चालू करने पर, हर बार पेज रीलोड होने पर सर्विस वर्कर को अपडेट किया जाता है.

3. सर्विस वर्कर रजिस्टर करना

पूरा किया गया कोड

अपनी app डायरेक्ट्री में देखें कि आपके पास sw.js नाम की एक फ़ाइल है, जिसमें कोई डेटा नहीं है. यह फ़ाइल, आपका सर्विस वर्कर होगी. फ़िलहाल, इसे खाली छोड़ा जा सकता है. इसमें कोड बाद में जोड़ा जाएगा.

सबसे पहले, आपको इस फ़ाइल को अपने सर्विस वर्कर के तौर पर रजिस्टर करना होगा.

आपका app/index.html पेज scripts/main.js लोड हो जाता है. इस JavaScript फ़ाइल में, सर्विस वर्कर को रजिस्टर किया जाता है.

scripts/main.js में यह कोड जोड़ें:

if ('serviceWorker' in navigator && 'PushManager' in window) {
  console.log('Service Worker and Push are supported');

  navigator.serviceWorker.register('sw.js')
  .then(function(swReg) {
    console.log('Service Worker is registered', swReg);

    swRegistration = swReg;
  })
  .catch(function(error) {
    console.error('Service Worker Error', error);
  });
} else {
  console.warn('Push messaging is not supported');
  pushButton.textContent = 'Push Not Supported';
}

यह कोड यह जांच करता है कि आपके ब्राउज़र पर सर्विस वर्कर और पुश मैसेजिंग की सुविधा काम करती है या नहीं. अगर ये फ़ाइलें काम करती हैं, तो कोड आपकी sw.js फ़ाइल को रजिस्टर करता है.

इसे आज़माएं

ब्राउज़र में Push Codelab टैब को रीफ़्रेश करके, अपने बदलाव देखें.

Chrome DevTools में कंसोल पर Service Worker is registered message देखें. जैसे:

ऐप्लिकेशन सर्वर की कुंजियां पाना

इस कोडलैब का इस्तेमाल करने के लिए, आपको ऐप्लिकेशन सर्वर की जनरेट करनी होंगी. यह काम, कंपैनियन साइट पर किया जा सकता है: web-push-codelab.glitch.me

यहां सार्वजनिक और निजी कुंजी का जोड़ा जनरेट किया जा सकता है.

अपने सार्वजनिक पासकोड को scripts/main.js में कॉपी करें और <Your Public Key> वैल्यू को बदलें:

const applicationServerPublicKey = '<Your Public Key>';

अहम जानकारी: आपको कभी भी अपने वेब ऐप्लिकेशन में निजी पासकोड नहीं डालना चाहिए!

4. स्थिति शुरू करें

पूरा किया गया कोड

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

आपको scripts/main.js में दो फ़ंक्शन बनाने होंगे:

• initializeUI, यह देखने के लिए कि उपयोगकर्ता ने फ़िलहाल सदस्यता ली है या नहीं
• updateBtn, ताकि आपका बटन चालू हो सके और उपयोगकर्ता के सदस्य होने या न होने के हिसाब से टेक्स्ट बदल सके

main.js में initializeUI फ़ंक्शन को इस तरह जोड़ें:

function initializeUI() {
  // Set the initial subscription value
  swRegistration.pushManager.getSubscription()
  .then(function(subscription) {
    isSubscribed = !(subscription === null);

    if (isSubscribed) {
      console.log('User IS subscribed.');
    } else {
      console.log('User is NOT subscribed.');
    }

    updateBtn();
  });
}

आपके नए तरीके में, पिछले चरण से मिले swRegistration का इस्तेमाल किया जाता है. इससे pushManager प्रॉपर्टी मिलती है और उस पर getSubscription() कॉल किया जाता है.

pushManager. getSubscription() एक प्रॉमिस दिखाता है. अगर कोई सदस्यता मौजूद है, तो यह प्रॉमिस मौजूदा सदस्यता के साथ रिज़ॉल्व होता है. ऐसा न होने पर, यह null दिखाता है. इससे यह पता लगाया जा सकता है कि उपयोगकर्ता ने पहले से सदस्यता ली है या नहीं. साथ ही, isSubscribed की वैल्यू सेट की जा सकती है. इसके बाद, बटन को अपडेट करने के लिए updateBtn() को कॉल किया जा सकता है.

main.js में updateBtn() फ़ंक्शन जोड़ें:

function updateBtn() {
  if (isSubscribed) {
    pushButton.textContent = 'Disable Push Messaging';
  } else {
    pushButton.textContent = 'Enable Push Messaging';
  }

  pushButton.disabled = false;
}

यह फ़ंक्शन बटन को चालू करता है और उपयोगकर्ता के सदस्यता लेने या न लेने के आधार पर, बटन के टेक्स्ट को बदलता है.

आखिरी काम यह है कि जब आपका सर्विस वर्कर main.js में रजिस्टर हो जाए, तब initializeUI() को कॉल करें:

navigator.serviceWorker.register('sw.js')
.then(function(swReg) {
  console.log('Service Worker is registered', swReg);

  swRegistration = swReg;
  initializeUI();
})

इसे आज़माएं

पुश कोडलैब टैब को रीफ़्रेश करें. आपको दिखेगा कि पुश मैसेज पाने की सुविधा चालू करें बटन अब चालू हो गया है. इस पर क्लिक किया जा सकता है. साथ ही, आपको कंसोल में User is NOT subscribed दिखेगा.

कोड सीखने की इस बाकी बची प्रक्रिया में, आपको सदस्यता लेने या छोड़ने पर बटन के टेक्स्ट में बदलाव दिखेगा.

5. उपयोगकर्ता को सदस्यता दिलाना

पूरा किया गया कोड

फ़िलहाल, पुश मैसेजिंग चालू करें बटन से कुछ नहीं होता. चलिए, इसे ठीक करते हैं।

initializeUI() फ़ंक्शन में, अपने बटन के लिए क्लिक लिसनर जोड़ें:

function initializeUI() {
  pushButton.addEventListener('click', function() {
    pushButton.disabled = true;
    if (isSubscribed) {
      // TODO: Unsubscribe user
    } else {
      subscribeUser();
    }
  });

  // Set the initial subscription value
  swRegistration.pushManager.getSubscription()
  .then(function(subscription) {
    isSubscribed = !(subscription === null);

    updateSubscriptionOnServer(subscription);

    if (isSubscribed) {
      console.log('User IS subscribed.');
    } else {
      console.log('User is NOT subscribed.');
    }

    updateBtn();
  });
}

जब उपयोगकर्ता बटन पर क्लिक करता है, तो आपको बटन को बंद कर देना चाहिए. इससे यह पक्का किया जा सकेगा कि उपयोगकर्ता दूसरी बार बटन पर क्लिक न कर पाए, क्योंकि पुश मैसेजिंग की सुविधा के लिए ऑप्ट-इन करने में कुछ समय लग सकता है.

इसके बाद, अगर उपयोगकर्ता ने फ़िलहाल सदस्यता नहीं ली है, तो subscribeUser() को कॉल करें. इसके लिए, आपको scripts/main.js में यह कोड चिपकाना होगा:

function subscribeUser() {
  const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
  swRegistration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: applicationServerKey
  })
  .then(function(subscription) {
    console.log('User is subscribed.');

    updateSubscriptionOnServer(subscription);

    isSubscribed = true;

    updateBtn();
  })
  .catch(function(error) {
    console.error('Failed to subscribe the user: ', error);
    updateBtn();
  });
}

आइए, जानते हैं कि यह कोड क्या कर रहा है और यह उपयोगकर्ता को पुश मैसेज पाने के लिए कैसे ऑप्ट-इन कर रहा है.

सबसे पहले, ऐप्लिकेशन सर्वर की सार्वजनिक कुंजी लें. यह Base64 यूआरएल-सेफ़ एन्कोड होती है. इसे UInt8Array में बदलें, क्योंकि subscribe() कॉल का यही इनपुट होता है. urlB64ToUint8Array() फ़ंक्शन, scripts/main.js के सबसे ऊपर है.

वैल्यू को बदलने के बाद, अपने सर्विस वर्कर के pushManager पर subscribe() तरीके को कॉल करें. इसमें अपने ऐप्लिकेशन सर्वर की सार्वजनिक कुंजी और userVisibleOnly: true वैल्यू पास करें.

const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
swRegistration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: applicationServerKey
})

userVisibleOnly पैरामीटर से यह पक्का किया जाता है कि हर बार पुश मैसेज भेजे जाने पर, आपको सूचना दिखेगी. फ़िलहाल, यह वैल्यू देना ज़रूरी है और इसे 'सही है' के तौर पर सेट करना होगा.

subscribe() को कॉल करने पर, एक प्रॉमिस मिलता है. यह प्रॉमिस इन चरणों के बाद पूरा होगा:

1. उपयोगकर्ता ने सूचनाएं दिखाने की अनुमति दी हो.
2. ब्राउज़र ने पुश सेवा को नेटवर्क अनुरोध भेजा है, ताकि PushSubscription जनरेट करने के लिए ज़रूरी डेटा मिल सके.

अगर ये चरण पूरे हो जाते हैं, तो subscribe() प्रॉमिस के साथ PushSubscription दिखेगा. अगर उपयोगकर्ता अनुमति नहीं देता है या उसे सदस्यता लेने में कोई समस्या आती है, तो प्रॉमिस को गड़बड़ी के साथ अस्वीकार कर दिया जाएगा. इससे आपको अपने कोडलैब में, प्रॉमिस की यह चेन मिलती है:

swRegistration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: applicationServerKey
})
.then(function(subscription) {
  console.log('User is subscribed.');

  updateSubscriptionOnServer(subscription);

  isSubscribed = true;

  updateBtn();

})
.catch(function(err) {
  console.log('Failed to subscribe the user: ', err);
  updateBtn();
});

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

किसी असली ऐप्लिकेशन में, updateSubscriptionOnServer() फ़ंक्शन के ज़रिए सदस्यता का डेटा बैकएंड को भेजा जाता है. हालांकि, कोडलैब के लिए आपको सिर्फ़ यूज़र इंटरफ़ेस (यूआई) में सदस्यता दिखानी होती है. scripts/main.js में यह फ़ंक्शन जोड़ें:

function updateSubscriptionOnServer(subscription) {
  // TODO: Send subscription to application server

  const subscriptionJson = document.querySelector('.js-subscription-json');
  const subscriptionDetails =
    document.querySelector('.js-subscription-details');

  if (subscription) {
    subscriptionJson.textContent = JSON.stringify(subscription);
    subscriptionDetails.classList.remove('is-invisible');
  } else {
    subscriptionDetails.classList.add('is-invisible');
  }
}

इसे आज़माएं

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

अनुमति देने पर, आपको User is subscribed logged to the console दिखेगा. बटन का टेक्स्ट बदलकर पुश मैसेजिंग की सुविधा बंद करें हो जाएगा. इसके बाद, आपको पेज के सबसे नीचे JSON डेटा के तौर पर सदस्यता दिखेगी.

6. अनुमति न मिलने की समस्या हल करना

पूरा किया गया कोड

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

इस स्थिति को हैंडल करने के लिए, updateBtn() फ़ंक्शन का इस्तेमाल किया जा सकता है. आपको सिर्फ़ Notification.permission वैल्यू की जांच करनी है. इसके लिए, यह तरीका अपनाएं:

function updateBtn() {
  if (Notification.permission === 'denied') {
    pushButton.textContent = 'Push Messaging Blocked';
    pushButton.disabled = true;
    updateSubscriptionOnServer(null);
    return;
  }

  if (isSubscribed) {
    pushButton.textContent = 'Disable Push Messaging';
  } else {
    pushButton.textContent = 'Enable Push Messaging';
  }

  pushButton.disabled = false;
}

आपको पता है कि अगर अनुमति denied है, तो उपयोगकर्ता को सदस्यता नहीं दी जा सकती. इसलिए, बटन को हमेशा के लिए बंद करना सबसे सही तरीका है.

इसे आज़माएं

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

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

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

7. पुश इवेंट को हैंडल करना

पूरा किया गया कोड

अपने बैकएंड से पुश मैसेज भेजने का तरीका जानने से पहले, आपको यह समझना होगा कि जब किसी सदस्य को पुश मैसेज मिलता है, तो क्या होता है.

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

अपनी sw.js फ़ाइल में यह कोड जोड़ें:

self.addEventListener('push', function(event) {
  console.log('[Service Worker] Push Received.');
  console.log(`[Service Worker] Push had this data: "${event.data.text()}"`);

  const title = 'Push Codelab';
  const options = {
    body: 'Yay it works.',
    icon: 'images/icon.png',
    badge: 'images/badge.png'
  };

  event.waitUntil(self.registration.showNotification(title, options));
});

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

self.addEventListener('push', ... );

(अगर आपने Web Workers का इस्तेमाल पहले कभी नहीं किया है, तो self शायद आपके लिए नया है. किसी सर्विस वर्कर फ़ाइल में, self सर्विस वर्कर को ही रेफ़रंस देता है.)

पुश मैसेज मिलने पर, इवेंट लिसनर को कॉल किया जाएगा. साथ ही, सर्विस वर्कर की registration प्रॉपर्टी पर showNotification() को कॉल करके, सूचना बनाई जाएगी. showNotification() के लिए title की ज़रूरत होती है. इसके अलावा, options ऑब्जेक्ट का इस्तेमाल करके, मैसेज, आइकॉन, और बैज भी सेट किए जा सकते हैं. (यह बैज, इस लेख को लिखते समय सिर्फ़ Android पर इस्तेमाल किया जाता है.)

const title = 'Push Codelab';
const options = {
  body: 'Yay it works.',
  icon: 'images/icon.png',
  badge: 'images/badge.png'
};
self.registration.showNotification(title, options);

push इवेंट हैंडलिंग में, आखिरी चीज़ event.waitUntil() को कवर करना है. यह तरीका, ब्राउज़र को यह वादा करता है कि वह आपके सर्विस वर्कर को तब तक चालू रखेगा, जब तक कि पास किया गया वादा पूरा नहीं हो जाता.

ऊपर दिए गए कोड को थोड़ा आसान बनाने के लिए, इसे इस तरह से फिर से लिखा जा सकता है:

const notificationPromise = self.registration.showNotification(title, options);
event.waitUntil(notificationPromise);

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

इसे आज़माएं

सर्विस वर्कर में पुश इवेंट हैंडलिंग की सुविधा का इस्तेमाल करके, फ़र्ज़ी पुश इवेंट ट्रिगर किया जा सकता है. इससे यह जांच की जा सकती है कि मैसेज मिलने पर क्या होता है.

अपने वेब ऐप्लिकेशन में, पुश मैसेज पाने के लिए ऑप्ट-इन करें. साथ ही, पक्का करें कि आपको कंसोल में User IS subscribed दिख रहा हो. DevTools में ऐप्लिकेशन पैनल में, सर्विस वर्कर टैब में जाकर, पुश करें बटन पर क्लिक करें:

पुश करें पर क्लिक करने के बाद, आपको इस तरह की सूचना दिखेगी:

ध्यान दें: अगर यह तरीका काम नहीं करता है, तो DevTools के ऐप्लिकेशन पैनल में मौजूद Unregister लिंक का इस्तेमाल करके, अपने सर्विस वर्कर को अनरजिस्टर करें. इसके बाद, सर्विस वर्कर के बंद होने का इंतज़ार करें और फिर पेज को फिर से लोड करें.

8. सूचना पर क्लिक करना

पूरा किया गया कोड

इनमें से किसी सूचना पर क्लिक करने पर, आपको पता चलेगा कि कुछ नहीं हुआ. अपने सर्विस वर्कर में notificationclick इवेंट को सुनकर, सूचना पर किए गए क्लिक मैनेज किए जा सकते हैं.

sw.js में notificationclick लिसनर जोड़कर शुरू करें:

self.addEventListener('notificationclick', function(event) {
  console.log('[Service Worker] Notification click received.');

  event.notification.close();

  event.waitUntil(
    clients.openWindow('https://developers.google.com/web')
  );
});

जब उपयोगकर्ता सूचना पर क्लिक करेगा, तब notificationclick इवेंट लिसनर को कॉल किया जाएगा.

यह कोड, उस सूचना को बंद करता है जिस पर क्लिक किया गया था:

event.notification.close();

इसके बाद, एक नई विंडो या टैब खुलता है. इसमें यूआरएल https://developers.google.com/web लोड होता है. बेझिझक इसमें बदलाव करें.

event.waitUntil(
    clients.openWindow('https://developers.google.com/web/')
  );

event.waitUntil() यह पक्का करता है कि ब्राउज़र, नई विंडो या टैब के दिखने से पहले सर्विस वर्कर को बंद न करे.

इसे आज़माएं

DevTools में पुश मैसेज को फिर से ट्रिगर करें और सूचना पर क्लिक करें. अब आपको सूचना बंद होती हुई और एक नया टैब खुलता हुआ दिखेगा.

9. पुश मैसेज भेजना

आपने देखा कि आपका वेब ऐप्लिकेशन, DevTools का इस्तेमाल करके सूचना दिखा सकता है. साथ ही, आपने यह भी देखा कि क्लिक करके सूचना को कैसे बंद किया जाता है. अगला चरण, पुश मैसेज भेजना है.

आम तौर पर, इसके लिए वेब पेज से बैकएंड को सदस्यता भेजनी पड़ती है. इसके बाद, बैकएंड, सदस्यता में मौजूद एंडपॉइंट को एपीआई कॉल करके, पुश मैसेज ट्रिगर करेगा.

यह इस कोडलैब के दायरे से बाहर है. हालांकि, पुश मैसेज को ट्रिगर करने के लिए, कंपैनियन साइट ( web-push-codelab.glitch.me) का इस्तेमाल किया जा सकता है. पेज पर सबसे नीचे, सदस्यता लेने का विकल्प चिपकाएं:

इसके बाद, इसे कंपैनियन साइट पर इन्हें भेजें टेक्स्ट एरिया में चिपकाएं:

भेजने के लिए टेक्स्ट में जाकर, वह स्ट्रिंग जोड़ें जिसे आपको पुश मैसेज के साथ भेजना है.

पुश मैसेज भेजें बटन पर क्लिक करें.

इसके बाद, आपको एक पुश मैसेज मिलेगा. आपने जिस टेक्स्ट का इस्तेमाल किया है उसे कंसोल में लॉग किया जाएगा.

इससे आपको डेटा भेजने और पाने की सुविधा को आज़माने का मौका मिलेगा. साथ ही, सूचनाओं में बदलाव करने का भी मौका मिलेगा.

कंपैनियन ऐप्लिकेशन, सिर्फ़ एक नोड सर्वर है. यह मैसेज भेजने के लिए, web-push लाइब्रेरी का इस्तेमाल करता है. GitHub पर web-push-libs org की समीक्षा करें. इससे आपको पता चलेगा कि पुश मैसेज भेजने के लिए, कौनसी लाइब्रेरी उपलब्ध हैं. यह पुश मैसेज ट्रिगर करने के लिए, कई तरह की जानकारी को मैनेज करता है.

कंपैनियन साइट का पूरा कोड यहां देखा जा सकता है.

10. उपयोगकर्ता की सदस्यता छोड़ें

पूरा किया गया कोड

हालांकि, इसमें एक सुविधा नहीं है. इसमें उपयोगकर्ता को पुश नोटिफ़िकेशन पाने की सुविधा से ऑप्ट आउट करने का विकल्प नहीं मिलता. इसके लिए, आपको PushSubscription पर unsubscribe() को कॉल करना होगा.

अपनी scripts/main.js फ़ाइल में वापस जाकर, initializeUI() में मौजूद pushButton क्लिक लिसनर को यहां दिए गए कोड से बदलें:

pushButton.addEventListener('click', function() {
  pushButton.disabled = true;
  if (isSubscribed) {
    unsubscribeUser();
  } else {
    subscribeUser();
  }
});

ध्यान दें कि अब आपको एक नया फ़ंक्शन unsubscribeUser() कॉल करना है. इस फ़ंक्शन में, आपको मौजूदा सदस्यता मिलती है और इस पर unsubscribe() को कॉल किया जाता है. scripts/main.js में यह कोड जोड़ें:

function unsubscribeUser() {
  swRegistration.pushManager.getSubscription()
  .then(function(subscription) {
    if (subscription) {
      return subscription.unsubscribe();
    }
  })
  .catch(function(error) {
    console.log('Error unsubscribing', error);
  })
  .then(function() {
    updateSubscriptionOnServer(null);

    console.log('User is unsubscribed.');
    isSubscribed = false;

    updateBtn();
  });
}

आइए, इस फ़ंक्शन के बारे में जानते हैं.

सबसे पहले, getSubscription() को कॉल करके मौजूदा सदस्यता लें:

swRegistration.pushManager.getSubscription()

इससे एक प्रॉमिस मिलता है. अगर कोई PushSubscription मौजूद है, तो यह प्रॉमिस रिज़ॉल्व हो जाता है. ऐसा न होने पर, यह null दिखाता है. अगर कोई सदस्यता मौजूद है, तो उस पर unsubscribe() को कॉल करें. इससे PushSubscription अमान्य हो जाता है.

swRegistration.pushManager.getSubscription()
.then(function(subscription) {
  if (subscription) {
    // TODO: Tell application server to delete subscription
    return subscription.unsubscribe();
  }
})
.catch(function(error) {
  console.log('Error unsubscribing', error);
})

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

.then(function() {
  updateSubscriptionOnServer(null);

  console.log('User is unsubscribed.');
  isSubscribed = false;

  updateBtn();
})

इसे आज़माएं

आपके पास अपने वेब ऐप्लिकेशन में, पुश मैसेज पाने की सुविधा चालू करें या पुश मैसेज पाने की सुविधा बंद करें को दबाने का विकल्प होना चाहिए. साथ ही, लॉग में यह दिखना चाहिए कि उपयोगकर्ता ने सदस्यता ली है या नहीं.

11. पूरा हो गया

इस कोडलैब को पूरा करने के लिए बधाई!

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

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

इस बारे में और पढ़ें

• वेब ऐप्लिकेशन से भेजा गया पुश नोटिफ़िकेशन: वेब की बुनियादी बातों से जुड़ा दस्तावेज़.
• वेब पुश लाइब्रेरी: वेब पुश लाइब्रेरी, जिनमें Node.js, PHP, Java, Python, C, और C# शामिल हैं.

काम की ब्लॉग पोस्ट

• वेब पुश पेलोड एन्क्रिप्शन
• ऐप्लिकेशन सर्वर की और वेब पुश
• सूचना से जुड़ी कार्रवाइयां
• आइकॉन, बंद करने के इवेंट, फिर से सूचना पाने की प्राथमिकताएं, और टाइमस्टैंप