वेब ऐप्लिकेशन मेनिफ़ेस्ट जोड़ें

François Beaufort

Pete LePage

Thomas Steiner

Alexey Rodionov

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

• ऐप्लिकेशन का नाम
• ऐप्लिकेशन को इन आइकॉन का इस्तेमाल करना चाहिए
• वह यूआरएल जो ऐप्लिकेशन लॉन्च होने पर खुलना चाहिए

मेनिफ़ेस्ट फ़ाइल बनाएं

मेनिफ़ेस्ट फ़ाइल का कोई भी नाम हो सकता है, लेकिन आम तौर पर इसे manifest.json और रूट से दिखाया जाता है (आपकी वेबसाइट की टॉप-लेवल की डायरेक्ट्री). जानकारी यह सुझाव देता है कि एक्सटेंशन .webmanifest होना चाहिए, लेकिन हो सकता है कि आप JSON का इस्तेमाल करना चाहें ताकि मेनिफ़ेस्ट को पढ़ने में आसानी हो.

एक सामान्य मेनिफ़ेस्ट ऐसा दिखता है:

{
  "short_name": "Weather",
  "name": "Weather: Do I need an umbrella?",
  "icons": [
    {
      "src": "/images/icons-vector.svg",
      "type": "image/svg+xml",
      "sizes": "512x512"
    },
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "id": "/?source=pwa",
  "start_url": "/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#3367D6",
  "shortcuts": [
    {
      "name": "How's the weather today?",
      "short_name": "Today",
      "description": "View weather information for today",
      "url": "/today?source=pwa",
      "icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
    },
    {
      "name": "How's the weather tomorrow?",
      "short_name": "Tomorrow",
      "description": "View weather information for tomorrow",
      "url": "/tomorrow?source=pwa",
      "icons": [{ "src": "/images/tomorrow.png", "sizes": "192x192" }]
    }
  ],
  "description": "Weather forecast information",
  "screenshots": [
    {
      "src": "/images/screenshot1.png",
      "type": "image/png",
      "sizes": "540x720",
      "form_factor": "narrow"
    },
    {
      "src": "/images/screenshot2.jpg",
      "type": "image/jpg",
      "sizes": "720x540",
      "form_factor": "wide"
    }
  ]
}

मुख्य मेनिफ़ेस्ट प्रॉपर्टी

short_name और name

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

icons

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

icons प्रॉपर्टी, इमेज ऑब्जेक्ट का कलेक्शन होती है. हर ऑब्जेक्ट को src, sizes प्रॉपर्टी, और इमेज का type शामिल करें. इस्तेमाल करने के लिए मास्क किए जा सकने वाले आइकॉन, जिन्हें कभी-कभी अडैप्टिव आइकॉन भी कहा जाता है आइकॉन के लिए, "purpose": "any maskable" को icon प्रॉपर्टी में जोड़ें.

Chromium के लिए, आपको कम से कम 192x192 पिक्सल का आइकॉन और 512x512 पिक्सल का आइकॉन. अगर आइकॉन के सिर्फ़ ये दो साइज़ दिए गए हैं, तो Chrome आइकॉन को डिवाइस पर फ़िट करने के लिए अपने-आप स्केल करता है. अगर आपको अपनी परफ़ॉर्मेंस बेहतर करनी है, और उन्हें पिक्सल-परफ़ेक्शन के लिए अडजस्ट किया जा सकता है. साथ ही, समय-समय पर आइकॉन उपलब्ध कराए जाते हैं में से 48dp.

id

id प्रॉपर्टी की मदद से, साफ़ तौर पर उस आइडेंटिफ़ायर के बारे में बताया जा सकता है जिसका इस्तेमाल का इस्तेमाल करें. मेनिफ़ेस्ट में id प्रॉपर्टी जोड़ने से इन चीज़ों पर निर्भरता हट जाती है start_url या मेनिफ़ेस्ट की जगह की जानकारी इकट्ठा करती है और उसे अपडेट करने में मदद करती है साथ ही, हमें यह भी समझ नहीं आ रहा है. ज़्यादा जानकारी के लिए, यह देखें वेब ऐप्लिकेशन मेनिफ़ेस्ट आईडी प्रॉपर्टी की मदद से, खास तौर पर पहचान करने वाले PWA की जानकारी.

start_url

start_url एक ज़रूरी प्रॉपर्टी है. यह ब्राउज़र को बताता है कि ऐप्लिकेशन के लॉन्च होने पर उसे शुरू होना चाहिए. साथ ही, वह ऐप्लिकेशन को शुरू होने से रोकता है आपके ऐप्लिकेशन को अपनी होम स्क्रीन पर जोड़ते समय, उपयोगकर्ता किसी भी पेज पर था.

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

background_color

स्प्लैश स्क्रीन पर background_color प्रॉपर्टी का इस्तेमाल तब किया जाता है, जब मोबाइल पर पहली बार लॉन्च हुआ हो.

display

आपके पास यह तय करने का विकल्प है कि ऐप्लिकेशन लॉन्च होने पर, कौनसा ब्राउज़र यूज़र इंटरफ़ेस (यूआई) दिखे. इसके लिए उदाहरण के लिए, पता बार और ब्राउज़र के यूज़र इंटरफ़ेस एलिमेंट को छिपाया जा सकता है. गेम फ़ुल स्क्रीन में लॉन्च करने के लिए भी बनाया जा सकता है. display प्रॉपर्टी नीचे दी गई वैल्यू दिखाई जाएंगी:

प्रॉपर्टी	व्यवहार
fullscreen	यह वेब ऐप्लिकेशन को बिना किसी ब्राउज़र यूज़र इंटरफ़ेस (यूआई) के खोलता है और डिसप्ले एरिया उपलब्ध है.
standalone	इससे वेब ऐप्लिकेशन, स्टैंडअलोन ऐप्लिकेशन जैसा दिखता है. यह ऐप्लिकेशन, में होती है, जो ब्राउज़र से अलग हो सकती है, और स्टैंडर्ड यूआरएल को छिपा देती है ब्राउज़र के यूज़र इंटरफ़ेस (यूआई) एलिमेंट, जैसे कि पता बार.
minimal-ui	यह मोड standalone के जैसा है, लेकिन यह जिसमें नेविगेशन को कंट्रोल करने के लिए कम से कम यूज़र इंटरफ़ेस (यूआई) एलिमेंट मौजूद हों, जैसे कि 'वापस जाएं' और 'फिर से लोड करें' बटन.
browser	ब्राउज़र का स्टैंडर्ड अनुभव.

display_override

आपका वेब ऐप्लिकेशन किस तरह दिखे, यह चुनने के लिए उसके मेनिफ़ेस्ट में display मोड को इस तौर पर सेट करें बताया गया था. सभी डिसप्ले काम करने के लिए ब्राउज़र ज़रूरी नहीं हैं मोड, लेकिन वे को स्पेसिफ़िकेशन के हिसाब से तय की गई फ़ॉलबैक चेन ("fullscreen" → "standalone" → "minimal-ui" → "browser"). अगर नहीं अगर वे दिए गए मोड का इस्तेमाल करते हैं, तो वे चेन में अगले डिसप्ले मोड पर वापस चले जाते हैं. तय सीमा में बहुत कम मामलों में, ये फ़ॉलबैक समस्याएं पैदा कर सकते हैं. उदाहरण के लिए, डेवलपर ये काम नहीं कर सकता "browser" डिसप्ले पर ज़बरदस्ती लागू किए बिना "minimal-ui" का अनुरोध करें "minimal-ui" के उपलब्ध न होने पर मोड चालू होगा. मौजूदा व्यवहार से यह भी पक्का होता है कि पुराने सिस्टम के साथ काम करने की सुविधा के साथ नए डिसप्ले मोड को लागू करना मुमकिन नहीं था, क्योंकि फ़ॉलबैक चेन में इनकी कोई जगह नहीं होती.

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

यहां display_override के इस्तेमाल का उदाहरण दिया गया है. इसकी जानकारी "window-control-overlay" दायरे से बाहर हैं इस पेज के लिए.

{
  "display_override": ["window-control-overlay", "minimal-ui"],
  "display": "standalone",
}

इस ऐप्लिकेशन को लोड करते समय, ब्राउज़र "window-control-overlay" का इस्तेमाल करने की कोशिश करता है चुनें. अगर वह उपलब्ध नहीं है, तो यह "minimal-ui" में वापस हो जाता है. इसके बाद, यह display प्रॉपर्टी से "standalone". अगर इनमें से कोई भी विकल्प उपलब्ध नहीं है, तो फिर ब्राउज़र, स्टैंडर्ड फ़ॉलबैक चेन पर वापस चला जाता है.

scope

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

scope पर कुछ और नोट:

• अगर आप अपने मेनिफ़ेस्ट में scope को शामिल नहीं करते हैं, तो डिफ़ॉल्ट तौर पर लागू scope शुरुआती यूआरएल है, लेकिन इसका फ़ाइल नाम, क्वेरी, और फ़्रैगमेंट हटा दिया गया है.
• scope एट्रिब्यूट, रिलेटिव पाथ (../) या इससे ऊपर के लेवल हो सकता है ऐसा पाथ (/) जिसकी मदद से नेविगेशन का कवरेज बढ़ाया जा सके आपके वेब ऐप्लिकेशन में.
• start_url, स्कोप में होना चाहिए.
• start_url, scope एट्रिब्यूट में बताए गए पाथ के हिसाब से है.
• / से शुरू होने वाला start_url हमेशा ऑरिजिन का रूट होगा.

theme_color

theme_color टूल बार का रंग सेट करता है और इसे इसमें दिखाया जा सकता है टास्क स्विचर में ऐप्लिकेशन की झलक देखी जा सकती है. theme_color को आपके दस्तावेज़ के हेड में meta थीम रंग बताया गया है.

मीडिया क्वेरी में theme_color

मीडिया क्वेरी में theme_color को अडजस्ट किया जा सकता है. इसके लिए,media meta थीम का कलर एलिमेंट. उदाहरण के लिए, लाइट मोड के लिए एक रंग तय किया जा सकता है इस तरीके से, गहरे रंग वाले मोड के लिए एक और. हालांकि, आप इन्हें परिभाषित नहीं कर सकते प्राथमिकताएं तय करें. ज़्यादा जानकारी के लिए, यह देखें w3c/manifest#975 GitHub से जुड़ी समस्या के बारे में ज़्यादा जानें.

<meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
<meta name="theme-color" media="(prefers-color-scheme: dark)"  content="black">

shortcuts

shortcuts प्रॉपर्टी, ऐप्लिकेशन शॉर्टकट का कलेक्शन होती है ऐसे ऑब्जेक्ट जो आपके ऐप्लिकेशन में मौजूद मुख्य टास्क को तुरंत ऐक्सेस करते हैं. हर सदस्य ऐसा शब्दकोश है जिसमें कम से कम एक name और एक url है.

description

description प्रॉपर्टी में आपके ऐप्लिकेशन के मकसद के बारे में बताया गया है.

Chrome में, सभी प्लैटफ़ॉर्म पर ब्यौरे में 300 से ज़्यादा वर्ण नहीं होने चाहिए. अगर विवरण इससे लंबा है, तो ब्राउज़र इसे एलिप्सिस वर्ण. Android पर, विवरण में भी अधिकतम टेक्स्ट की सात लाइन.

screenshots

screenshots प्रॉपर्टी, आपके ऐप्लिकेशन के बारे में बताने वाले इमेज ऑब्जेक्ट का कलेक्शन है इस्तेमाल नहीं किया जा सकता. हर ऑब्जेक्ट में src, एक sizes शामिल होना चाहिए प्रॉपर्टी और इमेज का type. form_factor प्रॉपर्टी ज़रूरी नहीं है. चौड़ी स्क्रीन पर लागू होने वाले स्क्रीनशॉट के लिए, इसे "wide" पर सेट किया जा सकता है सिर्फ़ छोटे स्क्रीनशॉट के लिए या "narrow".

Chrome में इमेज, इन शर्तों के मुताबिक होनी चाहिए:

• चौड़ाई और ऊंचाई कम से कम 320 पिक्सल और ज़्यादा से ज़्यादा 3,840 पिक्सल होनी चाहिए.
• डाइमेंशन की सबसे ज़्यादा वैल्यू, तय की गई कम से कम लंबाई के 2.3 गुना से ज़्यादा नहीं हो सकती डाइमेंशन.
• सही नाप या आकार से मेल खाने वाले सभी स्क्रीनशॉट एक जैसे होने चाहिए आसपेक्ट रेशियो या लंबाई-चौड़ाई का अनुपात.
  • Chrome 109 से, सिर्फ़ ऐसे स्क्रीनशॉट लें जिनमें form_factor को "wide" पर सेट किया गया हो डेस्कटॉप पर दिखाए जाते हैं.
• Chrome 109 से, ऐसे स्क्रीनशॉट जिनमें form_factor को "wide" पर सेट किया गया है उसे Android पर अनदेखा किया जाता है. बिना form_factor वाले स्क्रीनशॉट अब भी पुराने सिस्टम के साथ काम करने की सुविधा.

डेस्कटॉप पर Chrome, एक से ज़्यादा आठ स्क्रीनशॉट दिखाता है इन शर्तों को पूरा करते हैं. बाकी को अनदेखा कर दिया जाता है.

Android पर Chrome, एक साथ कम से कम एक और ज़्यादा से ज़्यादा पांच स्क्रीनशॉट दिखाता है इन शर्तों को पूरा करते हैं. बाकी को अनदेखा कर दिया जाता है.

अपने पेजों पर वेब ऐप्लिकेशन मेनिफ़ेस्ट जोड़ें

मेनिफ़ेस्ट बनाने के बाद, अपने सभी पेजों पर <link> टैग जोड़ें प्रोग्रेसिव वेब ऐप्लिकेशन. जैसे:

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

अपने मेनिफ़ेस्ट की जांच करें

यह पुष्टि करने के लिए कि आपका मेनिफ़ेस्ट सही तरीके से सेट अप हुआ है, उसमें मौजूद मेनिफ़ेस्ट पैनल का इस्तेमाल करें Chrome DevTools का ऐप्लिकेशन पैनल.

यह पैनल आपके कई मेनिफ़ेस्ट फ़ाइलों का ऐसा वर्शन उपलब्ध कराता है जिसे कोई भी व्यक्ति आसानी से पढ़ सकता है प्रॉपर्टी को एक्सपोर्ट करता है. साथ ही, इसकी मदद से यह पुष्टि की जा सकती है कि सभी इमेज लोड हो रही हैं सही तरीके से.

मोबाइल पर स्प्लैश स्क्रीन

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

Chrome, name से अपने-आप स्प्लैश स्क्रीन बना देता है. आपके मेनिफ़ेस्ट में background_color और icons की जानकारी मौजूद है. आसान तरीके से स्प्लैश स्क्रीन से ऐप्लिकेशन पर स्विच करते समय, आपको background_color वही रंग हो जो लोड पेज का है.

Chrome ब्राउज़र के लिए डिवाइस रिज़ॉल्यूशन से सबसे करीब से मेल खाने वाला आइकॉन चुनता है स्प्लैश स्क्रीन. ज़्यादातर मामलों में, 192 पिक्सल और 512 पिक्सल के आइकॉन देना काफ़ी होता है, लेकिन आप बेहतर मिलान के लिए अतिरिक्त आइकॉन दे सकते हैं.

इसके बारे में और पढ़ें

वेब ऐप्लिकेशन मेनिफ़ेस्ट में जोड़ी जा सकने वाली अन्य प्रॉपर्टी के बारे में जानने के लिए, यहां जाएं: MDN वेब ऐप्लिकेशन मेनिफ़ेस्ट का दस्तावेज़ पढ़ें.