हम सेवा कार्यकर्ता में कस्टम तर्क का उपयोग करके कोणीय NGSW पंप करते हैं

प्रगतिशील वेब अनुप्रयोग (PWA) बनाने के लिए कोणीय का उपयोग करना

पीडब्ल्यूए विकसित करने के लिए कोणीय एक शानदार विकल्प है। जल्दी से PWA अनुप्रयोगों को विकसित करने के लिए , वर्कर 1.7.0 के बाद से सेवा कार्यकर्ताओं के लिए समर्थन कोणीय सीएलआई में शामिल किया गया है। सेवा कार्यकर्ता को एक कोणीय अनुप्रयोग में कॉन्फ़िगर किया जा सकता है जो एक json विन्यास फाइल का उपयोग करता है जो कई विकल्प और कार्य प्रदान करता है। यद्यपि यह बहुत अच्छा लगता है, लेकिन कोणीय सेवा कार्यकर्ता का उपयोग करने में एक बड़ी खामी है - इसका तर्क एक मानक तरीके से बढ़ाया नहीं जा सकता है।

आपको NGSW की क्षमताओं का विस्तार करने की आवश्यकता क्यों हो सकती है?

मेरे मामले में, मुझे एक कस्टम क्लिक नोटिफिकेशन ईवेंट श्रोता को पंजीकृत करने की आवश्यकता थी जो एक पुश नोटिफिकेशन की क्लिक क्रिया को हैंडल करेगा। मुझे स्वीकार करना चाहिए कि कोणीय सेवा कार्यकर्ता पुश सूचनाएँ प्राप्त करने और प्रदर्शित करने का एक बड़ा काम करता है - यह हिस्सा डेवलपर की ओर से बिना किसी प्रयास के ngsw-worker.js फ़ाइल द्वारा संभाला जाता है। और सबसे पहले, ऐसा लगा कि मेरे द्वारा आवश्यक तर्क प्रदान करने का एकमात्र तरीका एप्लिकेशन के निर्माण के दौरान उत्पन्न एनकाउंटर-वर्कर फ़ाइल के कोड में परिवर्तन करना था। लेकिन मैं समझ गया कि यह तरीका खराब है - इसे एनकॉउन्स् कॉन्फिगरेशन फाइल में कोई भी बदलाव करने के लिए हर बार समर्थन और जाँच की जरूरत होती है। सौभाग्य से, यह पता चला कि दो अतिरिक्त फ़ाइलों को दर्ज करके समस्या को आसानी से हल किया गया था।

निर्णय

चलिए / src फोल्डर में दो अतिरिक्त js फाइल बनाकर शुरू करते हैं।

sw-custom.js - इवेंट श्रोता वाली फ़ाइल:

(function () { 'use strict'; self.addEventListener('notificationclick', (event) => { event.notification.close(); console.log('notification details: ', event.notification); }); }()); 

sw-master.js एक ऐसी फाइल है, जो हमारे अपने तर्क के साथ NGSW को जोड़ती है:

 importScripts('./ngsw-worker.js'); importScripts('./sw-custom.js'); 

संपत्ति का पंजीकरण

नई स्क्रिप्ट फ़ाइलें बनाकर, हमें यह सुनिश्चित करने की आवश्यकता है कि निर्माण के दौरान कोणीय उन्हें ध्यान में रखे। तकनीकी दृष्टिकोण से, ये एक परियोजना बनाते समय कोणीय सीएलआई द्वारा बनाई गई favicon.ico फ़ाइल के समान संपत्ति हैं। हम कोणीय.जसन फ़ाइल में अपने अतिरिक्त संसाधनों को पंजीकृत कर सकते हैं ((कोणीय-cli.json को कोणीय के पुराने संस्करणों के लिए):

 { ..., "assets": [ "src/favicon.ico", "src/assets", "src/manifest.json", "src/sw-master.js", "src/sw-reminders.js" ], ... } 

सेवा कार्यकर्ता स्क्रिप्ट फिर से पंजीकृत करें

अंतिम चरण अनुप्रयोग स्टार्टअप के दौरान कोणीय द्वारा पंजीकृत सेवा कार्यकर्ता में प्रवेश बिंदु को बदलना है। ऐसा करने के लिए, हमें ServiceWorkerModule.register प्रविष्टि को app.module.ts में बदलना होगा:

 ServiceWorkerModule.register('/sw-master.js', { enabled: environment.production }) 

संक्षेप में प्रस्तुत करना

बस इतना ही, एप्लिकेशन के प्रोडक्शन असेंबली के बाद, हमारी नई स्क्रिप्ट फाइलों को कॉपी / डिस्टल फोल्डर में कॉपी किया जाएगा और सर्विसवेयर को रजिस्टर करते समय एप्लिकेशन द्वारा उपयोग किया जाएगा। यदि आप अधिक देखना चाहते हैं, तो आप मेरी GitHub प्रोफाइल पर भी देख सकते हैं, जहाँ मैंने कस्टम लॉजिक द्वारा पूरित ServiceWorker के साथ एक उदाहरण कोणीय अनुप्रयोग पोस्ट किया है।