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