نمادهای ماسک پذیر یک قالب نماد جدید است که تضمین می کند نماد PWA شما در همه دستگاه های اندرویدی عالی به نظر می رسد. در دستگاه‌های اندرویدی جدیدتر، به نمادهای PWA که از فرمت آیکون قابل ماسک پیروی نمی‌کنند، پس‌زمینه سفید داده می‌شود. هنگامی که از یک آیکون قابل ماسک استفاده می کنید، تضمین می کند که آیکون تمام فضایی را که اندروید برای آن فراهم می کند اشغال می کند.
چگونه ممیزی نماد ماسک پذیر Lighthouse شکست می خورد
فانوس دریایی صفحاتی را که پشتیبانی از نمادهای ماسک پذیر ندارند، پرچم گذاری می کند:
برای قبولی در ممیزی:
- یک مانیفست برنامه وب باید وجود داشته باشد.
- مانیفست برنامه وب باید دارای آرایه
iconsباشد. - آرایه
iconsباید شامل یک شیء با خاصیتpurposeباشد و مقدار آن ویژگیpurposeباید شاملmaskableباشد.
چگونه پشتیبانی از آیکون های ماسک پذیر را به PWA خود اضافه کنید
- از ویرایشگر Maskable.app برای تبدیل یک نماد موجود به نماد قابل ماسک استفاده کنید.
ویژگی
purposeرا به یکی ازiconsدر مانیفست برنامه وب خود اضافه کنید. مقدارpurposeرا رویmaskableتنظیم کنید. ارزش ها را ببینید.{ … "icons": [ … { "src": "path/to/maskable_icon.png", "sizes": "196x196", "type": "image/png", "purpose": "maskable" } ] … }از Chrome DevTools استفاده کنید تا تأیید کنید که نماد قابل ماسک به درستی نمایش داده می شود. ببینید آیا نمادهای فعلی من آماده هستند؟