প্ল্যাটফর্মের সাথে মানিয়ে নেওয়া অ্যাপ আইকন।
মাস্কেবল আইকন কি?
আপনি যদি সাম্প্রতিক অ্যান্ড্রয়েড ফোনে একটি প্রগ্রেসিভ ওয়েব অ্যাপ ইনস্টল করে থাকেন তবে আপনি লক্ষ্য করতে পারেন যে আইকনটি একটি সাদা ব্যাকগ্রাউন্ডের সাথে দেখা যাচ্ছে। অ্যান্ড্রয়েড ওরিও অভিযোজিত আইকন প্রবর্তন করেছে, যা বিভিন্ন ডিভাইস মডেল জুড়ে বিভিন্ন আকারে অ্যাপ আইকন প্রদর্শন করে। যে আইকনগুলি এই নতুন বিন্যাসটি অনুসরণ করে না তাদের সাদা ব্যাকগ্রাউন্ড দেওয়া হয়।
মাস্কেবল আইকন হল একটি নতুন আইকন বিন্যাস যা আপনাকে আরও নিয়ন্ত্রণ দেয় এবং আপনার প্রগতিশীল ওয়েব অ্যাপকে অভিযোজিত আইকন ব্যবহার করতে দেয়। আপনি যদি একটি মাস্কযোগ্য আইকন সরবরাহ করেন, তাহলে আপনার আইকনটি সম্পূর্ণ আকৃতি পূরণ করতে পারে এবং সমস্ত Android ডিভাইসে দুর্দান্ত দেখতে পারে৷ ফায়ারফক্স এবং ক্রোম সম্প্রতি এই নতুন ফর্ম্যাটের জন্য সমর্থন যোগ করেছে এবং আপনি এটি আপনার অ্যাপে গ্রহণ করতে পারেন।
আমার বর্তমান আইকন প্রস্তুত?
যেহেতু মুখোশযোগ্য আইকনগুলিকে বিভিন্ন আকারের সমর্থন করতে হবে, আপনি কিছু প্যাডিং সহ একটি অস্বচ্ছ চিত্র সরবরাহ করুন যা ব্রাউজার প্রয়োজনীয় আকার এবং আকারে কাটতে পারে। কোনো নির্দিষ্ট আকৃতির উপর নির্ভর না করাই ভালো, যেহেতু চূড়ান্ত আকৃতি ব্রাউজার এবং প্ল্যাটফর্ম অনুসারে পরিবর্তিত হয়।
ভাগ্যক্রমে, একটি সুসংজ্ঞায়িত এবং মানসম্মত "ন্যূনতম নিরাপদ অঞ্চল" রয়েছে যা সমস্ত প্ল্যাটফর্ম সম্মান করে। আপনার আইকনের গুরুত্বপূর্ণ অংশগুলি, যেমন আপনার লোগো, আইকনের মাঝখানে একটি বৃত্তাকার এলাকায় থাকা উচিত যার ব্যাসার্ধ আইকনের প্রস্থের 40% এর সমান। বাইরের 10% প্রান্তটি কাটা হতে পারে।
আপনি Chrome DevTools-এর সাহায্যে আপনার আইকনগুলির কোন অংশ নিরাপদ অঞ্চলের মধ্যে রয়েছে তা পরীক্ষা করতে পারেন৷ আপনার প্রগতিশীল ওয়েব অ্যাপ খোলার সাথে, DevTools চালু করুন এবং অ্যাপ্লিকেশন প্যানেলে নেভিগেট করুন। আইকন বিভাগে, আপনি মাস্কযোগ্য আইকনগুলির জন্য শুধুমাত্র ন্যূনতম নিরাপদ এলাকা দেখাতে বেছে নিতে পারেন। আপনার আইকন ছাঁটা হবে যাতে শুধুমাত্র নিরাপদ এলাকা দৃশ্যমান হয়। যদি আপনার লোগোটি এই নিরাপদ এলাকার মধ্যে দৃশ্যমান হয়, তাহলে আপনি যেতে পারবেন।
আপনার মাস্কেবল আইকনটি বিভিন্ন Android আকারের সাথে পরীক্ষা করতে, Maskable.app টুল টাইগার তৈরি ব্যবহার করুন। একটি আইকন খুলুন, তারপর Maskable.app আপনাকে বিভিন্ন আকার এবং আকার ব্যবহার করতে দেবে এবং আপনি আপনার দলের অন্যদের সাথে পূর্বরূপ ভাগ করতে পারবেন।
আমি কিভাবে মাস্কেবল আইকন গ্রহণ করব?
আপনি যদি বিদ্যমান আইকনের উপর ভিত্তি করে একটি মাস্কেবল আইকন তৈরি করতে চান, তাহলে আপনি Maskable.app এডিটর ব্যবহার করতে পারেন। আপনার আইকন আপলোড করুন, রঙ এবং আকার সামঞ্জস্য করুন, তারপর ছবিটি রপ্তানি করুন।
একবার আপনি একটি মুখোশযোগ্য আইকন তৈরি করেছেন এবং এটি DevTools-এ পরীক্ষা করেছেন, আপনাকে নতুন সম্পদের দিকে নির্দেশ করতে আপনার ওয়েব অ্যাপ ম্যানিফেস্ট আপডেট করতে হবে। ওয়েব অ্যাপ ম্যানিফেস্ট একটি JSON ফাইলে আপনার ওয়েব অ্যাপ সম্পর্কে তথ্য প্রদান করে এবং একটি icons অ্যারে অন্তর্ভুক্ত করে।
মাস্কযোগ্য আইকন অন্তর্ভুক্ত করার জন্য, purpose ক্ষেত্রটি ব্রাউজারকে বলে যে আপনার আইকনটি কীভাবে ব্যবহার করা উচিত। ডিফল্টরূপে, আইকনগুলির একটি উদ্দেশ্য থাকবে "any" । এই আইকনগুলি অ্যান্ড্রয়েডে একটি সাদা ব্যাকগ্রাউন্ডের উপরে পুনরায় আকার দেওয়া হবে।
{
…
"icons": [
…
{
"src": "path/to/regular_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "any"
},
{
"src": "path/to/maskable_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "maskable" // <-- New property value `"maskable"`
},
…
],
…
}
মাস্কেবল আইকনগুলির purpose জন্য একটি ভিন্ন মান ব্যবহার করা উচিত: "maskable" । এটি ইঙ্গিত দেয় যে একটি চিত্রকে আইকন মাস্কের সাথে ব্যবহার করার জন্য বোঝানো হয়েছে, যা আপনাকে ফলাফলের উপর আরও নিয়ন্ত্রণ দেয়। এইভাবে, আপনার আইকনগুলির একটি সাদা ব্যাকগ্রাউন্ড থাকবে না। আপনি একাধিক স্থান-বিচ্ছিন্ন উদ্দেশ্যও নির্দিষ্ট করতে পারেন (উদাহরণস্বরূপ, "any maskable" ), যদি আপনি চান যে আপনার মাস্কযোগ্য আইকনটি অন্য ডিভাইসে মাস্ক ছাড়াই ব্যবহার করা হোক।
এটির সাহায্যে, আপনি এগিয়ে যেতে পারেন এবং আপনার নিজস্ব মাস্কযোগ্য আইকন তৈরি করতে পারেন, নিশ্চিত করুন যে আপনার অ্যাপটি এজ-টু-এজ (এবং এটির মূল্য কী, বৃত্ত থেকে বৃত্ত, ডিম্বাকৃতি থেকে ডিম্বাকৃতি 😄)।
স্বীকৃতি
এই নিবন্ধটি জো মেডলি দ্বারা পর্যালোচনা করা হয়েছে।