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

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

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

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

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

منابع