मास्केबल आइकॉन के साथ, PWA में अडैप्टिव आइकॉन की सुविधा

ऐप्लिकेशन के आइकॉन, जो प्लैटफ़ॉर्म के मुताबिक होते हैं.

थॉमस स्टेनर

टाइगर ओक्स

मास्क किए जा सकने वाले आइकॉन क्या होते हैं?

अगर आपने हाल ही के Android फ़ोन में प्रोग्रेसिव वेब ऐप्लिकेशन इंस्टॉल किया है, तो आपको आइकॉन सफ़ेद बैकग्राउंड के साथ दिख सकता है. Android Oreo ने अडैप्टिव आइकॉन पेश किए, जो डिवाइस के अलग-अलग मॉडल में अलग-अलग आकार में ऐप्लिकेशन आइकॉन दिखाते हैं. जो आइकॉन इस नए फ़ॉर्मैट को नहीं फ़ॉलो करते उन्हें व्हाइट बैकग्राउंड दिया जाता है.

पारदर्शी PWA आइकॉन, Android पर सफ़ेद घेरे के अंदर दिखते हैं.

मास्क किए जा सकने वाले आइकॉन, आइकॉन का नया फ़ॉर्मैट है. इससे आपको ज़्यादा कंट्रोल मिलता है और आपका प्रोग्रेसिव वेब ऐप्लिकेशन, स्क्रीन के हिसाब से आइकॉन इस्तेमाल करता है. अगर मास्क किया जा सकने वाला आइकॉन दिया जाता है, तो आपका आइकॉन पूरे आकार को भर सकता है. साथ ही, यह सभी Android डिवाइसों पर बेहतरीन दिखता है. Firefox और Chrome ने हाल ही में इस नए फ़ॉर्मैट के लिए सहायता जोड़ी है और आप इसे अपने ऐप्लिकेशन में अपना सकते हैं.

मास्केबल आइकॉन, पूरी सर्कल को कवर करते हैं.

क्या मेरे मौजूदा आइकॉन तैयार हैं?

मास्क किए जा सकने वाले आइकॉन कई तरह के आकारों के साथ काम करते हों, इसलिए आपको कुछ पैडिंग (जगह) के साथ ओपेक इमेज देनी होती है. इस इमेज को ब्राउज़र ज़रूरी आकार और साइज़ में क्रॉप कर सकता है. किसी खास आकार पर भरोसा न करना सबसे अच्छा है, क्योंकि अंतिम आकार ब्राउज़र और प्लैटफ़ॉर्म के अनुसार अलग-अलग होता है.

प्लैटफ़ॉर्म के हिसाब से अलग-अलग आकार.

अच्छी बात यह है कि सभी प्लैटफ़ॉर्म पर, एक ऐसा "कम से कम सुरक्षित ज़ोन" है जो अच्छी तरह से तय और मानक तरीके से बनाया गया है. आपके आइकॉन के अहम हिस्से, जैसे कि लोगो. आइकॉन के बीच में गोल इलाके में, आइकॉन की चौड़ाई के 40% के बराबर होनी चाहिए. बाहरी 10% किनारे को काटा जा सकता है.

Chrome DevTools की मदद से यह देखा जा सकता है कि आपके आइकॉन के कौनसे हिस्से, सेफ़ ज़ोन में हैं. आपका प्रोग्रेसिव वेब ऐप्लिकेशन खुले होने पर, DevTools लॉन्च करें और ऐप्लिकेशन पैनल पर जाएं. आइकॉन सेक्शन में, मास्क वाले आइकॉन के लिए, सिर्फ़ कम से कम सुरक्षित जगह दिखाएं को चुना जा सकता है. आपके आइकॉन में काट-छांट की जाएगी, ताकि सिर्फ़ सुरक्षित जगह दिखे. अगर आपका लोगो इस सुरक्षित जगह पर दिख रहा है, तो इसका इस्तेमाल किया जा सकता है.

ऐप्लिकेशन पैनल.

Android के अलग-अलग आकार के साथ मास्क किए जा सकने वाले आइकॉन की जांच करने के लिए, Maskable.app टूल का इस्तेमाल करें. एक आइकॉन खोलें, फिर Maskable.app आपको अलग-अलग आकार और आकार आज़माने की सुविधा देगा. साथ ही, आप इस झलक को अपनी टीम के दूसरे लोगों के साथ शेयर कर सकते हैं.

मैं मास्केबल आइकॉन कैसे इस्तेमाल करूं?

अगर आपको किसी मौजूदा आइकॉन के आधार पर मास्क वाला आइकॉन बनाना है, तो Maskable.app Editor का इस्तेमाल करें. अपना आइकॉन अपलोड करें, रंग और साइज़ में बदलाव करें, फिर इमेज एक्सपोर्ट करें.

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").

ध्यान दें: स्पेस से अलग किए गए एक से ज़्यादा मकसद बता सकते हैं, जैसे कि "any maskable". हालांकि, आम तौर पर ऐसा नहीं करना चाहिए. "any" आइकॉन के तौर पर "maskable" आइकॉन का इस्तेमाल करना सही नहीं होता, क्योंकि इस आइकॉन का इस्तेमाल उसी तरह किया जाता है जिसकी वजह से, मुख्य आइकॉन का कॉन्टेंट बहुत छोटा हो जाता है. आम तौर पर, "any" के लिए आइकॉन में पारदर्शी इलाके होने चाहिए. साथ ही, इनमें अलग से पैडिंग (जगह) नहीं होनी चाहिए, जैसे कि आपकी साइट के फ़ेविकॉन लोगो. ऐसा इसलिए, क्योंकि ब्राउज़र उनके लिए यह एलिमेंट नहीं जोड़ सकता.

इसे इस्तेमाल करके, मास्क किए जा सकने वाले आइकॉन बनाए जा सकते हैं. इनसे यह पक्का किया जा सकता है कि आपका ऐप्लिकेशन कभी भी शानदार दिखे. हालांकि, इस ऐप्लिकेशन की खासियत है: सर्कल-टू-सर्कल, ओवल-टू-ओवल आंकड़ा.

स्वीकार हैं

इस लेख की समीक्षा जो मेडली ने की है.