मास्केबल आइकॉन, आइकॉन का एक नया फ़ॉर्मैट है. इससे यह पक्का होता है कि आपका PWA आइकॉन, सभी Android डिवाइसों पर शानदार दिखे. नए Android डिवाइसों पर, PWA आइकॉन जिन पर मास्क किए जा सकने वाले आइकॉन फ़ॉर्मैट का इस्तेमाल नहीं किया गया है उन्हें सफ़ेद बैकग्राउंड दिया जाता है. मास्क किए जा सकने वाले आइकॉन का इस्तेमाल करने पर, आइकॉन पक्का करता है कि यह आइकॉन उस पूरे स्पेस का इस्तेमाल कर लेगा जो Android के लिए उपलब्ध है.
लाइटहाउस मास्क वाला आइकॉन ऑडिट कैसे काम नहीं करता
Lighthouse उन पेजों को फ़्लैग करता है जिनमें मास्क किए जा सकने वाले आइकॉन मौजूद नहीं होते:
ऑडिट में पास करने के लिए:
- वेब ऐप्लिकेशन मेनिफ़ेस्ट मौजूद होना चाहिए.
- वेब ऐप्लिकेशन मेनिफ़ेस्ट में
icons
कलेक्शन होना ज़रूरी है. icons
कलेक्शन में,purpose
प्रॉपर्टी वाला एक ऑब्जेक्ट होना चाहिए. साथ ही, उसpurpose
प्रॉपर्टी की वैल्यू मेंmaskable
शामिल होना चाहिए.
अपने PWA में, मास्केबल आइकॉन से जुड़ी सहायता जोड़ने का तरीका
- मौजूदा आइकॉन को मास्केबल आइकॉन में बदलने के लिए, Maskable.app Editor का इस्तेमाल करें.
अपने वेब ऐप्लिकेशन मेनिफ़ेस्ट के किसी
icons
ऑब्जेक्ट मेंpurpose
प्रॉपर्टी जोड़ें.purpose
की वैल्यू कोmaskable
पर सेट करें. वैल्यू देखें.{ … "icons": [ … { "src": "path/to/maskable_icon.png", "sizes": "196x196", "type": "image/png", "purpose": "maskable" } ] … }
Chrome DevTools का इस्तेमाल करके पुष्टि करें कि मास्क किया जा सकने वाला आइकॉन सही तरीके से दिख रहा है या नहीं. देखें कि क्या मेरे मौजूदा आइकॉन तैयार हैं?