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

Kate Jeffreys
Kate Jeffreys

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

सैंपल ऐप्लिकेशन को रीमिक्स करें और उसे नए टैब में देखें

एम्बेड किए गए Glitch ऐप्लिकेशन से सूचनाएं अपने-आप ब्लॉक हो जाती हैं. इसलिए, इस पेज पर ऐप्लिकेशन की झलक नहीं देखी जा सकती. इसके बजाय, यह तरीका अपनाएं:

  1. प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.
  2. साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीनफ़ुलस्क्रीन दबाएं.

Glitch एक नए Chrome टैब में खुलना चाहिए.

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

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

Chrome के नए टैब में लाइव ऐप्लिकेशन देखकर शुरुआत करें:

  1. DevTools खोलने के लिए, `Control+Shift+J` दबाएं. Mac पर, `Command+Option+J` दबाएं.
  2. कंसोल टैब पर क्लिक करें.

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

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

    TODO: Implement getRegistration().

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

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

  1. एम्बेड किए गए Glitch में, public/index.js पर एक नज़र डालें:

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

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

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

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

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

  2. एम्बेड किए गए Glitch में, public/service-worker.js खोलें.

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

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

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

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

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

  1. एम्बेड किए गए Glitch एडिटर में, 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 तरीके का इस्तेमाल करके, सेवा वर्कर को सूचना भेजेगा.

एम्बेड किए गए Glitch एडिटर में, 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 तरीका, ऐप्लिकेशन से सेवा वर्कर को डेटा भेजता है. ज़्यादा जानकारी के लिए postMessage पर MDN दस्तावेज़ देखें.

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

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

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

एम्बेड किए गए Glitch एडिटर में, 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 की गड़बड़ी को पकड़ा जा सके और इस गड़बड़ी को थोड़ा बेहतर तरीके से मैनेज किया जा सके.

अगर आपको कोई समस्या हो गई है, तो भरे हुए कोड के लिए glitch.com/edit/#!/codelab-notifications-service-worker-completed देखें.

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