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

Thomas Steiner
Tiger Oakes

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

رموز تطبيقات الويب التقدّمية (PWA) في دوائر بيضاء على أجهزة Android
تظهر رموز تطبيقات الويب التقدّمية (PWA) الشفافة داخل دوائر بيضاء على نظام التشغيل Android.

الرموز القابلة للإخفاء هي تنسيق جديد للرموز في Chrome وFirefox والذي يتيح لك يستخدم تطبيق الويب التقدّمي الرموز التكيُّفية ويمنحك المزيد من التحكّم في مظهر الأيقونة.

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

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

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

أشكال الرموز المختلفة الخاصة بالنظام الأساسي

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

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

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

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

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

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

لقطة شاشة لمحرِّر Maskable.app
إنشاء الرموز في "محرِّر Maskable.app"

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