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

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

Houssein Djirdeh

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

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

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

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

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

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

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. अगर आप चाहते हैं कि उपयोगकर्ता अपने डिवाइस पर यह ऐप्लिकेशन इंस्टॉल करें, तो किसी भी प्रॉपर्टी जोड़ी जा सकती हैं. कॉन्टेंट बनाने एमडीएन दस्तावेज़ सभी ज़रूरी और वैकल्पिक एट्रिब्यूट के बारे में बताता है.