Manifest.json के लाभ
Apple, Google और Microsoft लगातार Web App Manifest पर टिके हुए हैं। इसे एक बार भरें और आपके icons, theme color और analytics हर जगह अपनी जगह पा लेते हैं।
manifest आपको क्या देता है
| लाभ | आपको क्या मिलता है |
|---|---|
| install prompts जो native लगते हैं | Chrome, Edge और Android “Install app” banners तभी दिखाते हैं जब आपका manifest icons, name, start_url और display mode घोषित करता है। |
| offline-ready splash screens | manifest आपको splash images, background colors और maskable icons पर नियंत्रण देता है ताकि offline launch जानबूझकर किया गया दिखे। |
| हर जगह consistent metadata | जब search engines या social platforms आपके manifest का निरीक्षण करते हैं तो वे वही title, theme color और icons उठाते हैं जिन्हें आपने curate किया था। |
एक आधुनिक manifest की संरचना
ये वे fields हैं जिन्हें Lighthouse और Android आपका icon दिखाने से पहले वास्तव में निरीक्षण करते हैं।
| Field | यह क्यों मौजूद है | Pro tip |
|---|---|---|
| name & short_name | install banner और launcher label text को नियंत्रित करता है। | short_name को 12 characters से कम रखें ताकि यह Android होम स्क्रीन पर truncate न हो। |
| icons[] | परिभाषित करता है कि कौन से PNGs install surfaces, splash screens और maskable logos को शक्ति देते हैं। | सबसे अच्छे coverage के लिए purpose: "any maskable" के साथ 192, 256, 384 और 512 sizes शामिल करें। |
| start_url | निर्धारित करता है कि जब कोई user अपने dock से launch करता है तो कौन सा route खुलता है। | ?source=pwa जोड़ें और analytics को अनुकूलित करने के लिए इसे server side पढ़ें। |
| display | standalone, fullscreen या minimal-ui अनुभवों के बीच स्विच करें। | अपने brand chrome से मेल खाने के लिए standalone के साथ theme_color का उपयोग करें। |
manifest icons कहाँ से शुरू होते हैं
Starter JSON
{
"name": "Favicon Tools",
"short_name": "Favicons",
"start_url": "/?source=pwa",
"display": "standalone",
"scope": "/",
"background_color": "#0f172a",
"theme_color": "#312e81",
"icons": [
{ "src": "/android-icon-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
{ "src": "/android-icon-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
]
}इस file को /public/manifest.json में डालें और Favicon Tools के भीतर का generator जब भी आप एक नया set export करेंगे, icon array को अद्यतित रखेगा।
Release चेकलिस्ट
इसे अपने deployment dashboard पर चिपकाए रखें ताकि rebrands के बाद manifest सटीक बना रहे।
- 1
manifest को serve और link करें
manifest को /manifest.json पर serve करें और इसे <link rel="manifest" href="/manifest.json"> के माध्यम से expose करें।
- 2
जाँचें कि हर icon resolve होता है
सुनिश्चित करें कि reference किया गया हर icon वास्तव में आपकी CDN पर मौजूद है और घोषित size से मेल खाता है।
- 3
browser chrome को align करें
browser chrome को अपने icon palette से align करने के लिए theme-color और background_color meta tags जोड़ें।
- 4
release से पहले lint और audit करें
manifest के गायब fields पकड़ने के लिए हर release से पहले npx next lint के साथ Lighthouse का PWA audit चलाएँ।
- 5
installed app का scope तय करें
manifest scope को अपने primary app URL की ओर इंगित करें ताकि installable shortcuts आपके domain के अंदर रहें।
अपडेट को automate करें
अपने manifest template को अपने icon configuration के बगल में स्टोर करें। जब CI एक नया favicon set बनाए, JSON अपडेट करें और साथ में redeploy करें।
एक native app की तरह test करें
अपनी site को iOS, Android और desktop Chrome पर इंस्टॉल करें। सत्यापित करें कि splash screen, icon mask और theme color manifest values से मेल खाते हैं।
QA टीमें एक सरल चेकलिस्ट पसंद करती हैं: install करें, offline launch करें, icon quality का निरीक्षण करें, analytics parameter verify करें।