manifest.json क्या है?
web application manifests पर एक सरल गाइड और वे progressive web apps को कैसे शक्ति देते हैं।
Manifest को समझना
W3C Web Application Manifest specification में परिभाषित एक web application manifest एक JSON टेक्स्ट फ़ाइल है जो किसी web application के बारे में जानकारी देती है।
web application manifest का सबसे आम उपयोग वह जानकारी देना है जो browser को किसी डिवाइस पर progressive web app (PWA) इंस्टॉल करने के लिए चाहिए, जैसे app का नाम और आइकन।
एक web application manifest में एक ही JSON object होता है जिसकी top-level keys को members कहा जाता है।
manifest.json क्यों मायने रखता है
| लाभ | यह क्या करता है |
|---|---|
| PWA इंस्टॉलेशन | Manifest browsers को उपयोगकर्ताओं से आपके web app को उनके डिवाइस पर इंस्टॉल करने का अनुरोध करने में सक्षम बनाता है, जिससे यह एक native application जैसा लगता है। |
| आइकन रेफ़रेंस | Manifest browsers को बताता है कि अलग-अलग संदर्भों के लिए कौन-सी आइकन फ़ाइलें इस्तेमाल करनी हैं: होम स्क्रीन, splash screens और app launchers। |
| App मेटाडेटा | यह आपके app के नाम, theme colors, display mode और start URL जैसी आवश्यक जानकारी देता है ताकि अनुभव सुसंगत रहे। |
आइकन की चुनौती
एक संपूर्ण manifest.json बनाने के लिए कई आकारों में आइकन जेनरेट और रेफ़र करना पड़ता है। हर आकार अलग-अलग प्लेटफ़ॉर्मों और संदर्भों में एक विशिष्ट उद्देश्य पूरा करता है।
हर आकार किसलिए है
| आकार | उद्देश्य |
|---|---|
| 192x192 | मानक Android होम स्क्रीन आइकन |
| 512x512 | उच्च-रिज़ॉल्यूशन splash screens और Android |
| 96x96 | Desktop शॉर्टकट और Google TV |
| 32x32 | Browser tabs और bookmarks |
| 16x16 | Address bar और लेगेसी browser समर्थन |
वही आकार, असली स्केल में
Favicon Tools कैसे मदद करता है
सभी आवश्यक आइकन आकारों को मैनुअल रूप से बनाना और एक manifest.json फ़ाइल बनाए रखना समय लेने वाला और त्रुटि-प्रवण हो सकता है। Favicon Tools इस प्रक्रिया को स्वचालित करता है।
जब आप अपने favicons जेनरेट करने के लिए Favicon Tools इस्तेमाल करते हैं, तो हम स्वतः एक संपूर्ण manifest.json लिखते हैं जो आपको ज़रूरी सभी आइकन आकारों को रेफ़र करता है:
जेनरेट किया गया manifest क्या कवर करता है
| आइकन समूह | आकार | यह क्या कवर करता है |
|---|---|---|
| Android आइकन | 192x192, 512x512 | होम स्क्रीन शॉर्टकट और splash screens |
| मानक favicons | 16x16, 32x32, 96x96 | Browser tabs और bookmarks |
| Apple touch icons | सभी आवश्यक आकार | iOS डिवाइस |
| Windows tiles | Tile आकार | Microsoft स्टार्ट मेन्यू एकीकरण |
उदाहरण manifest.json
{
"name": "Favicon Tools",
"short_name": "Favicons",
"start_url": "/",
"display": "standalone",
"scope": "/",
"background_color": "#ffffff",
"theme_color": "#ffffff",
"icons": [
{
"src": "/android-icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/favicon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "/favicon-32x32.png",
"sizes": "32x32",
"type": "image/png"
},
{
"src": "/favicon-16x16.png",
"sizes": "16x16",
"type": "image/png"
}
]
}इस manifest में PWA इंस्टॉलेशन और अलग-अलग प्लेटफ़ॉर्मों पर सही प्रदर्शन के लिए ज़रूरी सभी आवश्यक आइकन रेफ़रेंस शामिल हैं। Favicon Tools इसे सभी रेफ़र की गई आइकन फ़ाइलों के साथ स्वतः जेनरेट करता है।
वन-क्लिक जनरेशन
अपनी स्रोत image एक बार अपलोड करें, और Favicon Tools आपको ज़रूरी हर आइकन आकार के साथ एक संपूर्ण manifest.json फ़ाइल जेनरेट करता है, सब कुछ एक ही डाउनलोड करने योग्य पैकेज में।
images को मैनुअल रूप से रीसाइज़ करने, कई फ़ाइलें बनाने या हाथ से JSON लिखने की ज़रूरत नहीं। सब कुछ आपके प्रोजेक्ट में डालने के लिए तैयार है।
हमेशा अद्यतित
जब आप किसी rebrand या डिज़ाइन अपडेट के बाद अपने favicons को फिर से जेनरेट करते हैं, तो manifest.json सही आइकन रेफ़रेंस के साथ अपडेट हो जाता है।
यह आपके manifest को आपकी असली आइकन फ़ाइलों से बेमेल होने से रोकता है, जो टूटे रेफ़रेंस और अनुपस्थित आइकनों को पैदा करता है।