Create React ऐप्लिकेशन की मदद से, वेब ऐप्लिकेशन मेनिफ़ेस्ट जोड़ना

Create React ऐप्लिकेशन में डिफ़ॉल्ट रूप से, एक वेब ऐप्लिकेशन मेनिफ़ेस्ट शामिल होता है. इसकी मदद से, कोई भी व्यक्ति अपने डिवाइस पर आपका React ऐप्लिकेशन इंस्टॉल कर सकता है.

हुसैन जिरदेह

ध्यान दें: अगर आपको वेब ऐप्लिकेशन मेनिफ़ेस्ट फ़ाइलों के काम करने का तरीका नहीं पता है, तो पहले वेब ऐप्लिकेशन मेनिफ़ेस्ट जोड़ें गाइड देखें.

Create React ऐप्लिकेशन (CRA) में डिफ़ॉल्ट रूप से वेब ऐप्लिकेशन मेनिफ़ेस्ट शामिल होता है. इस फ़ाइल में बदलाव करके, यह तय किया जा सकता है कि उपयोगकर्ता के डिवाइस पर इंस्टॉल किए जाने पर, आपका ऐप्लिकेशन कैसा दिखेगा.

यह जानकारी काम की क्यों है?

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

• नाम
• जानकारी
• ऐप्लिकेशन आइकॉन
• थीम का रंग

एमडीएन के दस्तावेज़ में उन सभी प्रॉपर्टी की जानकारी होती है जिनमें ज़्यादा बदलाव किए जा सकते हैं.

डिफ़ॉल्ट मेनिफ़ेस्ट में बदलाव करें

CRA में, कोई नया ऐप्लिकेशन बनाए जाने पर, /public/manifest.json डिफ़ॉल्ट मेनिफ़ेस्ट फ़ाइल में अपने-आप शामिल हो जाता है:

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

इससे कोई भी व्यक्ति अपने डिवाइस पर ऐप्लिकेशन इंस्टॉल कर सकता है और ऐप्लिकेशन के कुछ डिफ़ॉल्ट विवरण देख सकता है. एचटीएमएल फ़ाइल, public/index.html में मेनिफ़ेस्ट लोड करने के लिए <link> एलिमेंट भी शामिल होता है.

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

यहां CRA के साथ बनाए गए ऐसे ऐप्लिकेशन का उदाहरण दिया गया है जिसमें बदली गई मेनिफ़ेस्ट फ़ाइल है:

यह पता लगाने के लिए कि इस उदाहरण में सभी प्रॉपर्टी ठीक से काम कर रही हैं या नहीं:

• साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन दबाएं.
• DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.
• ऐप्लिकेशन टैब पर क्लिक करें.
• ऐप्लिकेशन पैनल में, मेनिफ़ेस्ट टैब पर क्लिक करें.

नतीजा

1. अगर ऐसी साइट बनाई जा रही है जिसे किसी डिवाइस पर इंस्टॉल करने की ज़रूरत नहीं है, तो एचटीएमएल फ़ाइल में मौजूद मेनिफ़ेस्ट और <link> एलिमेंट को हटा दें.
2. अगर आप चाहते हैं कि उपयोगकर्ता अपने डिवाइस पर ऐप्लिकेशन इंस्टॉल करें, तो अपनी पसंद की किसी भी प्रॉपर्टी के साथ मेनिफ़ेस्ट फ़ाइल में बदलाव करें (या अगर आप CRA का इस्तेमाल नहीं कर रहे हैं, तो नई फ़ाइल बनाएं). एमडीएन के दस्तावेज़ में, सभी ज़रूरी और वैकल्पिक एट्रिब्यूट की जानकारी दी गई है.