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

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

लाइटहाउस मास्केबल आइकॉन का ऑडिट कैसे नहीं किया जा सका

लाइटहाउस उन पेजों को फ़्लैग करता है जिनमें मास्केबल आइकॉन की सुविधा नहीं है:

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

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

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

अपने पीडब्ल्यूए में मास्केबल आइकॉन जोड़ने का तरीका

  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 का इस्तेमाल करके, पुष्टि करें कि मास्क किया जा सकने वाला आइकॉन ठीक से दिख रहा है. क्या मेरे मौजूदा आइकॉन तैयार हैं? देखें

संसाधन