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

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

Minko Gechev

सीमित कनेक्टिविटी की समस्या से जूझ रहे हैं

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

इस पोस्ट में, 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 में इसके नेटवर्क अनुरोध देखें:

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

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

यह एंगुलर सर्विस वर्कर है जो जनरेट की गई 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 और Angular CLI के साथ प्री-कैशिंग का इस्तेमाल करने के लिए:

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