Angular सीएलआई की मदद से, प्रोग्रेसिव वेब ऐप्लिकेशन बनाएं

क्या आपको अपने Angular ऐप्लिकेशन को इंस्टॉल करने की सुविधा देनी है? अब और इंतज़ार न करें!

Minko Gechev

इस पोस्ट में, आपको Angular कमांड लाइन इंटरफ़ेस (सीएलआई) का इस्तेमाल करके, प्रोग्रेसिव वेब ऐप्लिकेशन (पीडब्ल्यूए) बनाने का तरीका बताया गया है.

इस गाइड में दिया गया कोड सैंपल, GitHub पर देखा जा सकता है.

ध्यान दें: इस पोस्ट में यह मान लिया गया है कि आपको पहले से ही PWA और उनके फ़ायदों के बारे में पता है. अगर आपको फिर से जानकारी चाहिए, तो इंस्टॉल किए जा सकने वाले कलेक्शन पर जाएं.

इंस्टॉल किए जा सकने वाले PWA बनाना

अपने Angular ऐप्लिकेशन को PWA बनाने के लिए, आपको सिर्फ़ एक कमांड चलाने की ज़रूरत है:

ng add @angular/pwa

इस कमांड से:

• डिफ़ॉल्ट कैश मेमोरी कॉन्फ़िगरेशन के साथ सर्विस वर्कर बनाएं.
• एक मेनिफ़ेस्ट फ़ाइल बनाएं. इससे ब्राउज़र को यह पता चलता है कि उपयोगकर्ता के डिवाइस पर इंस्टॉल होने के बाद, आपका ऐप्लिकेशन कैसे काम करेगा.
• index.html में मेनिफ़ेस्ट फ़ाइल का लिंक जोड़ें.
• index.html में theme-color <meta> टैग जोड़ें.
• src/assets डायरेक्ट्री में ऐप्लिकेशन के आइकॉन बनाएं.

डिफ़ॉल्ट रूप से, पहले पेज के लोड होने के कुछ सेकंड के अंदर आपका सर्विस वर्कर रजिस्टर हो जाना चाहिए. अगर ऐसा नहीं है, तो registrationStrategy में बदलाव करें.

अपने PWA को पसंद के मुताबिक बनाना

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

अपने ऐप्लिकेशन की मेनिफ़ेस्ट फ़ाइल में, ऐप्लिकेशन का नाम, छोटा नाम, आइकॉन, थीम का रंग, और अन्य जानकारी दी जा सकती है. वेब ऐप्लिकेशन मेनिफ़ेस्ट जोड़ें पोस्ट में, सेट की जा सकने वाली सभी प्रॉपर्टी के बारे में पढ़ें.

Angular CLI से जनरेट की गई मेनिफ़ेस्ट फ़ाइल देखें:

{
  "name": "manifest-web-dev",
  "short_name": "manifest-web-dev",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    …
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

manifest.webmanifest में जाकर, इनमें से किसी भी प्रॉपर्टी की वैल्यू को बदलकर, उसे अपनी पसंद के मुताबिक बनाया जा सकता है.

कोई PWA, index.html में मौजूद link एलिमेंट की मदद से अपनी मेनिफ़ेस्ट फ़ाइल का रेफ़रंस देता है. जब ब्राउज़र को रेफ़रंस मिल जाएगा, तब वह होम स्क्रीन पर जोड़ें प्रॉम्प्ट दिखाएगा:

ng-add स्कीमेटिक्स में, आपके ऐप्लिकेशन को इंस्टॉल करने लायक बनाने के लिए ज़रूरी सभी चीज़ें शामिल होती हैं. इसलिए, ये कुछ शॉर्टकट आइकॉन जनरेट करते हैं. ये आइकॉन तब दिखते हैं, जब उपयोगकर्ता ऐप्लिकेशन को अपने डेस्कटॉप पर जोड़ता है:

अपने PWA को प्रोडक्शन में डिप्लॉय करने से पहले, पक्का करें कि आपने मेनिफ़ेस्ट प्रॉपर्टी और आइकॉन को पसंद के मुताबिक बनाया हो!

ध्यान दें: अगर आपको अपने PWA को वापस स्टैंडर्ड वेब ऐप्लिकेशन में बदलना है, तो index.html से manifest.webmanifest का रेफ़रंस हटा दें.

नतीजा

इंस्टॉल किया जा सकने वाला Angular ऐप्लिकेशन बनाने के लिए:

1. Angular CLI का इस्तेमाल करके, अपने प्रोजेक्ट में @angular/pwa जोड़ें.
2. अपने प्रोजेक्ट के हिसाब से, manifest.webmanifest फ़ाइल में मौजूद विकल्पों में बदलाव करें.
3. अपने प्रोजेक्ट के हिसाब से, src/assets/icons डायरेक्ट्री में मौजूद आइकॉन अपडेट करें.
4. इसके अलावा, index.html में जाकर theme-color में बदलाव करें.