वेब ऐप मेनिफेस्ट गाइड
एक वेब ऐप मेनिफेस्ट (site.webmanifest) एक JSON फ़ाइल है जो इंस्टॉल करने योग्य ब्राउज़रों को आपके ऐप का नाम, रंग, डिस्प्ले मोड और होम स्क्रीन पर उपयोग करने के लिए कौन से आइकन आकार बताता है। इसे `<link rel='manifest' href='/site.webmanifest'>` के साथ जोड़ने से डेस्कटॉप और Android पर Chrome और Edge PWA इंस्टाल प्रॉम्प्ट सक्षम हो जाता है। संपूर्ण PWA फ़ेविकॉन सेटअप के लिए इसे 192×192 और 512×512 PNG आइकन के साथ जोड़ें - दोनों favicon generator द्वारा निर्यात किए गए हैं।
वेब ऐप मेनिफ़ेस्ट एक JSON टेक्स्ट फ़ाइल है जो `application/manifest+json` MIME प्रकार के साथ प्रस्तुत की जाती है। यह आपके द्वारा चुने गए किसी भी यूआरएल पर रहता है, लेकिन डोमेन रूट पर कन्वेंशन /site.webmanifest है। आप इसे `<head>` तत्व के अंदर `<link rel='manifest' href='/site.webmanifest'>` का उपयोग करके अपने HTML से लिंक करें। ब्राउज़र मेनिफेस्ट को तब पढ़ता है जब वह मूल्यांकन कर रहा होता है कि इंस्टॉल प्रॉम्प्ट दिखाना है या इंस्टॉलेशन के बाद आपके ऐप को कैसे प्रस्तुत करना है।
आइकन ऐरे मेनिफेस्ट का सबसे फ़ेविकॉन-प्रासंगिक हिस्सा है। प्रत्येक प्रविष्टि एक स्रोत (छवि का यूआरएल), आकार (पिक्सेल आयाम), प्रकार (एमआईएमई प्रकार), और वैकल्पिक रूप से उद्देश्य (या तो 'कोई भी', 'मास्क करने योग्य', या 'कोई भी मास्क करने योग्य') निर्दिष्ट करती है। कम से कम, लॉन्चर आइकन के लिए 192×192 PNG और स्प्लैश स्क्रीन के लिए 512×512 PNG प्रदान करें। इनके बिना, Chrome इंस्टाल प्रॉम्प्ट नहीं दिखाएगा।
192×192 आइकन का उपयोग Android Chrome द्वारा ऐप लॉन्चर, हाल के ऐप्स स्विचर और नोटिफिकेशन शेड में किया जाता है जब आपका PWA एक वेब पुश नोटिफिकेशन भेजता है। यह PNG होना चाहिए, बिना रीडायरेक्ट के इसके घोषित यूआरएल पर पहुंच योग्य होना चाहिए, और यदि यह आपके मेनिफेस्ट से अलग डोमेन पर है तो उचित CORS हेडर के साथ परोसा जाना चाहिए। favicon generator सीधे उपयोग के लिए तैयार android-chrome-192x192.png निर्यात करता है।
512×512 आइकन का उपयोग होम-स्क्रीन लॉन्च के बाद ऐप लोड होने पर दिखाई जाने वाली PWA स्प्लैश स्क्रीन, डेस्कटॉप पर Chrome और Edge में इंस्टॉल डायलॉग पूर्वावलोकन और Chrome OS ऐप लॉन्चर के लिए किया जाता है। मेनिफेस्ट में गुम 512×512 प्रविष्टि इंस्टॉलेशन को अवरुद्ध नहीं करती है, लेकिन इसके परिणामस्वरूप स्प्लैश स्क्रीन पर एक सामान्य ब्राउज़र आइकन दिखाई देता है। बेहतर इंस्टाल अनुभव के लिए इसे हमेशा शामिल करें।
मास्क करने योग्य चिह्न एक Android-विशिष्ट संवर्द्धन हैं। Android एडेप्टिव आइकन सिस्टम ऐप आइकन पर ज्यामितीय मास्क (सर्कल, स्क्वायरल, टियरड्रॉप, गोल आयत) लागू करता है, और आकार डिवाइस निर्माता के अनुसार भिन्न होता है। एक मानक 'कोई भी' आइकन के किनारों को इन मास्क द्वारा काटा जा सकता है। 'मास्केबल' आइकन में सुरक्षित-क्षेत्र पैडिंग शामिल है - आवश्यक कलाकृति को छवि के 80% केंद्र (सुरक्षित क्षेत्र सर्कल) के भीतर रखें - ताकि लोगो को काटे बिना कोई भी मुखौटा लगाया जा सके।
मेनिफेस्ट में मास्क करने योग्य आइकन घोषित करने के लिए, `'purpose': 'maskable'`: `{ "src": "/android-chrome-512x512-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }` के साथ समान आकार के लिए दूसरी प्रविष्टि जोड़ें। आप एक प्रविष्टि पर `'purpose': 'any maskable'` भी जोड़ सकते हैं। जनरेटर के मास्केबल एक्सपोर्ट विकल्प का उपयोग करके अतिरिक्त पैडिंग के साथ अपना मास्केबल आइकन बनाएं।
नाम और शॉर्ट_नाम फ़ील्ड नियंत्रित करते हैं कि आपके ऐप को होम स्क्रीन और ऐप ड्रॉअर में कैसे लेबल किया जाता है। `name` इंस्टॉल प्रॉम्प्ट के दौरान दिखाया गया पूरा ऐप नाम है। `short_name` होम स्क्रीन पर आइकन के नीचे का लेबल है - छोटी स्क्रीन पर काट-छांट से बचने के लिए इसे 12 अक्षरों से कम रखें। इंस्टाल प्रॉम्प्ट प्रदर्शित होने के लिए दोनों फ़ील्ड आवश्यक हैं।
थीम_कलर फ़ील्ड ब्राउज़र एड्रेस बार का रंग Android Chrome पर सेट करता है जब उपयोगकर्ता आपकी साइट पर नेविगेट करता है (सिर्फ तब नहीं जब PWA इंस्टॉल हो)। यह टूलबार का रंग स्टैंडअलोन PWA मोड में भी सेट करता है। हेक्स मान के रूप में अपने प्राथमिक ब्रांड रंग का उपयोग करें। उन ब्राउज़रों के लिए अपने HTML में एक मिलान `<meta name='theme-color' content='#YOUR_COLOR'>` जोड़ें जो मेनिफेस्ट के थीम_रंग को नहीं पढ़ते हैं।
बैकग्राउंड_रंग फ़ील्ड PWA लॉन्च और आपके ऐप की सामग्री के पहले पेंट के बीच दिखाए गए स्प्लैश स्क्रीन पृष्ठभूमि रंग को नियंत्रित करता है। झटकेदार फ्लैश को रोकने के लिए इसे अपने ऐप की पृष्ठभूमि (आमतौर पर सफेद या प्राथमिक ब्रांड रंग) से मेल खाने के लिए सेट करें। यदि बैकग्राउंड_रंग आपके वास्तविक ऐप बैकग्राउंड से मेल नहीं खाता है, तो उपयोगकर्ताओं को स्टार्टअप के दौरान रंग में उछाल दिखाई देता है।
डिस्प्ले फ़ील्ड यह निर्धारित करती है कि इंस्टॉलेशन के बाद PWA कैसा दिखाई देगा। `standalone` ब्राउज़र एड्रेस बार और नेविगेशन बटन को छुपाता है, जिससे ऐप एक मूल ऐप जैसा दिखता है। `minimal-ui` न्यूनतम नेविगेशन बार रखता है। `fullscreen` स्टेटस बार सहित सब कुछ हटा देता है। `browser` पूर्ण ब्राउज़र यूआई दिखाता है। अधिकांश PWA के लिए, `standalone` सही विकल्प है। यदि डिस्प्ले `browser` पर सेट है तो इंस्टॉल प्रॉम्प्ट प्रकट नहीं होता है।
स्टार्ट_यूआरएल फ़ील्ड निर्दिष्ट करती है कि जब उपयोगकर्ता होम स्क्रीन से इंस्टॉल किए गए PWA को लॉन्च करता है तो कौन सा यूआरएल खुलता है। इसे हमेशा शामिल करें - इसके बिना, Android वह URL खोलता है जहां मैनिफ़ेस्ट खोजा गया था, जो आपके होम पेज के बजाय एक डीप-लिंक पेज हो सकता है। अधिकांश साइटों के लिए `'start_url': '/'` का उपयोग करें, या यदि आपके ऐप को किसी विशेष मार्ग पर शुरू करने की आवश्यकता है तो एक विशिष्ट यूआरएल का उपयोग करें।
Chrome DevTools में मैनिफ़ेस्ट मुद्दों को डीबग करना सीधा है। DevTools (F12) खोलें, एप्लिकेशन टैब पर नेविगेट करें और बाएं पैनल में मैनिफ़ेस्ट पर क्लिक करें। Chrome आपके मेनिफेस्ट का एक पार्स किया हुआ दृश्य, किसी भी पार्स त्रुटि, आइकन फ़ेच विफलता और एक 'इंस्टॉलेबिलिटी' चेकलिस्ट दिखाता है जो बताता है कि इंस्टॉल प्रॉम्प्ट क्यों नहीं दिख रहा है। सामान्य समस्याओं में आइकन नहीं मिले (404), गलत MIME प्रकार, या गुम 192×192 आइकन शामिल हैं।
मैनिफ़ेस्ट को सही ढंग से प्रस्तुत करने के लिए दो सर्वर-साइड कॉन्फ़िगरेशन की आवश्यकता होती है। सबसे पहले, फ़ाइल को `Content-Type: application/manifest+json` के साथ प्रस्तुत किया जाना चाहिए। दूसरा, यदि आपके आइकन सीडीएन पर हैं या मेनिफ़ेस्ट से भिन्न मूल के हैं, तो आइकन प्रतिक्रियाओं में उचित CORS हेडर (`Access-Control-Allow-Origin: *` या आपका डोमेन) शामिल होना चाहिए। आइकन फ़ाइलों पर CORS हेडर गुम होने के कारण ब्राउज़र मेनिफेस्ट को अमान्य मानेगा।
उन फ़्रेमवर्क के लिए जो मेनिफेस्ट को स्वचालित रूप से जेनरेट करते हैं, सत्यापित करें कि जेनरेट की गई फ़ाइल में आपके वास्तविक आइकन आकार और रंग शामिल हैं। Next.js आपके /app/manifest.ts निर्यात से एक मेनिफेस्ट उत्पन्न करता है। React बनाएं ऐप एक /public/manifest.json जेनरेट करता है। Vite डिफ़ॉल्ट रूप से मैनिफ़ेस्ट उत्पन्न नहीं करता है - मैन्युअल रूप से एक मैनिफ़ेस्ट बनाएं। सभी मामलों में, डिफ़ॉल्ट प्लेसहोल्डर आइकन के बजाय अपनी वास्तविक ब्रांडेड आइकन फ़ाइलों को संदर्भित करने के लिए आइकन सरणी को अपडेट करें।
यह कैसे काम करता है
- 1
192×192 और 512×512 PNG आइकन जेनरेट करें
अपना 512×512 लोगो PNG या SVG को [favicon generator](tool:favicon-generator) पर अपलोड करें। डाउनलोड पैकेज में android-chrome-192x192.png और android-chrome-512x512.png सीधे उपयोग के लिए तैयार हैं।
- 2
site.webmanifest बनाएं
कम से कम एक JSON फ़ाइल बनाएँ: `name`, `short_name`, `icons` (192 और 512 प्रविष्टियाँ), `theme_color`, `background_color`, और `display: 'standalone'`। जनरेटर पैकेज में पहले से भरा हुआ मेनिफेस्ट टेम्पलेट शामिल है।
- 3
मेनिफेस्ट को सही MIME प्रकार के साथ परोसें
`Content-Type: application/manifest+json` के साथ .webmanifest फ़ाइलें परोसने के लिए अपने सर्वर को कॉन्फ़िगर करें। Apache पर, .htaccess में `AddType application/manifest+json .webmanifest` जोड़ें। Nginx पर, MIME प्रकार को mime.types में जोड़ें।
- 4
मेनिफेस्ट को HTML में लिंक करें
अपने `<head>` के अंदर `<link rel='manifest' href='/site.webmanifest'>` जोड़ें। उन ब्राउज़रों के लिए `<meta name='theme-color' content='#YOUR_COLOR'>` भी जोड़ें जो मेनिफेस्ट थीम_रंग नहीं पढ़ते हैं।
- 5
Chrome DevTools से सत्यापित करें
Chrome DevTools > एप्लिकेशन > मैनिफ़ेस्ट खोलें। पुष्टि करें कि कोई त्रुटि नहीं दिखाई गई है और सभी आइकन ठीक हो गए हैं। PWA इंस्टॉल प्रॉम्प्ट के लिए सटीक मानदंड पूरे हुए या पूरे नहीं हुए, इसके लिए इंस्टालबिलिटी अनुभाग की जाँच करें।
- 6
इंस्टॉल प्रॉम्प्ट का परीक्षण करें
Android Chrome पर, अपनी साइट पर जाएँ। यदि सभी मानदंड पूरे होते हैं, तो Chrome ब्राउज़र मेनू में एक इंस्टॉल बैनर या 'होम स्क्रीन में जोड़ें' विकल्प दिखाता है। इंस्टालेशन के बाद, स्प्लैश स्क्रीन बैकग्राउंड रंग और होम-स्क्रीन आइकन रेंडर सही ढंग से सत्यापित करें।
अभी आज़माएं
अपना PWA आइकन पैकेज जेनरेट करें
फ़ेविकॉन जनरेटरसामान्य प्रश्न
क्या किसी बुनियादी वेबसाइट के लिए वेब ऐप मेनिफ़ेस्ट आवश्यक है?+
नहीं - केवल तभी जब आप Android और डेस्कटॉप Chrome/Edge पर PWA इंस्टॉल-टू-होम-स्क्रीन प्रॉम्प्ट चाहते हैं। favicon.ico अकेले ब्राउज़र टैब को संभालता है। जब आप बेहतर मोबाइल और डेस्कटॉप इंस्टाल अनुभव सक्षम करना चाहते हैं तो मेनिफेस्ट जोड़ें।
वेब ऐप मेनिफ़ेस्ट में कौन से आइकन आकार चलते हैं?+
न्यूनतम: 192×192 (Android लॉन्चर) और 512×512 (स्पलैश स्क्रीन और इंस्टॉल पूर्वावलोकन)। अनुकूली Android आइकन समर्थन के लिए दोनों आकारों के मास्केबल वेरिएंट जोड़ें, और यदि आप अतिरिक्त घनत्व कवरेज चाहते हैं तो 384×384 जोड़ें।
मेनिफ़ेस्ट में थीम_रंग और बैकग्राउंड_रंग के बीच क्या अंतर है?+
थीम_रंग ब्राउज़र एड्रेस बार और टूलबार का रंग सेट करता है। बैकग्राउंड_कलर आपके ऐप के पहले पेंट से पहले दिखाए गए स्प्लैश स्क्रीन बैकग्राउंड रंग को सेट करता है। सहज इंस्टॉल और लॉन्च अनुभव के लिए दोनों को अपने ब्रांड से मेल खाने के लिए सेट करें।
Chrome मेरे PWA के लिए इंस्टाल प्रॉम्प्ट क्यों नहीं दिखा रहा है?+
सबसे सामान्य कारण हैं: अनुपलब्ध या अमान्य मेनिफेस्ट, गुम 192×192 आइकन, 404 लौटाने वाले आइकन, मेनिफेस्ट सही MIME प्रकार के साथ नहीं परोसा गया, या साइट HTTPS पर नहीं परोसा जा रहा है। इंस्टालेशन विफलता का सटीक कारण देखने के लिए Chrome DevTools > एप्लिकेशन > मेनिफेस्ट का उपयोग करें।
मास्केबल आइकन क्या है और क्या मुझे इसकी आवश्यकता है?+
मास्क करने योग्य आइकन में सुरक्षित-क्षेत्र पैडिंग शामिल है ताकि Android आपके लोगो को काटे बिना गोलाकार या गोलाकार मास्क लगा सके। गैर-वर्ग अनुकूली आइकन आकृतियों का उपयोग करने वाले Android उपकरणों पर आपके होम-स्क्रीन आइकन को सही दिखने के लिए आपको एक की आवश्यकता है। इसे मेनिफेस्ट आइकन सरणी में `'purpose': 'maskable'` के साथ घोषित करें।
क्या मैं वेब ऐप मेनिफ़ेस्ट में SVG आइकन का उपयोग कर सकता हूँ?+
क्रोमियम कुछ मेनिफेस्ट आइकन संदर्भों में SVG का समर्थन करता है, लेकिन क्रॉस-ब्राउज़र इंस्टॉल यूआई के लिए PNG सार्वभौमिक रूप से सुरक्षित डिफ़ॉल्ट है। हमेशा PNG 192 और 512 प्रविष्टियाँ शामिल करें। आप बिना किसी नुकसान के उनके साथ SVG प्रविष्टि जोड़ सकते हैं।
मैं कैसे जांचूं कि मेरा वेब मेनिफेस्ट वैध है या नहीं?+
Chrome DevTools (F12) > एप्लिकेशन > मेनिफेस्ट खोलें। Chrome पार्स त्रुटियों, आइकन फ़ेच विफलताओं और एक पूर्ण इंस्टालबिलिटी चेकलिस्ट दिखाता है। किसी भी रिपोर्ट की गई समस्या को ठीक करें, फिर Chrome के एड्रेस बार से 'होम स्क्रीन में जोड़ें' विकल्प का उपयोग करके इंस्टॉल प्रॉम्प्ट का दोबारा परीक्षण करें।