إذا ثبَّت تطبيق ويب تقدّمي (PWA) على هاتف Android حديث، قد تلاحظ أنّ رمز التطبيق له خلفية بيضاء. طرح نظام التشغيل Android 8.0 رمزًا متغيّرًا يعرض رموز التطبيقات بأشكال متنوعة على مختلف طُرز الأجهزة. تكون خلفية الرموز التي لا تستخدم هذا التنسيق بيضاء.
الرموز القابلة للتمويه هي تنسيق رموز جديد لمتصفّحَي Chrome وFirefox يتيح لتطبيقك المتقدّم على الويب استخدام رموز تكيُّفية ويمنحك مزيدًا من التحكّم في مظهر رمزك.
هل رموزي الحالية جاهزة؟
نظرًا لأن الأيقونات القابلة للإخفاء تحتاج إلى دعم مجموعة متنوعة من الأشكال، فأنت بحاجة إلى توفير صورة معتمة مع بعض المساحة المتروكة التي يمكن للمتصفح اقتصاصها للشكل والحجم المطلوبين لأي متصفح أو نظام أساسي.
تتضمّن مواصفات الرموز القابلة للإخفاء حدًا أدنى موحّدًا "للمنطقة الآمنة" تلتزم به جميع المنصات. يجب أن تكون الأجزاء المهمة من الرمز، مثل الشعار، ضمن منطقة دائرية في وسط الرمز بنصف قطر يساوي %40 من عرض الرمز. قد يتم اقتطاع 10% من الحافة الخارجية على بعض المنصات.
يمكنك استخدام "أدوات مطوري البرامج في Chrome" لمعرفة أجزاء رموزك داخل المنطقة الآمنة. مع فتح تطبيق الويب التقدّمي، افتح أدوات مطوّري البرامج وانتقِل إلى التطبيق. في قسم الرموز، يمكنك اختيار عرض أقل منطقة آمنة للرموز القابلة للإخفاء. يؤدي هذا إلى قطع الأيقونات بحيث تظهر المنطقة الآمنة فقط. إذا كان شعارك مرئيًا داخل هذه المنطقة الآمنة، هذا يعني أنّ رمزك جاهز.
لاختبار الرمز القابل للإخفاء باستخدام مجموعة متنوعة من أشكال Android، استخدِم Maskable.app لـ Tiger Oakes. افتح رمزًا وسيتيح لك تطبيق Maskable.app تجربة أشكال وأحجام مختلفة ومشاركة المعاينة مع فريقك.
كيف يمكنني استخدام الرموز القابلة للإخفاء؟
لإنشاء رمز قابل للإخفاء استنادًا إلى رمز حالي، يمكنك استخدام Maskable.app Editor. حمِّل رمزك، واضبط اللون والحجم، ثمّ صدِّر الصورة.
بعد إنشاء رمز قابل للتمويه واختباره في DevTools، عليك تعديل
بيان تطبيق الويب للإشارة إلى مادة العرض الجديدة. يقدّمملف بيان تطبيق الويب معلومات عن تطبيق الويب في ملف JSON، ويضمّ مصفوفة icons.
يُعلم الحقل purpose المتصفّح بطريقة استخدام الرمز. وحسب الإعدادات التلقائية،
يكون الغرض من الرموز "any". في Android، يتم تغيير حجم هذه الرموز على خلفي
ة بيضاء.
{
…
"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") إذا كنت تريد استخدام الرمز القابل للقناع بدون قناع على الأجهزة الأخرى.
الشكر والتقدير
راجع Joe Medley هذه الصفحة.