खराब कनेक्टिविटी वाले नेटवर्क पर अपने ऐप्लिकेशन को तेज़ और ज़्यादा भरोसेमंद बनाने के लिए, Angular सर्विस वर्कर का इस्तेमाल करें.
इंटरनेट कनेक्शन सीमित होने से जुड़ी समस्या ठीक करना
जब उपयोगकर्ताओं के पास सीमित नेटवर्क का ऐक्सेस होता है या कोई भी ऐक्सेस नहीं होता है, तब वेब ऐप्लिकेशन की मुख्य सुविधाएं और उनके काम करने का तरीका काफ़ी खराब हो सकता है. साथ ही, हो सकता है कि वे अक्सर काम न करें. पहले से कैश मेमोरी में सेव करने की सुविधा देने के लिए, सर्विस वर्कर का इस्तेमाल करने पर, नेटवर्क के अनुरोधों को रोका जा सकता है. साथ ही, नेटवर्क से दोबारा पाने के बजाय, सीधे लोकल कैश मेमोरी से जवाब डिलीवर किए जा सकते हैं. ऐप्लिकेशन की ऐसेट कैश मेमोरी में सेव होने के बाद, यह तरीका किसी ऐप्लिकेशन की स्पीड को बढ़ाने में मदद कर सकता है. साथ ही, इससे उपयोगकर्ता के ऑफ़लाइन होने पर भी ऐप्लिकेशन काम करता है.
इस पोस्ट में, Angular ऐप्लिकेशन में प्रीकैशिंग की सुविधा को सेट अप करने का तरीका बताया गया है. इसका मतलब है कि आपको प्रीकैशिंग और सर्विस वर्कर के बारे में पहले से पता है. अगर आपको रीफ़्रेशर की ज़रूरत है, तो सर्विस वर्कर और कैश मेमोरी एपीआई की पोस्ट देखें.
पेश है Angular सर्विस वर्कर
Angular की टीम, प्रीकैशिंग फ़ंक्शन के साथ एक सर्विस वर्कर मॉड्यूल उपलब्ध कराती है. यह सुविधा, फ़्रेमवर्क और Angular कमांड लाइन इंटरफ़ेस (सीएलआई) के साथ अच्छी तरह से इंटिग्रेट होती है.
सर्विस वर्कर जोड़ने के लिए, सीएलआई में इस निर्देश को चलाएं:
ng add @angular/pwa
@angular/service-worker और @angular/pwa को अब ऐप्लिकेशन में इंस्टॉल कर लिया जाना चाहिए और ये package.json में दिखने चाहिए. ng-add स्कीमाटिक, प्रोजेक्ट में ngsw-config.json नाम की फ़ाइल भी जोड़ता है, जिसका इस्तेमाल सर्विस वर्कर को कॉन्फ़िगर करने के लिए किया जा सकता है. (फ़ाइल में एक डिफ़ॉल्ट कॉन्फ़िगरेशन होता है, जिसे आप बाद में कस्टमाइज़ करेंगे.)
अब प्रोडक्शन के लिए प्रोजेक्ट तैयार करें:
ng build --prod
dist/service-worker-web-dev डायरेक्ट्री में आपको ngsw.json नाम की फ़ाइल मिलेगी. यह फ़ाइल, Angular सर्विस वर्कर को ऐप्लिकेशन में ऐसेट को कैश मेमोरी में सेव करने का तरीका बताती है. फ़ाइल, बिल्ड प्रोसेस के दौरान कॉन्फ़िगरेशन (ngsw-config.json) और बिल्ड के समय बनाई गई ऐसेट के आधार पर जनरेट होती है.
अब उस डायरेक्ट्री में एचटीटीपी सर्वर शुरू करें जिसमें आपके ऐप्लिकेशन की प्रोडक्शन ऐसेट शामिल हैं. इसके बाद, सार्वजनिक यूआरएल खोलें और Chrome DevTools में इसके नेटवर्क अनुरोधों को देखें:
- DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.
- नेटवर्क टैब पर क्लिक करें.
ध्यान दें कि नेटवर्क टैब में ऐसी स्थिर एसेट का एक समूह मौजूद है, जो ngsw-worker.js स्क्रिप्ट के ज़रिए सीधे बैकग्राउंड में डाउनलोड की जाती है:
यह Angular सर्विस वर्कर, जनरेट की गई ngsw.json मेनिफ़ेस्ट फ़ाइल में तय की गई स्टैटिक ऐसेट को पहले से कैश मेमोरी में सेव कर रहा है.
हालांकि, एक ज़रूरी ऐसेट मौजूद नहीं है: nyan.png. इस इमेज को पहले से कैश मेमोरी में सेव करने के लिए, आपको एक ऐसा पैटर्न जोड़ना होगा जिसमें यह फ़ाइल फ़ोल्डर के रूट में मौजूद ngsw-config.json में शामिल हो:
{
"$schema": "./node_modules/@angular/service-worker/config/schema.json",
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/*.css",
"/*.js",
"/assets/*.png"
]
}
},
...
}
इस बदलाव से, /assets फ़ोल्डर में मौजूद सभी PNG इमेज, app के रिसॉर्स ऐसेट ग्रुप में जुड़ जाती हैं. इस ऐसेट ग्रुप के लिए installMode को prefetch पर सेट किया गया है. इसलिए, सर्विस वर्कर, बताई गई सभी ऐसेट को पहले ही कैश मेमोरी में सेव कर लेगा. इन ऐसेट में अब PNG इमेज शामिल हैं.
अन्य ऐसेट को पहले से कैश मेमोरी में सेव करना भी आसान है: app रिसॉर्स ऐसेट ग्रुप में पैटर्न अपडेट करें.
नतीजा
पहले से कैश मेमोरी में सेव करने के लिए, सर्विस वर्कर का इस्तेमाल करने से आपके ऐप्लिकेशन की परफ़ॉर्मेंस बेहतर हो सकती है. ऐसा करने के लिए, एसेट को लोकल कैश मेमोरी में सेव किया जाता है. इससे खराब नेटवर्क पर ये ऐप्लिकेशन ज़्यादा भरोसेमंद बनते हैं. ऐंग्युलर और ऐंग्युलर सीएलआई की मदद से प्रीकैशिंग का इस्तेमाल करने के लिए:
- अपने प्रोजेक्ट में
@angular/pwaपैकेज जोड़ें. ngsw-config.jsonमें बदलाव करके यह कंट्रोल करें कि सर्विस वर्कर क्या कैश मेमोरी में सेव कर सकता है.