अगर आपने हाल ही में अपने Android फ़ोन पर प्रोग्रेसिव वेब ऐप्लिकेशन (पीडब्ल्यूए) इंस्टॉल किया है, तो हो सकता है कि ऐप्लिकेशन के आइकॉन का बैकग्राउंड सफ़ेद हो. Android 8.0 पेश किया गया अडैप्टिव आइकॉन, जो डिवाइस पर अलग-अलग तरह के ऐप्लिकेशन आइकॉन दिखाते हैं मॉडल. इस फ़ॉर्मैट का इस्तेमाल न करने वाले आइकॉन सफ़ेद रंग के बैकग्राउंड होते हैं.
मास्क किए जा सकने वाले आइकॉन, Chrome और Firefox के लिए एक नया आइकॉन फ़ॉर्मैट है. इसकी मदद से प्रोग्रेसिव वेब ऐप्लिकेशन में, अडैप्टिव आइकॉन इस्तेमाल किए जाते हैं. इससे आपको अपने आइकॉन कैसा दिखता है.
क्या मेरे मौजूदा आइकॉन तैयार हैं?
क्योंकि मास्क किए जा सकने वाले आइकॉन को कई तरह के आकारों पर काम करना होता है, इसलिए आपको इनकी ज़रूरत होगी कुछ पैडिंग (जगह) के साथ ओपेक इमेज, जिसे ब्राउज़र ज़रूरत के हिसाब से क्रॉप कर सकता है आकृति और आकार.
मास्केबल आइकॉन की खास बातों में स्टैंडर्ड आइकॉन शामिल है "सबसे कम सुरक्षित ज़ोन" जिनका सभी प्लैटफ़ॉर्म सम्मान करते हैं. आपके ऐप्लिकेशन के अहम हिस्से आइकॉन, जैसे कि आपका लोगो, गोल क्षेत्र के बीच में होना चाहिए जिसकी रेडियस यानी आइकॉन की चौड़ाई 40% के बराबर हो. बाहरी का 10% किनारे कुछ प्लैटफ़ॉर्म पर काटे गए हैं.
Chrome का इस्तेमाल करके, यह देखा जा सकता है कि आपके आइकॉन के कौनसे हिस्से सेफ़ ज़ोन में हैं DevTools. प्रोग्रेसिव वेब ऐप्लिकेशन खोलकर, DevTools लॉन्च करें. इसके बाद, ऐप्लिकेशन पैनल में. आइकॉन सेक्शन में जाकर, ये काम किए जा सकते हैं मास्केबल आइकॉन के लिए, कम से कम सुरक्षित जगह ही दिखाएं. यह आपके आइकॉन को ट्रिम करता है सिर्फ़ सुरक्षित जगह दिखती है. अगर आपका लोगो इस सुरक्षित जगह में दिख रहा हो, आपका आइकॉन तैयार है.
Android के अलग-अलग आकार के हिसाब से मास्क किए जा सकने वाले आइकॉन की जांच करने के लिए, टाइगर ओक्स का इस्तेमाल करें Maskable.app पर उपलब्ध है. कोई आइकॉन खोलें और Maskable.app आपको अलग-अलग आकार और साइज़ आज़माएं और अपनी टीम के साथ उसका प्रीव्यू शेयर करें.
मैं मास्क किए जा सकने वाले आइकॉन कैसे इस्तेमाल करूं?
मौजूदा आइकॉन से मास्क किए जा सकने वाले आइकॉन बनाने के लिए, Maskable.app एडिटर. अपना आइकॉन अपलोड करें, रंग और साइज़ चुनकर इमेज को एक्सपोर्ट करें.
मास्केबल आइकॉन बनाने और 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") के लिए, अगर आपको
मास्केबल आइकॉन का इस्तेमाल करें.
स्वीकार की गई
इस पेज की समीक्षा जो मेडली ने की है.