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

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

Android पर, सफ़ेद रंग के गोलों में PWA के आइकॉन
Android डिवाइस पर, पारदर्शी PWA आइकॉन सफ़ेद गोले के अंदर दिखते हैं.

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

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

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

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

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

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

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

DevTools में ऐप्लिकेशन पैनल, जिसमें काटे गए किनारों के साथ PWA आइकॉन दिख रहे हैं
ऐप्लिकेशन पैनल, जिसमें काटे गए PWA आइकॉन दिख रहे हैं.

Android के अलग-अलग आकार के हिसाब से मास्क किए जा सकने वाले आइकॉन की जांच करने के लिए, टाइगर ओक्स का इस्तेमाल करें Maskable.app पर उपलब्ध है. कोई आइकॉन खोलें और 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") के लिए, अगर आपको मास्केबल आइकॉन का इस्तेमाल करें.

स्वीकार की गई

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