मास्क किए जा सकने वाले आइकॉन, आइकॉन का एक नया फ़ॉर्मैट है. इससे यह पक्का होता है कि आपका PWA आइकॉन, सभी Android डिवाइसों पर बेहतरीन दिखे. नए Android डिवाइसों पर, मास्क किए जा सकने वाले आइकॉन फ़ॉर्मैट का पालन न करने वाले PWA आइकॉन को सफ़ेद बैकग्राउंड दिया जाता है. मास्केबल आइकॉन का इस्तेमाल करने पर, यह पक्का किया जाता है कि आइकॉन, Android के लिए तय किए गए पूरे स्पेस को भर दे.
मास्क किए जा सकने वाले आइकॉन के लिए Lighthouse का ऑडिट पूरा न होने की वजह
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 का इस्तेमाल करके पुष्टि करें कि मास्क किया जा सकने वाला आइकॉन सही तरीके से दिख रहा है या नहीं. क्या मेरे मौजूदा आइकॉन तैयार हैं? लेख पढ़ें