مانیفست نماد قابل پوشاندن ندارد

نمادهای ماسک پذیر یک قالب نماد جدید است که تضمین می کند نماد PWA شما در همه دستگاه های اندرویدی عالی به نظر می رسد. در دستگاه‌های اندرویدی جدیدتر، آیکون‌های PWA که از قالب آیکون قابل ماسک پیروی نمی‌کنند، پس‌زمینه سفید داده می‌شوند. هنگامی که از یک نماد قابل ماسک استفاده می کنید، تضمین می کند که نماد تمام فضایی را که اندروید برای آن فراهم می کند اشغال می کند.

چگونه ممیزی نماد ماسک پذیر Lighthouse شکست می خورد

فانوس دریایی صفحاتی را که پشتیبانی از نمادهای ماسک پذیر ندارند، پرچم گذاری می کند:

برای قبولی در ممیزی:

• یک مانیفست برنامه وب باید وجود داشته باشد.
• مانیفست برنامه وب باید دارای آرایه icons باشد.
• آرایه icons باید شامل یک شیء با خاصیت purpose باشد و مقدار آن ویژگی purpose باید شامل maskable باشد.

چگونه پشتیبانی از آیکون های ماسک پذیر را به PWA خود اضافه کنید

1. از ویرایشگر Maskable.app برای تبدیل یک نماد موجود به نماد قابل ماسک استفاده کنید.

2. ویژگی purpose را به یکی از icons در مانیفست برنامه وب خود اضافه کنید. مقدار purpose را روی maskable تنظیم کنید. ارزش ها را ببینید.

   {
     …
     "icons": [
       …
       {
         "src": "path/to/maskable_icon.png",
         "sizes": "196x196",
         "type": "image/png",
         "purpose": "maskable"
       }
     ]
     …
   }
   

3. از Chrome DevTools استفاده کنید تا تأیید کنید که نماد قابل ماسک به درستی نمایش داده می شود. ببینید آیا نمادهای فعلی من آماده هستند؟

منابع

• کد منبع مانیفست دارای ممیزی نماد قابل ماسک نیست
• پشتیبانی از نمادهای تطبیقی ​​در PWA با نمادهای قابل ماسک
• ویرایشگر Maskable.app
• یک مانیفست برنامه وب اضافه کنید
• ویژگی icons در MDN

نمادهای ماسک پذیر یک قالب نماد جدید است که تضمین می کند نماد PWA شما در همه دستگاه های اندرویدی عالی به نظر می رسد. در دستگاه‌های اندرویدی جدیدتر، آیکون‌های PWA که از قالب آیکون قابل ماسک پیروی نمی‌کنند، پس‌زمینه سفید داده می‌شوند. هنگامی که از یک نماد قابل ماسک استفاده می کنید، تضمین می کند که نماد تمام فضایی را که اندروید برای آن فراهم می کند اشغال می کند.

چگونه ممیزی نماد ماسک پذیر Lighthouse شکست می خورد

فانوس دریایی صفحاتی را که پشتیبانی از نمادهای ماسک پذیر ندارند، پرچم گذاری می کند:

برای قبولی در ممیزی:

• یک مانیفست برنامه وب باید وجود داشته باشد.
• مانیفست برنامه وب باید دارای آرایه icons باشد.
• آرایه icons باید شامل یک شیء با خاصیت purpose باشد و مقدار آن ویژگی purpose باید شامل maskable باشد.

چگونه پشتیبانی از آیکون های ماسک پذیر را به PWA خود اضافه کنید

1. از ویرایشگر Maskable.app برای تبدیل یک نماد موجود به نماد قابل ماسک استفاده کنید.

2. ویژگی purpose را به یکی از icons در مانیفست برنامه وب خود اضافه کنید. مقدار purpose را روی maskable تنظیم کنید. ارزش ها را ببینید.

   {
     …
     "icons": [
       …
       {
         "src": "path/to/maskable_icon.png",
         "sizes": "196x196",
         "type": "image/png",
         "purpose": "maskable"
       }
     ]
     …
   }
   

3. از Chrome DevTools استفاده کنید تا تأیید کنید که نماد قابل ماسک به درستی نمایش داده می شود. ببینید آیا نمادهای فعلی من آماده هستند؟

منابع

• کد منبع مانیفست دارای ممیزی نماد قابل ماسک نیست
• پشتیبانی از نمادهای تطبیقی ​​در PWA با نمادهای قابل ماسک
• ویرایشگر Maskable.app
• یک مانیفست برنامه وب اضافه کنید
• ویژگی icons در MDN