گوگل کروم ۷۹ هم منتشر شد و از ویژگی پشتیبانی می کند تحت عنوان Maskable Icons که در این مقاله قرار است در رابطه با آن صحبت کنیم. اگر اندروید نسخه O و یا یکی از نسخه های بعد از آن را نصب دارید و اپلیکیشن وب پیش رونده یا Progressive یا اختصاراً PWA نصب کرده باشید، احتمالا متوجه دایره آزار دهنده اطراف اکثر ایکون وب اپلیکیشن شده اید.
چرا این اتفاق افتاد؟ خب، اندروید Oreo ویژگی Adaptive icons را ارائه کرده است که اصطلاحا میشود به آن آیکون های متحدالشکل هم گفت. این ویژگی یک فرمت آیکن جدید است که تمام آیکون های روی صفحه خانه اندروید را مجبور می کند که یک شکل باشند(مثلا دایره ای، گوشه گرد و … ). آیکون هایی که از طراحی فرمت جدید پیروی نمی کنند هم چون باید همشکل تمام آیکون ها شوند باید پس زمینه آن شفاف آن سفید شود به همین دلیل به این شکل در می آیند.
آیکون های maskable چه نوع آیکون هایی هستند؟
راهکاری که به ذهن می رسد این است که یا کل آیکون های اپلیکیشن را به گونه ای طراحی کنیم که با هر شکلی سازگار باشد که اینطور باید دور آیکون های با پس زمینه شفاف را کلا خط بکشیم و از آن استفاده نکنیم و دیگر اینکه از این مدل آیکون استفاده نکنیم. یا اگر بخواهیم از آیکون با پس زمینه شفاف استفاده کنیم باید پس زمینه سفید را درنسخه های جدید تحمل کنیم.
اما راهکار بهتری هم وجود دارد. اینکه ما هردو نوع آیکون را طراحی و آماده کنیم و در اندروید نسخه جدید از نسخه متناسب با شکل های گوشه گرد و گرد استفاده کنیم و در نسخه های قدیمی هم از تصویر با پس زمینه شفاف. اما چگونه؟
در اینجاست که مفهوم جدید Maskable Icons مطرح می شود. به طور خلاصه این مفهوم یعنی آیکون ها طوری طراحی شوند که با هر مدل شکل آیکون مثلا گوشه گرد یا کلا گرد مفوم و طرح آیکون به هم نریزد. یا اگر با مفهوم ماسک در فتوشاپ آشنا هستید آیکون ها طوری طراحی شوند در صورت قرار گرفتن هر نوع ماسک طرح کامل باشد. به شکل های زیر دقت کنید:
در هر دو شکل آیکون ها طوری طراحی و فضادهی شده اند که با تبدیل آیکون به هر شکل مفوم آیکون و طرح کاملا حفظ می شود. به این مدل آیکون ها Maskable می گویند یعن قابلیت عدم نمایش برخی از بخش هایشان را دارند.
پس هر زمان که بخواهیم از آیکون های Maskable استفاده کنیم که از انواع شکل ها پشتیبانی کند و طرح آیکون حفظ شود به یک سری موارد در طراحی باید دقت کنیم:
عکس و هسته اصلی آیکون باید کاملا کدر، واضح و در وسط طرح قرار گیرد و حتما دقت داشته باشید که آیکون باید از گوشه های خود فاصله مشخصی داشته باشد چرا که در زمان برش یا کراپ شدن تمام آیکون حفظ شود و بخش از خود طرح اصلی برش نخورد. خوشبختانه این اندازه ها به یک استاندارد تبدیل شده و با این کار دیگر آیکون می تواند به هر شکلی درآید و در مرورگرهای مختلف هم پشتیبانی شود.
اصطلاحا ما به این فضایی که آیکون می تواند در آن قرار گیرد و با برش و تغییر شکل به هم نخورد محدوده امن می گوییم.
در مرورگر کروم برای این نوع آیکون هم ابزار خاصی قرار داده شده که می توانید آیکون طراحی شده را تست کنید و جایگذاری در محدوده ان را ببینید. برای این کار ابزار توسعه کروم را بازکنید(میانبر F12) و از بخش Application و زیر بخش manifest تیک گزینه show only the minimum safe area for maskable را فعال کنید و ببینین که آیا لوگوی شما داخل محدوده امن هست و کاملا قابل مشاهده؟ پس کار خود را ادامه دهید در غیر این صورت لوگوی خود را اصلاح کنید
اگر می خواهید پیش نمایش آیکون های Maskable خود را در سایر اشکال در اندروید مشاهده کنید ابزاری تحت عنوان Maskable app وجود دارد که به شما اجازه می دهد تا تمام شکل های مختلف را بررسی و نتایج را با سایر اعضای تیمتان به اشتراک بگذارین
چگونه آیکون های خود به Maskable Icon تبدیل کنیم؟
اگر می خواهید یک آیکون با شکل و شمایلی که می خواهید ایجاد کنید می توانید از ویرایشگر Maskable.app استفاده کنید. آیکون خود را آپلود کنید، رنگ و اندازه آن را تنظیم و سپس از عکس خروجی بگیرید.
یک بار که یک آیکون Maskable تولید کنید و خارج از ابزار توسعه آزمایش کنید باید فایل مانیفست اپلیکیشن وب خود را هم برای اشاره به آیکون جدید به روز کنید. مانیفست اپلیکیشن وب در قالب یک فایل Json اطلاعاتی را در باره اپلیکیشن وب شما ارئه می دهد و شامل یک آرایه از آیکون هاست.
با اضافه شدن آیکون های Maskable یک مقدار ویژگی جدید به لیست آیکون های ما در فایل مانیفست اپلیکیشن وب ما اضافه می شود. فیلد purpose به مرورگر می گویند که این آیکون باید چگونه استفاده شود. به طور پیشفرض، آیکون ها مقدار purpose آن any است. این آیکون ها روی یک پس زمینه سفید در نرم افزار اندروید تغییر اندازه می دهند.
آیکون های Maskable باید مقدار purpose متفاوت داشته باشد: maskable. با این ویژگی به مرورگر میگوییم در صورتی که سیستم کاربر از آیکون های منطبق یا Adaptive Icons استفاده کرد(یعنی خود سیستم به خاطر یک شکل کردن آیکون ها شکل آن را دایره یا گوشه گرد کرد) از این آیکون استفاده کن. به این روش دیگر هیچگاه از آیکون های پس زمینه شفاف شما استفاده نخواهد شد که پس زمینه سفید زننده به آن بدهد و در این شرایط از آیکونی که خود شما برای ان پس زمینه تعیین کرده اید استفاده خواهد شد
{
…
"icons": [
…
{
"src": "path/to/maskable_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "any maskable" // <-- New property value `"maskable"`
}
]
…
}