Web app manifest गाइड: एक असली manifest.json, field दर field
web app manifest एक छोटी JSON file है जो OS को बताती है कि आपकी site कैसे install करें: उसका नाम, उसके icons, और उसके रंग। यहाँ एक असली है, field दर field।
manifest किसलिए है
manifest वही है जो एक website को ऐसी चीज़ में बदलता है जिसे OS install कर सके। जब कोई उपयोगकर्ता आपकी site को home screen पर जोड़ता है, तो browser manifest पढ़कर तय करता है icon, उसके नीचे का नाम, splash screen, और app browser chrome के साथ खुलता है या बिना।
यह सादा JSON है। आपको एक file चाहिए, हर page से लिंक की हुई, साथ में वे icon PNGs जिनकी ओर यह इशारा करती है। नीचे का हर field किसी ऐसी चीज़ से मेल खाता है जो उपयोगकर्ता देखता है।
जो fields मायने रखते हैं
| Field | यह क्या नियंत्रित करता है |
|---|---|
| name | पूरा app नाम, install prompt और splash screen पर दिखाया गया |
| short_name | home-screen icon के नीचे का नाम, जहाँ जगह कम है |
| icons | icon सेट। 192 और 512 PNGs शामिल करें, साथ में Android आकृतियों के लिए एक maskable के रूप में चिह्नित |
| theme_color | app के चारों ओर OS UI का रंग, जैसे status bar |
| background_color | app के load होते समय दिखने वाली splash-screen पृष्ठभूमि |
| display | app कैसे खुलता है। standalone browser chrome छिपाता है ताकि यह native लगे |
| start_url | home screen से launch होने पर app जिस page पर खुलता है |
एक पूरा manifest.json
{
"name": "Acme Dashboard",
"short_name": "Acme",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"theme_color": "#0b0b0f",
"background_color": "#0b0b0f",
"display": "standalone",
"start_url": "/"
}दो मानक icons और एक maskable, ताकि Android आपके logo को काटे बिना किसी भी launcher आकृति में crop कर सके।
इसे अपने pages से जोड़ें
<link rel="manifest" href="/manifest.json">इसे हर page के <head> में रखें। link tag के बिना, file तो मौजूद है पर कुछ भी उसे नहीं पढ़ता।
आम सवाल
web app manifest क्या है?
एक छोटी JSON file जो browser और OS को बताती है कि आपकी site कैसे install करें: उसका नाम, icons, रंग, और उसे कैसे खुलना चाहिए। यही एक page को home screen पर install करने योग्य बनाता है।
theme_color और background_color में क्या अंतर है?
theme_color app के चारों ओर OS UI को रंगता है, जैसे status bar। background_color app के load होते समय दिखने वाली splash screen को भरता है। ये अक्सर एक ही मान होते हैं, पर अलग-अलग सतहों को नियंत्रित करते हैं।
मैं manifest.json कहाँ रखूँ?
इसे एक स्थिर path से परोसें जैसे आपकी site की जड़, फिर इसे <link rel="manifest" href="/manifest.json"> से संदर्भित करें। यह जिन icons को सूचीबद्ध करता है वे src fields के paths से resolve होने चाहिए।
क्या मुझे एक सामान्य website के लिए manifest चाहिए?
केवल तभी अगर आप install prompts और home-screen icons चाहते हैं। एक सादी सूचनात्मक site बिना इसके ठीक चलती है, पर कोई भी site जिसे उपयोगकर्ता फ़ोन पर सहेज सकते हैं इससे लाभ पाती है।