इस कोडलैब में, सूचनाएं मैनेज करने के लिए, सेवा वर्कर का इस्तेमाल किया जाएगा. यहां दिए गए निर्देशों में यह माना गया है कि आपको सेवा वर्कर्स के बारे में पहले से पता है. साथ ही, सूचना भेजने और सूचना की अनुमति का अनुरोध करने के बुनियादी तरीके भी आपको पता हैं. अगर आपको सूचनाओं के बारे में फिर से जानकारी चाहिए, तो Notifications API का इस्तेमाल शुरू करना कोडलैब देखें. सर्विस वर्कर के बारे में ज़्यादा जानने के लिए, मैट गौंट की सर्विस वर्कर के बारे में जानकारी देखें.
सैंपल ऐप्लिकेशन को रीमिक्स करें और उसे नए टैब में देखें
एम्बेड किए गए Glitch ऐप्लिकेशन से सूचनाएं अपने-आप ब्लॉक हो जाती हैं. इसलिए, इस पेज पर ऐप्लिकेशन की झलक नहीं देखी जा सकती. इसके बजाय, यह तरीका अपनाएं:
- प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.
- साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन दबाएं.
Glitch, Chrome के नए टैब में खुल जाएगा.
इस कोडलैब में काम करते समय, इस पेज पर एम्बेड किए गए Glitch में मौजूद कोड में बदलाव करें. बदलाव देखने के लिए, लाइव ऐप्लिकेशन वाले नए टैब को रीफ़्रेश करें.
सैंपल ऐप्लिकेशन और शुरुआती कोड के बारे में जानकारी
Chrome के नए टैब में लाइव ऐप्लिकेशन देखकर शुरुआत करें:
- DevTools खोलने के लिए, `Control+Shift+J` दबाएं. Mac पर, `Command+Option+J` दबाएं.
कंसोल टैब पर क्लिक करें.
पक्का करें कि फ़िल्टर बॉक्स के बगल में मौजूद लेवल ड्रॉपडाउन में, जानकारी विकल्प चुना गया हो.
आपको अपने लाइव ऐप्लिकेशन के DevTools कंसोल में, कंसोल का यह मैसेज दिखेगा:
TODO: Implement getRegistration()
.यह फ़ंक्शन स्टब का एक मैसेज है. आपको इस कोडलैब में इसे लागू करना होगा.
अब इस पेज पर एम्बेड किए गए Glitch में, सैंपल ऐप्लिकेशन के कोड पर एक नज़र डालते हैं.
एम्बेड किए गए Glitch में,
public/index.js
पर एक नज़र डालें:आपको जो फ़ंक्शन लागू करने हैं उनके लिए चार स्टब हैं:
registerServiceWorker
,getRegistration
,unRegisterServiceWorker
, औरsendNotification
.requestPermission
फ़ंक्शन, सूचनाएं भेजने के लिए उपयोगकर्ता से अनुमति का अनुरोध करता है. अगर आपने Notifications API codelab का इस्तेमाल शुरू किया है, तो आपको पता चलेगा कि यहां इसकेrequestPermission
फ़ंक्शन का इस्तेमाल किया गया है. सिर्फ़ एक फ़र्क़ यह है कि अब अनुमति के अनुरोध को हल करने के बाद, यह यूज़र इंटरफ़ेस को भी अपडेट करता है.updateUI
फ़ंक्शन, ऐप्लिकेशन के सभी बटन और मैसेज को रीफ़्रेश करता है.initializePage
फ़ंक्शन, ब्राउज़र में सेवा वर्कर की सुविधा के लिए सुविधा का पता लगाता है और ऐप्लिकेशन के यूज़र इंटरफ़ेस को अपडेट करता है.स्क्रिप्ट, पेज के लोड होने तक इंतज़ार करती है और फिर उसे शुरू करती है.
एम्बेड किए गए Glitch में,
public/service-worker.js
खोलें.जैसा कि नाम से पता चलता है, आपको इस फ़ाइल को सेवा वर्कर के तौर पर रजिस्टर करने के लिए, ऐप्लिकेशन में कोड जोड़ना होगा.
फ़िलहाल, ऐप्लिकेशन में इस फ़ाइल का इस्तेमाल नहीं किया जा रहा है. हालांकि, इसमें कुछ शुरुआती कोड शामिल हैं. सेवा वर्कर चालू होने पर, यह कोड कंसोल पर एक मैसेज प्रिंट करेगा.
जब सेवा वर्कर को सूचनाएं मिलती हैं, तो उन्हें मैनेज करने के लिए
public/service-worker.js
में कोड जोड़ा जाएगा.
सर्विस वर्कर को रजिस्टर करना
इस चरण में, आपको वह कोड लिखना होगा जो ऐप्लिकेशन के यूज़र इंटरफ़ेस में सेवा वर्कर रजिस्टर करें पर क्लिक करने पर चलता है.
यह कोड, public/service-worker.js
को सेवा वर्कर के तौर पर रजिस्टर करेगा.
एम्बेड किए गए 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
देखें.अब उपयोगकर्ता, सेवा वर्कर को रजिस्टर कर सकता है. इसलिए, आपको सेवा वर्कर रजिस्ट्रेशन ऑब्जेक्ट का रेफ़रंस मिल सकता है.
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 पर जाएं.
इस सीरीज़ के अगले कोडलैब पर जाएं: पुश नोटिफ़िकेशन सर्वर बनाना.