वेब ऐप्लिकेशन मेनिफ़ेस्ट एक JSON फ़ाइल होती है, जो ब्राउज़र को यह बताती है कि उपयोगकर्ता के डेस्कटॉप या मोबाइल डिवाइस पर प्रोग्रेसिव वेब ऐप्लिकेशन (PWA) इंस्टॉल किए जाने पर उसे कैसा काम करना चाहिए. कम से कम, किसी सामान्य मेनिफ़ेस्ट फ़ाइल में ये चीज़ें शामिल होती हैं:
- ऐप्लिकेशन का नाम
- वे आइकॉन जिनका इस्तेमाल ऐप्लिकेशन को करना चाहिए
- वह यूआरएल जिसे ऐप्लिकेशन लॉन्च होने पर खोला जाना चाहिए
मेनिफ़ेस्ट फ़ाइल बनाएं
मेनिफ़ेस्ट फ़ाइल का कोई भी नाम हो सकता है, लेकिन इसे आम तौर पर 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 शामिल होना चाहिए. Android पर मास्केबल आइकॉन का इस्तेमाल करने के लिए, icon प्रॉपर्टी में "purpose": "any maskable" जोड़ें. इन्हें अडैप्टिव आइकॉन भी कहा जाता है.
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") के साथ काम करते हैं. अगर वे किसी दिए गए मोड के साथ काम नहीं करते, तो वे चेन के अगले डिसप्ले मोड पर वापस चले जाएंगे. बहुत कम मामलों में, इन फ़ॉलबैक की वजह से समस्याएं हो सकती हैं. उदाहरण के लिए, "minimal-ui" के काम न करने पर डेवलपर, "browser" डिसप्ले मोड में वापस आए बिना, "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 वाली PWA विंडो का उदाहरण.
मीडिया क्वेरी में theme_color
meta थीम कलर एलिमेंट के media एट्रिब्यूट का इस्तेमाल करके, मीडिया क्वेरी में theme_color में बदलाव किया जा सकता है. उदाहरण के लिए, इस तरह से आप एक रंग को हल्के मोड के लिए
और दूसरा रंग, गहरे रंग वाले मोड के लिए तय कर सकते हैं. हालांकि, इन सेटिंग को
अपने मेनिफ़ेस्ट में तय नहीं किया जा सकता. ज़्यादा जानकारी के लिए, 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 पिक्सल और ज़्यादा से ज़्यादा 3840 पिक्सल होनी चाहिए.
- ज़्यादा से ज़्यादा डाइमेंशन की लंबाई, कम से कम डाइमेंशन के 2.3 गुना से ज़्यादा नहीं हो सकती.
- डिवाइस के नाप या आकार से मेल खाने वाले सभी स्क्रीनशॉट का आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) एक जैसा होना चाहिए.
- Chrome 109 से, डेस्कटॉप पर सिर्फ़ वे स्क्रीनशॉट दिखाए जाते हैं जिनमें
form_factorको"wide"पर सेट किया गया हो.
- Chrome 109 से, डेस्कटॉप पर सिर्फ़ वे स्क्रीनशॉट दिखाए जाते हैं जिनमें
- 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 ऐसा आइकॉन चुनता है जो स्प्लैश स्क्रीन के डिवाइस रिज़ॉल्यूशन से सबसे करीब से मेल खाता है. 192px और 512px के आइकॉन देना ज़्यादातर मामलों के लिए काफ़ी होता है, लेकिन बेहतर मैच के लिए अतिरिक्त आइकॉन दिए जा सकते हैं.
इसके बारे में और पढ़ें
अपने वेब ऐप्लिकेशन मेनिफ़ेस्ट में जोड़ी जा सकने वाली अन्य प्रॉपर्टी के बारे में जानने के लिए, MDN वेब ऐप्लिकेशन मेनिफ़ेस्ट का दस्तावेज़ देखें.