अगर आपने हाल ही में अपने Android फ़ोन पर प्रोग्रेसिव वेब ऐप्लिकेशन (PWA) इंस्टॉल किया है, तो आपको ऐप्लिकेशन के आइकॉन पर सफ़ेद बैकग्राउंड दिख सकता है. Android 8.0 में उपयोगकर्ताओं के हिसाब से पसंद के मुताबिक आइकॉन दिखाए गए हैं, जो डिवाइस मॉडल में अलग-अलग आकार में ऐप्लिकेशन के आइकॉन दिखाते हैं. जो आइकॉन इस फ़ॉर्मैट का इस्तेमाल नहीं करते उनका बैकग्राउंड सफ़ेद होता है.
मास्केबल आइकॉन, Chrome और Firefox के लिए एक नया आइकॉन फ़ॉर्मैट है. इसकी मदद से, आपका प्रोग्रेसिव वेब ऐप्लिकेशन अडैप्टिव आइकॉन इस्तेमाल कर सकता है. साथ ही, यह आपको अपने आइकॉन के लुक को बेहतर तरीके से कंट्रोल करने की सुविधा देता है.
क्या मेरे मौजूदा आइकॉन तैयार हैं?
मास्क किए जा सकने वाले आइकॉन कई तरह के आकार के साथ काम करते हों. इसलिए, आपको कुछ पैडिंग (जगह) के साथ ओपेक इमेज देनी होगी. ब्राउज़र किसी भी ब्राउज़र या प्लैटफ़ॉर्म के लिए ज़रूरी आकार और साइज़ में इमेज को क्रॉप कर सकता है.
मास्क किए जा सकने वाले आइकॉन की खास बातों में, ऐसा स्टैंडर्ड "कम से कम सेफ़ ज़ोन" शामिल होता है जिसका पालन सभी प्लैटफ़ॉर्म करते हैं. आपके आइकॉन के अहम हिस्से, जैसे कि लोगो, आइकॉन के बीच में गोल इलाके में होना चाहिए. इसकी रेडियस, आइकॉन की चौड़ाई के 40% के बराबर होनी चाहिए. बाहरी 10% का किनारा कुछ प्लैटफ़ॉर्म पर क्रॉप किया जा सकता है.
Chrome DevTools का इस्तेमाल करके, यह देखा जा सकता है कि आपके आइकॉन के कौनसे हिस्से सेफ़ ज़ोन में हैं. अपना प्रोग्रेसिव वेब ऐप्लिकेशन खोलने के बाद, DevTools को लॉन्च करें और ऐप्लिकेशन पैनल पर जाएं. आइकॉन सेक्शन में, मास्क वाले आइकॉन के लिए, सिर्फ़ कम से कम सुरक्षित जगह दिखाएं को चुना जा सकता है. इससे आपके आइकॉन में काट-छांट की जाती है, ताकि सिर्फ़ सुरक्षित जगह दिखे. अगर सुरक्षित जगह पर आपका लोगो दिख रहा है, तो इसका मतलब है कि आपका आइकॉन तैयार है.
अलग-अलग तरह के Android शेप के साथ मास्क किए जा सकने वाले आइकॉन की जांच करने के लिए, टाइगर Oakes के Maskable.app का इस्तेमाल करें. कोई आइकॉन खोलें और Maskable.app आपको अलग-अलग आकार और साइज़ आज़माने की सुविधा देता है और अपनी टीम के साथ उसकी झलक शेयर करता है.
मैं मास्केबल आइकॉन कैसे इस्तेमाल करूं?
किसी मौजूदा आइकॉन के हिसाब से मास्क किया जा सकने वाला आइकॉन बनाने के लिए, Maskable.app Editor का इस्तेमाल करें. आइकॉन अपलोड करें, रंग और साइज़ में बदलाव करें, और फिर इमेज को एक्सपोर्ट करें.
मास्क किया जा सकने वाला आइकॉन बनाने और DevTools में उसकी जांच करने के बाद, आपको नई ऐसेट पर ले जाने के लिए, वेब ऐप्लिकेशन मेनिफ़ेस्ट को अपडेट करना होगा. वेब ऐप्लिकेशन मेनिफ़ेस्ट, आपके वेब ऐप्लिकेशन के बारे में जानकारी को JSON फ़ाइल में देता है. साथ ही, इसमें icons कलेक्शन भी शामिल होता है.
purpose फ़ील्ड, ब्राउज़र को यह बताता है कि आपके आइकॉन का इस्तेमाल कैसे किया जाना चाहिए. डिफ़ॉल्ट रूप से,
आइकॉन का मकसद "any" होता है. Android में, सफ़ेद बैकग्राउंड पर इन आइकॉन का
साइज़ बदल जाता है.
{
…
"icons": [
…
{
"src": "path/to/regular_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "any"
},
{
"src": "path/to/maskable_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "maskable" // <-- New property value `"maskable"`
},
…
],
…
}
आइकॉन को मास्क करने लायक बनाने के लिए, उसकी purpose वैल्यू को "maskable" पर सेट करें. इससे पता चलेगा कि आइकॉन मास्क के साथ इसका इस्तेमाल किया जाना चाहिए. इससे सफ़ेद बैकग्राउंड हट जाता है और
आइकॉन के दिखने के तरीके पर ज़्यादा कंट्रोल मिलता है. अगर आपको दूसरे डिवाइसों पर मास्क के बिना, आपके मास्क किए जा सकने वाले आइकॉन का इस्तेमाल करना है, तो स्पेस को अलग करके, कई कामों के लिए भी जानकारी दी जा सकती है (जैसे, "any maskable").
स्वीकार हैं
इस पेज की समीक्षा जो मेडली ने की है.