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

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

Minko Gechev

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

GitHub पर इस गाइड में आपको कोड का सैंपल मिलेगा.

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

अपने Angular ऐप्लिकेशन को PWA बनाने के लिए, आपको बस एक निर्देश चलाना होगा:

ng add @angular/pwa

इस निर्देश से:

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

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

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

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

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

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 को प्रोडक्शन में डिप्लॉय करने से पहले, पक्का करें कि आपने मेनिफ़ेस्ट प्रॉपर्टी और आइकॉन को पसंद के मुताबिक बनाया हो!

नतीजा

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

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