نمادهای ماسک پذیر یک قالب نماد جدید است که تضمین می کند نماد 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 استفاده کنید تا تأیید کنید که نماد قابل ماسک به درستی نمایش داده می شود. ببینید آیا نمادهای فعلی من آماده هستند؟
منابع
- کد منبع مانیفست دارای ممیزی نماد قابل ماسک نیست
- پشتیبانی از نمادهای تطبیقی در PWA با نمادهای قابل ماسک
- ویرایشگر Maskable.app
- یک مانیفست برنامه وب اضافه کنید
- ویژگی
icons
در MDN
نمادهای ماسک پذیر یک قالب نماد جدید است که تضمین می کند نماد 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 استفاده کنید تا تأیید کنید که نماد قابل ماسک به درستی نمایش داده می شود. ببینید آیا نمادهای فعلی من آماده هستند؟