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

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

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

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

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

• सर्विस वर्कर रजिस्ट्रेशन फ़ंक्शन को पूरा करने के लिए, सर्विस वर्कर का रजिस्ट्रेशन रद्द करने के लिए कोड जोड़ें. 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 पर जाएं.

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