PWA Icons: अपने App को Installable बनाएं
install prompt कोई design का चुनाव नहीं, एक checklist है। 192 या 512 icon चूक जाएं और browser चुपचाप install की पेशकश करने से मना कर देता है। यहां सटीक सेट है।
install prompt icons पर निर्भर है
एक browser तभी PWA install करने की पेशकश करता है जब manifest कुछ आवश्यकताओं को पूरा करता है, और icons उनमें से एक हैं। ख़ास तौर पर icons array में कम से कम एक 192x192 और एक 512x512 PNG होना चाहिए। कोई भी चूक जाए और prompt कभी नहीं चलता, बिना किसी error के जिसे user देख पाए।
192 launcher icon है। 512 splash screen और अधिक घनत्व वाले displays को फ़ीड करता है। दोनों को उन्हीं सटीक dimensions पर असली PNGs होना चाहिए, CSS से खींची गई एक image नहीं।
इसे installable बनाएं
- 1
दोनों ज़रूरी PNGs export करें
192x192 पर icon-192.png और 512x512 पर icon-512.png बनाएं। ये वही दो हैं जिन्हें install prompt जांचता है।
- 2
एक maskable वर्शन जोड़ें
एक 512x512 export करें जिसमें आपका मार्क safe zone के अंदर केंद्रित हो और चारों ओर padding हो, फिर इसे purpose: maskable के रूप में चिह्नित करें ताकि Android इसे circle, squircle या rounded square में crop कर सके।
- 3
इन सबको manifest में सूचीबद्ध करें
हर icon को manifest के icons array में उसके src, sizes, type और purpose के साथ रखें। सटीक आकार के लिए नीचे दिया कोड देखें।
- 4
manifest और apple-touch-icon को लिंक करें
अपने head में <link rel="manifest" href="/manifest.json"> और एक अलग <link rel="apple-touch-icon"> जोड़ें। iOS दूसरा वाला पढ़ता है, manifest नहीं।
- 5
prompt की जांच करें
अपनी साइट Chrome में खोलें, जांचें कि install control दिखता है, और पुष्टि करें कि browser dev tools के application panel में manifest में कोई errors नहीं हैं।
manifest का icons array
{
"name": "Your App",
"short_name": "App",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#1a1a1a",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}purpose any वाले 192 और 512 install की आवश्यकता को पूरा करते हैं। maskable entry Android को आपके मार्क को काटे बिना icon को आकार देने देती है।
maskable अलग क्यों है
Android launchers icons को device theme जिस भी आकार का इस्तेमाल करे उसमें crop करते हैं। एक सामान्य icon जो पूरे square को भरता है उसके कोने कट जाते हैं। एक maskable icon में आपका मार्क padding के साथ एक safe zone में केंद्रित होता है, ताकि launcher ज़रूरी हिस्से को छुए बिना किनारों को crop कर सके।
आप maskable के साथ-साथ एक purpose any icon भी रखते हैं। जो surfaces mask नहीं करतीं (tab, task switcher) वे any वर्शन इस्तेमाल करती हैं ताकि उसमें अतिरिक्त padding न रह जाए।
अक्सर पूछे जाने वाले सवाल
मेरा PWA install prompt क्यों नहीं दिख रहा?
icons से जुड़ा सबसे आम कारण manifest के icons array में एक 192x192 या 512x512 PNG का न होना है। दोनों ज़रूरी हैं। यह भी जांचें कि manifest लिंक और serve किया गया है, और app service worker के साथ HTTPS पर है।
एक PWA को किन icon sizes की ज़रूरत है?
install prompt के लिए manifest में एक 192x192 और एक 512x512 PNG ज़रूरी हैं। Android के लिए एक 512x512 maskable वर्शन और iOS के लिए एक 180x180 apple-touch-icon जोड़ें।
क्या मुझे एक maskable icon चाहिए?
Android के लिए, हां। इसके बिना launcher आपके full-bleed icon को crop करता है और कोने काट देता है। एक maskable icon आपके मार्क को एक safe zone के अंदर रखता है ताकि वह किसी भी आकार में बच जाए।
क्या manifest iOS home screen icon तय करता है?
नहीं। iOS Add to Home Screen के लिए manifest के icons को नज़रअंदाज़ करता है। यह apple-touch-icon link tag इस्तेमाल करता है, इसलिए आपके head में एक होना चाहिए भले ही manifest पूरा हो।