Angular सर्विस वर्कर के साथ प्रीकैशिंग

Angular सर्विस वर्कर का इस्तेमाल करके, अपने ऐप्लिकेशन को खराब कनेक्टिविटी वाले नेटवर्क पर तेज़ और ज़्यादा भरोसेमंद बनाएं.

Minko Gechev

सीमित कनेक्टिविटी से जुड़ी समस्या हल करना

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

इस पोस्ट में, Angular ऐप्लिकेशन में कॉन्टेंट को पहले से कैश मेमोरी में सेव करने की सुविधा को सेट अप करने का तरीका बताया गया है. इसमें यह माना गया है कि आपको कॉन्टेंट को पहले से कैश मेमोरी में सेव करने की सुविधा और सेवा वर्कर के बारे में पहले से जानकारी है. अगर आपको रीफ़्रेशर की ज़रूरत है, तो सर्विस वर्कर और कैश मेमोरी एपीआई की पोस्ट देखें.

पेश है Angular सर्विस वर्कर

Angular टीम, पहले से कैश मेमोरी में सेव करने की सुविधा के साथ एक सर्विस वर्कर मॉड्यूल उपलब्ध कराती है. यह फ़्रेमवर्क और Angular कमांड-लाइन इंटरफ़ेस (CLI) के साथ अच्छी तरह से इंटिग्रेट होता है.

सेवा वर्कर जोड़ने के लिए, सीएलआई में यह कमांड चलाएं:

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 में उसके नेटवर्क अनुरोधों की जांच करें:

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

ध्यान दें कि नेटवर्क टैब में, ngsw-worker.js स्क्रिप्ट की मदद से बैकग्राउंड में सीधे डाउनलोड की गई कई स्टैटिक ऐसेट होती हैं:

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

हालांकि, एक ज़रूरी एसेट मौजूद नहीं है: nyan.png. इस इमेज को पहले से कैश मेमोरी में सेव करने के लिए, आपको एक पैटर्न जोड़ना होगा. यह पैटर्न, ngsw-config.json में शामिल होना चाहिए. 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 और Angular CLI के साथ, पहले से कैश मेमोरी में डेटा सेव करने की सुविधा का इस्तेमाल करने के लिए:

1. अपने प्रोजेक्ट में @angular/pwa पैकेज जोड़ें.
2. ngsw-config.json में बदलाव करके यह तय करें कि सर्विस वर्कर क्या कैश मेमोरी में सेव करेगा.