सूचनाओं को मैनेज करने के लिए सर्विस वर्कर का इस्तेमाल करना

Kate Jeffreys

इस कोडलैब में, सूचनाओं को मैनेज करने के लिए, सर्विस वर्कर का इस्तेमाल किया जाएगा. यहां दिए गए निर्देशों में यह माना गया है कि आपको सर्विस वर्कर के बारे में पहले से पता है. साथ ही, आपको सूचना पाने की अनुमति का अनुरोध करने और सूचनाएं भेजने के बारे में बुनियादी जानकारी है. अगर आपको सूचनाओं के बारे में फिर से जानकारी चाहिए, तो Notifications API का इस्तेमाल शुरू करना कोडलैब देखें. सर्विस वर्कर के बारे में ज़्यादा जानने के लिए, Matt Gaunt का सर्विस वर्कर का परिचय लेख पढ़ें.

सैंपल ऐप्लिकेशन और शुरुआती कोड के बारे में जानकारी

सबसे पहले, Chrome के नए टैब में लाइव ऐप्लिकेशन देखें:

1. DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.

2. कंसोल टैब पर क्लिक करें.

3. पक्का करें कि फ़िल्टर बॉक्स के बगल में मौजूद, लेवल ड्रॉपडाउन में जानकारी विकल्प चुना गया हो.

4. लाइव ऐप्लिकेशन के DevTools कंसोल में, आपको यह कंसोल मैसेज दिखेगा:

   TODO: Implement getRegistration().

   यह फ़ंक्शन स्टब का मैसेज है, जिसे आपको इस कोडलैब में लागू करना होगा.

अब, आइए सैंपल ऐप्लिकेशन के कोड पर एक नज़र डालते हैं.

1. public/index.js पर एक नज़र डालें:

   • आपको जिन फ़ंक्शन को लागू करना है उनके लिए चार स्टब दिए गए हैं: registerServiceWorker, getRegistration, unRegisterServiceWorker, और sendNotification.

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

   • updateUI फ़ंक्शन, ऐप्लिकेशन के सभी बटन और मैसेज को रीफ़्रेश करता है.

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

   • यह स्क्रिप्ट, पेज लोड होने तक इंतज़ार करती है. इसके बाद, इसे शुरू करती है.

2. public/service-worker.js खोलें.

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

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

   जब सर्विस वर्कर को सूचनाएं मिलेंगी, तब उन्हें मैनेज करने के लिए आपको public/service-worker.js में कोड जोड़ना होगा.

सर्विस वर्कर को रजिस्टर करना

इस चरण में, आपको ऐसा कोड लिखना होगा जो तब काम करे, जब उपयोगकर्ता ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) में Register service worker पर क्लिक करे. यह कोड, public/service-worker.js को सर्विस वर्कर के तौर पर रजिस्टर करेगा.

1. public/index.js खोलें. registerServiceWorker फ़ंक्शन की जगह यह कोड डालें:

   // Use the Service Worker API to register a service worker.
   async function registerServiceWorker() {
     await navigator.serviceWorker.register('./service-worker.js')
     updateUI();
   }
   

   ध्यान दें कि registerServiceWorker, प्रॉमिस को मैनेज करने के लिए async function डिक्लेरेशन का इस्तेमाल करता है. इसकी मदद से, Promise की हल की गई वैल्यू को await किया जा सकता है. उदाहरण के लिए, ऊपर दिया गया फ़ंक्शन, यूज़र इंटरफ़ेस (यूआई) को अपडेट करने से पहले, सर्विस वर्कर को रजिस्टर करने के नतीजे का इंतज़ार करता है. ज़्यादा जानकारी के लिए, MDN पर await देखें.

2. अब जब उपयोगकर्ता किसी सर्विस वर्कर को रजिस्टर कर सकता है, तो आपको सर्विस वर्कर रजिस्ट्रेशन ऑब्जेक्ट का रेफ़रंस मिल सकता है. public/index.js में, getRegistration फ़ंक्शन को इस कोड से बदलें:

   // Get the current service worker registration.
   function getRegistration() {
     return navigator.serviceWorker.getRegistration();
   }
   

   ऊपर दिया गया फ़ंक्शन, Service Worker API का इस्तेमाल करके, मौजूदा सर्विस वर्कर रजिस्ट्रेशन की जानकारी देता है. हालांकि, ऐसा तब होता है, जब सर्विस वर्कर रजिस्ट्रेशन मौजूद हो. इससे सर्विस वर्कर रजिस्ट्रेशन का रेफ़रंस पाना थोड़ा आसान हो जाता है.

• सर्विस वर्कर के रजिस्ट्रेशन की सुविधा को पूरा करने के लिए, सर्विस वर्कर का रजिस्ट्रेशन रद्द करने वाला कोड जोड़ें. unRegisterServiceWorker फ़ंक्शन की जगह यह कोड डालें:

  // Unregister a service worker, then update the UI.
  async function unRegisterServiceWorker() {
    // Get a reference to the service worker registration.
    let registration = await getRegistration();
    // Await the outcome of the unregistration attempt
    // so that the UI update is not superceded by a
    // returning Promise.
    await registration.unregister();
    updateUI();
  }
  

जिस टैब में लाइव ऐप्लिकेशन देखा जा रहा है उसमें जाकर, पेज को फिर से लोड करें. अब सर्विस वर्कर रजिस्टर करें और सर्विस वर्कर का रजिस्ट्रेशन रद्द करें बटन काम करने चाहिए.

सेवा देने वाले वर्कर को सूचनाएं भेजना

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

public/index.js खोलें और sendNotification फ़ंक्शन को इस कोड से बदलें:

// Create and send a test notification to the service worker.
async function sendNotification() {
  // Use a random number as part of the notification data
  // (so you can tell the notifications apart during testing!)
  let randy = Math.floor(Math.random() * 100);
  let notification = {
    title: 'Test ' + randy,
    options: { body: 'Test body ' + randy }
  };
  // Get a reference to the service worker registration.
  let registration = await getRegistration();
  // Check that the service worker registration exists.
  if (registration) {
    // Check that a service worker controller exists before
    // trying to access the postMessage method.
    if (navigator.serviceWorker.controller) {
      navigator.serviceWorker.controller.postMessage(notification);
    } else {
      console.log('No service worker controller found. Try a soft reload.');
    }
  }
}

यह कोड क्या कर रहा है, यहां बताया गया है:

• sendNotification एक एसिंक्रोनस फ़ंक्शन है. इसलिए, सर्विस वर्कर रजिस्ट्रेशन का रेफ़रंस पाने के लिए, await का इस्तेमाल किया जा सकता है.

• सर्विस वर्कर का postMessage तरीका, ऐप्लिकेशन से सर्विस वर्कर को डेटा भेजता है. ज़्यादा जानकारी के लिए, MDN का postMessage से जुड़ा दस्तावेज़ देखें.

• यह कोड, navigator.serviceWorker.controller फ़ंक्शन को ऐक्सेस करने से पहले, navigator.serviceWorker.controller प्रॉपर्टी की मौजूदगी की जांच करता है.postMessage अगर कोई सर्विस वर्कर चालू नहीं है या पेज को ज़बरदस्ती रीफ़्रेश किया गया है (Shift+फिर से लोड करें), तो navigator.serviceWorker.controller की वैल्यू null होगी. ज़्यादा जानकारी के लिए, MDN पर ServiceWorker कंट्रोलर का दस्तावेज़ देखें.

सर्विस वर्कर में सूचनाएं मैनेज करना

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

public/service-worker.js खोलें. फ़ाइल के आखिर में यह कोड जोड़ें:

// Show notification when received
self.addEventListener('message', (event) => {
  let notification = event.data;
  self.registration.showNotification(
    notification.title,
    notification.options
  ).catch((error) => {
    console.log(error);
  });
});

यहां इसके बारे में खास जानकारी दी गई है:

• self, सर्विस वर्कर का रेफ़रंस है.

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

इस सीरीज़ के अगले कोडलैब पर जाएं: पुश नोटिफ़िकेशन सर्वर बनाना.