التوافق مع الرموز التكيُّفية في تطبيقات الويب التقدّمية (PWA) مع رموز قابلة للإخفاء

رموز التطبيقات التي تتكيّف مع الأنظمة الأساسية

توماس شتاينر
تايجر أوكس

ما هي الأيقونات القابلة للإخفاء؟

في حال تثبيت تطبيق ويب تقدّمي على هاتف Android حديث، قد تلاحظ ظهور الرمز بخلفية بيضاء. قدّم Android Oreo الرموز التكيُّفية التي تعرض رموز التطبيقات بأشكال متنوعة على مستوى طُرز الأجهزة المختلفة. يتم منح الأيقونات التي لا تتبع هذا التنسيق الجديد خلفيات بيضاء.

رموز PWA في دوائر بيضاء على Android
تظهر رموز PWA الشفافة داخل دوائر بيضاء على Android.

الرموز القابلة للإخفاء هي تنسيق جديد للرموز يمنحك مزيدًا من التحكّم ويسمح لتطبيق الويب التقدّمي باستخدام الرموز القابلة للتكيف. إذا أرسلت أيقونة قابلة للإخفاء، يمكن أن يملأ الرمز الشكل بالكامل ويبدو رائعًا على جميع أجهزة Android. أتاحت Firefox وChrome مؤخرًا استخدام هذا التنسيق الجديد، ويمكنك استخدامه في تطبيقاتك.

رموز تطبيق الويب التقدّمي (PWA) التي تغطي الدائرة بأكملها على نظام التشغيل Android
بدلاً من ذلك، تغطّي الرموز التكيُّفية الدائرة بأكملها.

هل رموزي الحالية جاهزة؟

نظرًا لأن الرموز القابلة للإخفاء تحتاج إلى دعم مجموعة متنوعة من الأشكال، فإنك توفر صورة معتمة مع بعض المساحة المتروكة التي يمكن للمتصفح اقتصاصها إلى الشكل والحجم المطلوبين. من الأفضل عدم الاعتماد على أي شكل معين، لأن الشكل النهائي يختلف حسب المتصفح والنظام الأساسي.

أشكال مختلفة خاصة بمنصّات معيّنة.

لحسن الحظ، ثمة "حد أدنى للمنطقة الآمنة" وموحّدة ومحددة بشكل جيد وتراعي جميع الأنظمة الأساسية. يجب أن تكون الأجزاء المهمة من الرمز، مثل الشعار، ضمن منطقة دائرية في وسط الرمز مع نصف قطر يساوي 40% من عرض الرمز. قد يتم اقتصاص الحافة الخارجية بنسبة 10%.

يمكنك التحقّق من أجزاء رموزك التي تصل إلى المنطقة الآمنة باستخدام "أدوات مطوري البرامج في Chrome". بعد فتح تطبيق الويب التقدّمي، فعِّل "أدوات مطوري البرامج" وانتقِل إلى لوحة التطبيق. في قسم الأيقونات، يمكنك اختيار إظهار الحد الأدنى من المساحة الآمنة للرموز القابلة للإخفاء فقط. سيتم قص الأيقونات بحيث تظهر المنطقة الآمنة فقط. إذا كان شعارك مرئيًا داخل هذه المنطقة الآمنة، فأنت جاهز.

لوحة التطبيقات في أدوات مطوّري البرامج تعرض رموز PWA مع اقتصاص حوافها
لوحة التطبيقات.

لاختبار رمزك القابل للإخفاء باستخدام أشكال متنوعة من Android، استخدِم أداة Maskable.app التي أنشأها "النمر". افتح أيقونة، وسيسمح لك تطبيق Maskable.app بتجربة أشكال وأحجام مختلفة، ويمكنك مشاركة المعاينة مع الآخرين في فريقك.

كيف يمكنني استخدام الرموز القابلة للإخفاء؟

إذا أردت إنشاء رمز قابل للإخفاء استنادًا إلى رمز حالي، يمكنك استخدام Maskable.app Editor. حمّل الأيقونة، واضبط اللون والحجم، ثم صدِّر الصورة.

لقطة شاشة لأداة Maskable.app Editor
إنشاء رموز في 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")، إذا كنت تريد استخدام رمزك القابل للإخفاء بدون قناع على الأجهزة الأخرى.

بهذه الطريقة، يمكنك إنشاء رموزك القابلة للإخفاء والتأكّد من أنّ تطبيقك يبدو رائعًا من البداية إلى النهاية (وبالنسبة إلى القيمة، من دائرة إلى دائرة أو بيضاوية إلى بيضاوية جيب).

شكر وتقدير

راجع هذه المقالة جو ميدلي.