ম্যানিফেস্টের একটি মাস্কযোগ্য আইকন নেই৷

মাস্কেবল আইকন হল একটি নতুন আইকন ফর্ম্যাট যা নিশ্চিত করে যে আপনার PWA আইকনটি সমস্ত Android ডিভাইসে দুর্দান্ত দেখাচ্ছে৷ নতুন অ্যান্ড্রয়েড ডিভাইসগুলিতে, PWA আইকনগুলি যেগুলি মাস্কযোগ্য আইকন ফর্ম্যাট অনুসরণ করে না তাদের একটি সাদা পটভূমি দেওয়া হয়। আপনি যখন একটি মাস্কযোগ্য আইকন ব্যবহার করেন, তখন এটি নিশ্চিত করে যে আইকনটি Android এর জন্য যে সমস্ত স্থান প্রদান করে তার সমস্ত জায়গা নেয়৷

কীভাবে লাইটহাউস মাস্কেবল আইকন অডিট ব্যর্থ হয়

বাতিঘর পতাকা পৃষ্ঠাগুলিতে মাস্কযোগ্য আইকন সমর্থন নেই:

লাইটহাউস রিপোর্ট UI-তে মুখোশযোগ্য আইকন নিরীক্ষা।

অডিট পাস করার জন্য:

  • একটি ওয়েব অ্যাপ ম্যানিফেস্ট থাকা আবশ্যক৷
  • ওয়েব অ্যাপ ম্যানিফেস্টে অবশ্যই একটি icons অ্যারে থাকতে হবে৷
  • icons অ্যারেতে একটি purpose সম্পত্তি সহ একটি বস্তু থাকতে হবে এবং সেই purpose সম্পত্তির মান অবশ্যই maskable অন্তর্ভুক্ত করতে হবে।

কিভাবে আপনার PWA এ মাস্কেবল আইকন সমর্থন যোগ করবেন

  1. একটি বিদ্যমান আইকনকে একটি মাস্কেবল আইকনে রূপান্তর করতে Maskable.app এডিটর ব্যবহার করুন।

  2. আপনার ওয়েব অ্যাপ ম্যানিফেস্টের icons অবজেক্টগুলির একটিতে purpose সম্পত্তি যোগ করুন। purpose মান maskable সেট করুন। মান দেখুন।

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

  3. মাস্কযোগ্য আইকনটি সঠিকভাবে প্রদর্শিত হচ্ছে কিনা তা যাচাই করতে Chrome DevTools ব্যবহার করুন। দেখুন আমার বর্তমান আইকন প্রস্তুত?

সম্পদ