মাস্কেবল আইকন হল একটি নতুন আইকন ফর্ম্যাট যা নিশ্চিত করে যে আপনার PWA আইকনটি সমস্ত Android ডিভাইসে দুর্দান্ত দেখাচ্ছে৷ নতুন অ্যান্ড্রয়েড ডিভাইসগুলিতে, PWA আইকনগুলি যেগুলি মাস্কযোগ্য আইকন ফর্ম্যাট অনুসরণ করে না তাদের একটি সাদা পটভূমি দেওয়া হয়। আপনি যখন একটি মাস্কযোগ্য আইকন ব্যবহার করেন, তখন এটি নিশ্চিত করে যে আইকনটি Android এর জন্য যে সমস্ত স্থান প্রদান করে তার সমস্ত জায়গা নেয়৷
কীভাবে লাইটহাউস মাস্কেবল আইকন অডিট ব্যর্থ হয়
বাতিঘর পতাকা পৃষ্ঠাগুলিতে মাস্কযোগ্য আইকন সমর্থন নেই:
অডিট পাস করার জন্য:
- একটি ওয়েব অ্যাপ ম্যানিফেস্ট থাকা আবশ্যক৷
- ওয়েব অ্যাপ ম্যানিফেস্টে অবশ্যই একটি
icons
অ্যারে থাকতে হবে৷ -
icons
অ্যারেতে একটিpurpose
সম্পত্তি সহ একটি বস্তু থাকতে হবে এবং সেইpurpose
সম্পত্তির মান অবশ্যইmaskable
অন্তর্ভুক্ত করতে হবে।
কিভাবে আপনার PWA এ মাস্কেবল আইকন সমর্থন যোগ করবেন
- একটি বিদ্যমান আইকনকে একটি মাস্কেবল আইকনে রূপান্তর করতে Maskable.app এডিটর ব্যবহার করুন।
আপনার ওয়েব অ্যাপ ম্যানিফেস্টের
icons
অবজেক্টগুলির একটিতেpurpose
সম্পত্তি যোগ করুন।purpose
মানmaskable
সেট করুন। মান দেখুন।{ … "icons": [ … { "src": "path/to/maskable_icon.png", "sizes": "196x196", "type": "image/png", "purpose": "maskable" } ] … }
মাস্কযোগ্য আইকনটি সঠিকভাবে প্রদর্শিত হচ্ছে কিনা তা যাচাই করতে Chrome DevTools ব্যবহার করুন। দেখুন আমার বর্তমান আইকন প্রস্তুত?
সম্পদ
- ম্যানিফেস্টের সোর্স কোডে মাস্কযোগ্য আইকন অডিট নেই
- মাস্কেবল আইকন সহ PWA-তে অভিযোজিত আইকন সমর্থন
- Maskable.app সম্পাদক
- একটি ওয়েব অ্যাপ ম্যানিফেস্ট যোগ করুন
- MDN-এ
icons
বৈশিষ্ট্য
মাস্কেবল আইকন হল একটি নতুন আইকন ফর্ম্যাট যা নিশ্চিত করে যে আপনার PWA আইকনটি সমস্ত Android ডিভাইসে দুর্দান্ত দেখাচ্ছে৷ নতুন অ্যান্ড্রয়েড ডিভাইসগুলিতে, PWA আইকনগুলি যেগুলি মাস্কযোগ্য আইকন ফর্ম্যাট অনুসরণ করে না তাদের একটি সাদা পটভূমি দেওয়া হয়। আপনি যখন একটি মাস্কযোগ্য আইকন ব্যবহার করেন, তখন এটি নিশ্চিত করে যে আইকনটি Android এর জন্য যে সমস্ত স্থান প্রদান করে তার সমস্ত জায়গা নেয়৷
কীভাবে লাইটহাউস মাস্কেবল আইকন অডিট ব্যর্থ হয়
বাতিঘর পতাকা পৃষ্ঠাগুলিতে মাস্কযোগ্য আইকন সমর্থন নেই:
অডিট পাস করার জন্য:
- একটি ওয়েব অ্যাপ ম্যানিফেস্ট থাকা আবশ্যক৷
- ওয়েব অ্যাপ ম্যানিফেস্টে অবশ্যই একটি
icons
অ্যারে থাকতে হবে৷ -
icons
অ্যারেতে একটিpurpose
সম্পত্তি সহ একটি বস্তু থাকতে হবে এবং সেইpurpose
সম্পত্তির মান অবশ্যইmaskable
অন্তর্ভুক্ত করতে হবে।
কিভাবে আপনার PWA এ মাস্কেবল আইকন সমর্থন যোগ করবেন
- একটি বিদ্যমান আইকনকে একটি মাস্কেবল আইকনে রূপান্তর করতে Maskable.app এডিটর ব্যবহার করুন।
আপনার ওয়েব অ্যাপ ম্যানিফেস্টের
icons
অবজেক্টগুলির একটিতেpurpose
সম্পত্তি যোগ করুন।purpose
মানmaskable
সেট করুন। মান দেখুন।{ … "icons": [ … { "src": "path/to/maskable_icon.png", "sizes": "196x196", "type": "image/png", "purpose": "maskable" } ] … }
মাস্কযোগ্য আইকনটি সঠিকভাবে প্রদর্শিত হচ্ছে কিনা তা যাচাই করতে Chrome DevTools ব্যবহার করুন। দেখুন আমার বর্তমান আইকন প্রস্তুত?