किसी उपयोगकर्ता की सदस्यता लेना

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

इसे करने के लिए JavaScript API को आसानी से इस्तेमाल किया जा सकता है, इसलिए आइए, वजह है.

सुविधा की पहचान

सबसे पहले हमें यह जांचना होगा कि वर्तमान ब्राउज़र वाकई पुश संदेश सेवा का समर्थन करता है या नहीं. हम यह जांच कर सकते हैं कि पुश की सुविधा दो आसान जांचों से काम करती है.

1. navigator पर serviceWorker देखें.
2. विंडो में PushManager को देखें.

if (!('serviceWorker' in navigator)) {
  // Service Worker isn't supported on this browser, disable or hide UI.
  return;
}

if (!('PushManager' in window)) {
  // Push isn't supported on this browser, disable or hide UI.
  return;
}

जबकि ब्राउज़र समर्थन सर्विस वर्कर और दोनों के लिए तेज़ी से बढ़ रहा है पुश मैसेज भेजना, दोनों की सुविधा देना और बेहतर बनाना.

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

सुविधा का पता लगाने से हमें पता चलता है कि सर्विस वर्कर और Push, दोनों ही इस सुविधा का इस्तेमाल कर सकते हैं. अगले चरण पर जाएं "रजिस्टर करें" हमारा सर्विस वर्कर.

जब हम किसी सर्विस वर्कर को रजिस्टर करते हैं, तब हम ब्राउज़र को बताते हैं कि हमारी सर्विस वर्कर फ़ाइल कहां है. फ़ाइल अब भी सिर्फ़ JavaScript के तौर पर उपलब्ध है, लेकिन ब्राउज़र "इसे ऐक्सेस देगा" को ईमेल करता है एपीआई. ज़्यादा सटीक जानकारी के लिए, ब्राउज़र फ़ाइल को सर्विस वर्कर में चलाता है पर्यावरण को ध्यान में रखते हुए काम करना.

सर्विस वर्कर रजिस्टर करने के लिए, navigator.serviceWorker.register() पर कॉल करें, जो इसके पाथ में है हमारी फ़ाइल. जैसे:

function registerServiceWorker() {
  return navigator.serviceWorker
    .register('/service-worker.js')
    .then(function (registration) {
      console.log('Service worker successfully registered.');
      return registration;
    })
    .catch(function (err) {
      console.error('Unable to register service worker.', err);
    });
}

यह फ़ंक्शन ब्राउज़र को बताता है कि हमारे पास सर्विस वर्कर फ़ाइल है और यह कहां मौजूद है. तय सीमा में इस मामले में, सर्विस वर्कर फ़ाइल /service-worker.js पर है. ब्राउज़र में पर्दे के पीछे register() पर कॉल करने के बाद, यह तरीका अपनाया जाएगा:

1. सर्विस वर्कर फ़ाइल डाउनलोड करें.

2. JavaScript चलाएं.

3. अगर सब कुछ ठीक से काम करता है और कोई गड़बड़ी नहीं है, तो register() से प्रॉमिस लौटाया जाएगा हल हो जाएगा. अगर किसी भी तरह की गड़बड़ी होती है, तो प्रॉमिस अस्वीकार कर दिया जाएगा.

अगर register() अस्वीकार करता है, तो Chrome DevTools में टाइपिंग की गलतियों / गड़बड़ियों के लिए अपने JavaScript की दोबारा जांच करें.

register() का ठीक होने पर, यह ServiceWorkerRegistration दिखाता है. हम इसका इस्तेमाल करेंगे रजिस्ट्रेशन करने पर, PushManager API को ऐक्सेस किया जा सकता है.

PushManager API ब्राउज़र के साथ काम करता है

अनुमति का अनुरोध किया जा रहा है

हमने अपने सर्विस वर्कर को पंजीकृत कर दिया है और हम उपयोगकर्ता की सदस्यता लेने के लिए तैयार हैं. अगला चरण है उपयोगकर्ता से उन्हें पुश मैसेज भेजने की अनुमति देती है.

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

function askPermission() {
  return new Promise(function (resolve, reject) {
    const permissionResult = Notification.requestPermission(function (result) {
      resolve(result);
    });

    if (permissionResult) {
      permissionResult.then(resolve, reject);
    }
  }).then(function (permissionResult) {
    if (permissionResult !== 'granted') {
      throw new Error("We weren't granted permission.");
    }
  });
}

ऊपर दिए गए कोड में, कोड का महत्वपूर्ण स्निपेट है Notification.requestPermission(). इस तरीके से उपयोगकर्ता को यह सूचना दिखेगी:

जब उपयोगकर्ता 'अनुमति दें', 'ब्लॉक करें' बटन को दबाकर या उसे बंद करके अनुमति के अनुरोध पर कार्रवाई करता है, हमें नतीजा स्ट्रिंग के तौर पर दिया जाएगा: 'granted', 'default' या 'denied'.

ऊपर दिए गए सैंपल कोड में, askPermission() से लौटाया गया प्रॉमिस, अनुमति मिलने पर हल हो जाता है को स्वीकार नहीं किया जाता है, तो प्रॉमिस को अस्वीकार करते हुए हम एक गड़बड़ी करते हैं.

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

अच्छी बात यह है कि ज़्यादातर लोग, बिना अनुमति के कॉन्टेंट को तब तक इस्तेमाल करने की अनुमति देते हैं, जब तक वे जानते हैं कि अनुमति क्यों मांगी गई है.

हम देखेंगे कि कुछ लोकप्रिय साइटें बाद में किस तरह अनुमति मांगती हैं.

PushManager से किसी उपयोगकर्ता की सदस्यता लेना

जब हमारा सर्विस वर्कर पंजीकृत हो जाता है और हमें अनुमति मिल जाती है, तो हम registration.pushManager.subscribe() पर कॉल किया जा रहा है.

function subscribeUserToPush() {
  return navigator.serviceWorker
    .register('/service-worker.js')
    .then(function (registration) {
      const subscribeOptions = {
        userVisibleOnly: true,
        applicationServerKey: urlBase64ToUint8Array(
          'BEl62iUYgUivxIkv69yViEuiBIa-Ib9-SkvMeAtA3LFgDzkrxZJjSgSnfckjBJuBkr3qBUYIHBQFLXYp5Nksh8U',
        ),
      };

      return registration.pushManager.subscribe(subscribeOptions);
    })
    .then(function (pushSubscription) {
      console.log(
        'Received PushSubscription: ',
        JSON.stringify(pushSubscription),
      );
      return pushSubscription;
    });
}

subscribe() तरीके को कॉल करते समय, हम एक options ऑब्जेक्ट पास करते हैं, जिसमें दोनों शामिल होते हैं ज़रूरी और वैकल्पिक पैरामीटर.

आइए, उन सभी विकल्पों पर नज़र डालते हैं जिन्हें आपको लोगों को देना है.

सिर्फ़ उपयोगकर्ता के लिए उपलब्ध विकल्प

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

चिंता यह थी कि डेवलपर, Google News पर किसी उपयोगकर्ता की जगह की जानकारी को ट्रैक करने जैसी बिना किसी जानकारी के पब्लिश किया जा सकता है.

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

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

Chrome अभी सिर्फ़ उन सदस्यताओं के लिए Push API के साथ काम करता है जिनकी वजह से उपयोगकर्ता को दिखने वाले मैसेज. आप कॉल करके इसकी जानकारी दे सकते हैं अगर आपके पास इन फ़ॉर्मैट की फ़ाइल नहीं है, तो pushManager.subscribe({userVisibleOnly: true}) बटन का इस्तेमाल करें. यहां जाएं: ज़्यादा जानकारी के लिए, https://goo.gl/yqv4Q4 पर जाएं.

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

appServerKey विकल्प

हमने कम शब्दों में "ऐप्लिकेशन सर्वर कुंजियां" के बारे में बताया था पर क्लिक करें. "ऐप्लिकेशन सर्वर कुंजियां" इनका इस्तेमाल पुश सेवा की मदद से किया जाता है, ताकि यह पता लगाया जा सके कि उपयोगकर्ता किस ऐप्लिकेशन की सदस्यता ले रहा है और पक्का करें कि वही ऐप्लिकेशन उस उपयोगकर्ता को मैसेज भेज रहा है.

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

subscribe() कॉल में पास किया गया applicationServerKey विकल्प, ऐप्लिकेशन की सार्वजनिक है बटन दबाएं. उपयोगकर्ता की सदस्यता लेते समय ब्राउज़र इसे एक पुश सेवा पर भेज देता है, जिसका मतलब है पुश सेवा आपके ऐप्लिकेशन की सार्वजनिक कुंजी को उपयोगकर्ता के PushSubscription से जोड़ सकती है.

नीचे दिया गया डायग्राम, इन चरणों को दिखाता है.

1. आपका वेब ऐप्लिकेशन किसी ब्राउज़र में लोड किया गया है और आप subscribe() को कॉल करते हैं, जो आपके सार्वजनिक रूप से पास हो रहा है ऐप्लिकेशन सर्वर कुंजी.
2. इसके बाद ब्राउज़र किसी पुश सेवा को नेटवर्क का अनुरोध करता है, जो एंडपॉइंट जनरेट करेगा, इस एंडपॉइंट को ऐप्लिकेशन की सार्वजनिक कुंजी से जोड़ें और एंडपॉइंट को ब्राउज़र खोलें.
3. ब्राउज़र इस एंडपॉइंट को PushSubscription से जोड़ देगा, जिसे subscribe() प्रॉमिस.

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

तकनीकी रूप से, applicationServerKey ज़रूरी नहीं है. हालांकि, सबसे आसान Chrome पर लागू करने की ज़रूरत है, और दूसरे ब्राउज़र में इसकी ज़रूरत हो सकती है आने वाले समय में. यह Firefox पर वैकल्पिक है.

ऐप्लिकेशन सर्वर कुंजी क्या होनी चाहिए, यह तय करने वाला ब्यौरा वीएपीआईडी की खास बातें. जब भी आप "ऐप्लिकेशन सर्वर कुंजियां" से जुड़ी कोई जानकारी पढ़ते हों या "VAPID कुंजियां", बस इतना याद रखें कि वे एक ही चीज़ हैं.

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

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

    $ npm install -g web-push
    $ web-push generate-vapid-keys

आपको अपने ऐप्लिकेशन के लिए इन कुंजियों को सिर्फ़ एक बार बनाने की ज़रूरत है, बस पक्का करें कि आपने निजी पासकोड निजी पर क्लिक करें. (हां, मैंने अभी यही कहा था.)

अनुमतियां और सदस्यता लें()

subscribe() को कॉल करने का एक खराब असर होता है. अगर आपके वेब ऐप्लिकेशन को subscribe() पर कॉल करते समय सूचनाएं दिखा रहा है, तो ब्राउज़र अनुमतियां दी हैं. यह तब काम आता है, जब आपका यूज़र इंटरफ़ेस (यूआई) इस फ़्लो के साथ काम करता हो, लेकिन अगर आपको और नियंत्रण (और मुझे लगता है कि ज़्यादातर डेवलपर) अपनाए रखने के लिए, Notification.requestPermission() API का इस्तेमाल करते रहेंगे इस टूल का इस्तेमाल हम पहले करते थे.

PushSubscription क्या है?

हम subscribe() को कॉल करते हैं, कुछ विकल्पों को पास करते हैं और इसके बदले में हमें एक वचन मिलता है, जो PushSubscription का नतीजा कुछ इस तरह का कोड होगा:

function subscribeUserToPush() {
  return navigator.serviceWorker
    .register('/service-worker.js')
    .then(function (registration) {
      const subscribeOptions = {
        userVisibleOnly: true,
        applicationServerKey: urlBase64ToUint8Array(
          'BEl62iUYgUivxIkv69yViEuiBIa-Ib9-SkvMeAtA3LFgDzkrxZJjSgSnfckjBJuBkr3qBUYIHBQFLXYp5Nksh8U',
        ),
      };

      return registration.pushManager.subscribe(subscribeOptions);
    })
    .then(function (pushSubscription) {
      console.log(
        'Received PushSubscription: ',
        JSON.stringify(pushSubscription),
      );
      return pushSubscription;
    });
}

PushSubscription ऑब्जेक्ट में, एक पुश भेजने के लिए ज़रूरी सभी जानकारी मौजूद है उस उपयोगकर्ता को मैसेज भेजना चाहते हैं. अगर आप JSON.stringify() का इस्तेमाल करके कॉन्टेंट को प्रिंट करते हैं, तो आपको फ़ॉलो किया जा रहा है:

    {
      "endpoint": "https://some.pushservice.com/something-unique",
      "keys": {
        "p256dh":
    "BIPUL12DLfytvTajnryr2PRdAgXS3HGKiLqndGcJGabyhHheJYlNGCeXl1dn18gSJ1WAkAPIxr4gK0_dQds4yiI=",
        "auth":"FPssNDTKnInHVndSTdbKFw=="
      }
    }

endpoint, push services का यूआरएल है. पुश मैसेज को ट्रिगर करने के लिए, पोस्ट का अनुरोध करें इस यूआरएल को लिंक करने के लिए.

keys ऑब्जेक्ट में वे वैल्यू होती हैं जिनका इस्तेमाल पुश मैसेज के साथ भेजे गए मैसेज के डेटा को एन्क्रिप्ट (सुरक्षित) करने के लिए किया जाता है (जिसके बारे में हम इस सेक्शन में आगे बात करेंगे).

समयसीमा खत्म होने से रोकने के लिए, नियमित रूप से दोबारा सदस्यता लेना

पुश नोटिफ़िकेशन की सदस्यता लेने पर, आपको अक्सर null का PushSubscription.expirationTime मिलता है. इसका मतलब यह है कि सदस्यता कभी खत्म नहीं होती. इसके उलट, जब आपको DOMHighResTimeStamp मिलता है, जिससे आपको सदस्यता खत्म होने के सटीक समय की जानकारी मिलती है. हालांकि, आम तौर पर ब्राउज़र, अब भी सदस्यताओं की समयसीमा खत्म होने देते हैं. उदाहरण के लिए, अगर लंबे समय तक कोई पुश नोटिफ़िकेशन नहीं मिला हो या ब्राउज़र यह पता लगाता हो कि उपयोगकर्ता किसी ऐसे ऐप्लिकेशन का इस्तेमाल नहीं कर रहा है जिसमें पुश नोटिफ़िकेशन की अनुमति है. इससे बचने का एक तरीका यह है कि सूचना मिलने पर उपयोगकर्ता को फिर से सदस्यता लें, जैसा कि इस स्निपेट में दिखाया गया है. इसके लिए ज़रूरी है कि ब्राउज़र आपको बार-बार सूचनाएं भेजता हो, ताकि आपकी सदस्यता अपने-आप खत्म न हो. साथ ही, आपको उपयोगकर्ता को अनजाने में स्पैम करने से रोकने की सही सूचना के फ़ायदों और नुकसानों पर ध्यान देना चाहिए, ताकि सदस्यता की समयसीमा खत्म न हो. आखिर में, आपको ऐसी जानकारी नहीं देनी चाहिए जो उपयोगकर्ता को सूचना देने के लिए ली गई सदस्यताओं से बचाने के लिए, ब्राउज़र को नुकसान पहुंचाए.

/* In the Service Worker. */

self.addEventListener('push', function(event) {
  console.log('Received a push message', event);

  // Display notification or handle data
  // Example: show a notification
  const title = 'New Notification';
  const body = 'You have new updates!';
  const icon = '/images/icon.png';
  const tag = 'simple-push-demo-notification-tag';

  event.waitUntil(
    self.registration.showNotification(title, {
      body: body,
      icon: icon,
      tag: tag
    })
  );

  // Attempt to resubscribe after receiving a notification
  event.waitUntil(resubscribeToPush());
});

function resubscribeToPush() {
  return self.registration.pushManager.getSubscription()
    .then(function(subscription) {
      if (subscription) {
        return subscription.unsubscribe();
      }
    })
    .then(function() {
      return self.registration.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: urlBase64ToUint8Array('YOUR_PUBLIC_VAPID_KEY_HERE')
      });
    })
    .then(function(subscription) {
      console.log('Resubscribed to push notifications:', subscription);
      // Optionally, send new subscription details to your server
    })
    .catch(function(error) {
      console.error('Failed to resubscribe:', error);
    });
}

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

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

const subscriptionObject = {
  endpoint: pushSubscription.endpoint,
  keys: {
    p256dh: pushSubscription.getKeys('p256dh'),
    auth: pushSubscription.getKeys('auth'),
  },
};

// The above is the same output as:

const subscriptionObjectToo = JSON.stringify(pushSubscription);

सदस्यता वेब पेज पर इस तरह से भेजी जाती है:

function sendSubscriptionToBackEnd(subscription) {
  return fetch('/api/save-subscription/', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(subscription),
  })
    .then(function (response) {
      if (!response.ok) {
        throw new Error('Bad status code from server.');
      }

      return response.json();
    })
    .then(function (responseData) {
      if (!(responseData.data && responseData.data.success)) {
        throw new Error('Bad response from server.');
      }
    });
}

नोड सर्वर को यह अनुरोध मिलता है और वह डेटा को बाद में इस्तेमाल करने के लिए डेटाबेस में सेव करता है.

app.post('/api/save-subscription/', function (req, res) {
  if (!isValidSaveRequest(req, res)) {
    return;
  }

  return saveSubscriptionToDatabase(req.body)
    .then(function (subscriptionId) {
      res.setHeader('Content-Type', 'application/json');
      res.send(JSON.stringify({data: {success: true}}));
    })
    .catch(function (err) {
      res.status(500);
      res.setHeader('Content-Type', 'application/json');
      res.send(
        JSON.stringify({
          error: {
            id: 'unable-to-save-subscription',
            message:
              'The subscription was received but we were unable to save it to our database.',
          },
        }),
      );
    });
});

अपने सर्वर पर मौजूद PushSubscription की जानकारी की मदद से, हम अपने उपयोगकर्ता को मैसेज भेज सकते हैं.

समयसीमा खत्म होने से रोकने के लिए, नियमित रूप से दोबारा सदस्यता लेना

पुश नोटिफ़िकेशन की सदस्यता लेने पर, आपको अक्सर null का PushSubscription.expirationTime मिलता है. इसका मतलब यह है कि सदस्यता कभी खत्म नहीं होती. इसके उलट, जब आपको DOMHighResTimeStamp मिलता है, जिससे आपको सदस्यता खत्म होने के सटीक समय की जानकारी मिलती है. हालांकि, आम तौर पर ब्राउज़र, अब भी सदस्यताओं की समयसीमा खत्म होने देते हैं. उदाहरण के लिए, अगर लंबे समय तक कोई पुश नोटिफ़िकेशन नहीं मिला हो या ब्राउज़र यह पता लगाता हो कि उपयोगकर्ता, पुश नोटिफ़िकेशन की अनुमति वाले ऐप्लिकेशन का इस्तेमाल नहीं कर रहा है. इससे बचने का एक तरीका यह है कि सूचना मिलने पर उपयोगकर्ता को फिर से सदस्यता लें, जैसा कि इस स्निपेट में दिखाया गया है. इसके लिए ज़रूरी है कि ब्राउज़र आपको बार-बार सूचनाएं भेजता हो, ताकि आपकी सदस्यता अपने-आप खत्म न हो. साथ ही, आपको उपयोगकर्ता को स्पैम भेजने से रोकने के लिए, सही सूचना की ज़रूरत के फ़ायदों और नुकसानों पर सावधानी से ध्यान देना चाहिए, ताकि सदस्यता की समयसीमा खत्म न हो. आखिर में, आपको ऐसी जानकारी नहीं देनी चाहिए जो उपयोगकर्ता को सूचना देने के लिए ली गई सदस्यताओं से बचाने के लिए, ब्राउज़र को नुकसान पहुंचाए.

/* In the Service Worker. */

self.addEventListener('push', function(event) {
  console.log('Received a push message', event);

  // Display notification or handle data
  // Example: show a notification
  const title = 'New Notification';
  const body = 'You have new updates!';
  const icon = '/images/icon.png';
  const tag = 'simple-push-demo-notification-tag';

  event.waitUntil(
    self.registration.showNotification(title, {
      body: body,
      icon: icon,
      tag: tag
    })
  );

  // Attempt to resubscribe after receiving a notification
  event.waitUntil(resubscribeToPush());
});

function resubscribeToPush() {
  return self.registration.pushManager.getSubscription()
    .then(function(subscription) {
      if (subscription) {
        return subscription.unsubscribe();
      }
    })
    .then(function() {
      return self.registration.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: urlBase64ToUint8Array('YOUR_PUBLIC_VAPID_KEY_HERE')
      });
    })
    .then(function(subscription) {
      console.log('Resubscribed to push notifications:', subscription);
      // Optionally, send new subscription details to your server
    })
    .catch(function(error) {
      console.error('Failed to resubscribe:', error);
    });
}

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

कुछ सामान्य सवाल जो लोगों ने अब तक पूछे हैं:

क्या मैं ब्राउज़र द्वारा उपयोग की जाने वाली पुश सेवा को बदल सकता/सकती हूं?

नहीं. पुश सेवा को ब्राउज़र द्वारा चुना जाता है और जैसा कि हमने subscribe() कॉल करें, ब्राउज़र पुश सेवा के लिए नेटवर्क अनुरोध करेगा PushSubscription की जानकारी को वापस पाने के लिए.

हर ब्राउज़र एक अलग Push Service का इस्तेमाल करता है, क्या उसके पास अलग API है?

सभी पुश सेवाओं के लिए एक ही एपीआई होना चाहिए.

इस सामान्य API को वेब पुश प्रोटोकॉल और नेटवर्क अनुरोध की जानकारी देता है. आपके ऐप्लिकेशन को पुश मैसेज ट्रिगर करना होगा.

अगर मैं किसी उपयोगकर्ता को डेस्कटॉप पर सदस्यता देता हूं, तो क्या वह अपने फ़ोन पर भी सदस्यता लेता है?

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

आगे कहां जाना है

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

कोड लैब

• पुश नोटिफ़िकेशन क्लाइंट बनाना
• पुश नोटिफ़िकेशन सर्वर बनाना