Maskable Icon: Safe Zones और purpose Field
Maskable icon एक PWA आइकन है जिसे इस तरह बनाया जाता है कि वह अपने पूरे चौकोर को भर दे, ताकि platform उसे जिस भी आकार का इस्तेमाल करती हो (गोला, squircle, गोल चौकोर) उसमें कुछ भी महत्वपूर्ण काटे बिना crop कर सके। आप logo को लगभग भीतरी 80 प्रतिशत के एक safe zone के अंदर रखते हैं — एक केंद्रित गोला जिसका व्यास आइकन की चौड़ाई का 80 प्रतिशत हो — और background को चारों किनारों तक बहने देते हैं। आप इसे web app manifest में "purpose": "maskable" से घोषित करते हैं।
यह किस समस्या को हल करता है
Android launchers हर app आइकन पर एक आकार का mask लगाते हैं ताकि home screen एक-सी दिखे, और आकार device तथा launcher के हिसाब से बदलता है: एक पर गोला, दूसरे पर squircle, तीसरे पर गोल चौकोर। उस सिस्टम को दिया गया एक सामान्य web आइकन एक सफ़ेद गोल डिब्बे में सिकुड़ जाता है, या इससे भी बुरा, logo के आर-पार cut हो जाता है।
Maskable icon उस crop के लिए बनाया जाता है। Artwork हर किनारे तक फैलता है, और सार्थक सामग्री काफ़ी भीतर बैठती है, इसलिए उनमें से कोई भी mask background पर पड़ता है, mark पर नहीं। यह Android के adaptive icons जैसा ही विचार है, जिसे एक image और एक घोषणा के रूप में व्यक्त किया जाता है।
एक घोषित करना
"icons": [
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
{
"src": "/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]दोनों भेजें। डिफ़ॉल्ट-purpose आइकन वहाँ इस्तेमाल होता है जहाँ platform crop नहीं करती; maskable वहाँ इस्तेमाल होता है जहाँ करती है।
आइकन size के अनुसार safe zone
| आइकन size | Safe-zone व्यास (80%) | प्रति किनारा खाली margin |
|---|---|---|
| 192x192 | 154px | 19px |
| 384x384 | 307px | 38px |
| 512x512 | 410px | 51px |
Maskable icon FAQ
क्या मैं अपने मौजूदा आइकन में बस padding जोड़ सकता हूँ?
यह काम का ज़्यादातर हिस्सा है, पर padding transparency के बजाय भरा हुआ background होना चाहिए। एक transparent margin launcher को crop करने के लिए कुछ नहीं देता और आपके पास एक सादे सफ़ेद टाइल पर एक छोटा logo रह जाता है।
मैं कैसे जाँचूँ कि safe zone सही है?
आइकन की चौड़ाई के 80 प्रतिशत पर एक केंद्रित गोला overlay करें और पुष्टि करें कि जिसकी आप परवाह करते हैं वह उसे पार न करे, फिर PWA को Android device पर इंस्टॉल करें और launcher देखें। Chromium DevTools भी Application panel के तहत manifest icons का preview देता है।
क्या iOS maskable icons इस्तेमाल करता है?
नहीं। iOS Home Screen आइकन apple-touch-icon link से लेता है और अपना तयशुदा rounded-corner mask लगाता है, इसलिए maskable purpose का वहाँ कोई असर नहीं होता।