मेनिफ़ेस्ट में ऐसा कोई आइकॉन नहीं है जिसे मास्क किया जा सके

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

लाइटहाउस मास्क वाला आइकॉन ऑडिट कैसे काम नहीं करता

Lighthouse उन पेजों को फ़्लैग करता है जिनमें मास्क किए जा सकने वाले आइकॉन मौजूद नहीं होते:

लाइटहाउस रिपोर्ट के यूज़र इंटरफ़ेस (यूआई) में, मास्क किए जा सकने वाले आइकॉन का ऑडिट.

ऑडिट में पास करने के लिए:

  • वेब ऐप्लिकेशन मेनिफ़ेस्ट मौजूद होना चाहिए.
  • वेब ऐप्लिकेशन मेनिफ़ेस्ट में icons कलेक्शन होना ज़रूरी है.
  • icons कलेक्शन में, purpose प्रॉपर्टी वाला एक ऑब्जेक्ट होना चाहिए. साथ ही, उस purpose प्रॉपर्टी की वैल्यू में maskable शामिल होना चाहिए.

अपने PWA में, मास्केबल आइकॉन से जुड़ी सहायता जोड़ने का तरीका

  1. मौजूदा आइकॉन को मास्केबल आइकॉन में बदलने के लिए, Maskable.app Editor का इस्तेमाल करें.

  2. अपने वेब ऐप्लिकेशन मेनिफ़ेस्ट के किसी icons ऑब्जेक्ट में purpose प्रॉपर्टी जोड़ें. purpose की वैल्यू को maskable पर सेट करें. वैल्यू देखें.

    {
  …
  "icons": [
    …
    {
      "src": "path/to/maskable_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
  …
}

  3. Chrome DevTools का इस्तेमाल करके पुष्टि करें कि मास्क किया जा सकने वाला आइकॉन सही तरीके से दिख रहा है या नहीं. देखें कि क्या मेरे मौजूदा आइकॉन तैयार हैं?

रिसॉर्स