الآن بعد أن أصبح نظام iOS 16.4 متاحًا، استخدمت “إضافة إلى الشاشة الرئيسية” (A2HS) لإضافة عدد من منتديات Discourse إلى شاشة iPhone الرئيسية، بما في ذلك هذا المنتدى، Meta.
عندما أضيف Meta إلى شاشتي الرئيسية على نظام iOS، يبدو الأمر كالتالي:
(من المؤسف أن Apple لا تتركه شفافًا! هذا الرمز يبدو جيدًا جدًا… للحظة.)
أعتقد أن أفضل شيء يمكن فعله هو استبدال “رمز اللمس الخاص بـ Apple” الخاص بـ Meta برمز بدون شفافية. استخدمت أداة القطارة في Photoshop لملء المربع بخلفية سوداء مطابقة، سوداء تقريبًا، مثل هذا:
أقترح كذلك أن تعرض “ديسقورس” (Discourse) أيقونة “apple touch icon” في الإعدادات بخلفية سوداء، لجعل الأمر أكثر وضوحًا لمسؤولي الموقع بشأن ما سيحدث إذا حاولوا استخدام أيقونة شفافة كـ “apple touch icon”.
تحرير: سيكون أفضل إذا عرضت إعدادات المسؤول أيقونة “apple touch icon” بزوايا مستديرة وخلفية سوداء، حتى يتمكن مسؤولو الموقع من رؤية أن الصورة ستحتوي على نصف قطر زاوية مقدم من Apple. كان لدى منتدى آخر كنت عليه أيقونة “apple touch icon” بحد ملون، وبالطبع بدت فظيعة عندما أضافت Apple نصف قطر الزاوية…
هذه المنطقة المحيطة باللون هي جزء من الشعار على الرغم من ذلك. لست متأكدًا من أن اللون الأسود على الأسود يبدو صحيحًا على الإطلاق. اللون الرمادي الداكن على الأسود يبدو أفضل من البديل. هذه المنطقة تشكل حرف D من Discourse، بدونها كل ما نراه هو فقاعات كلام متداخلة.
تم تغيير الشعار لأن ملف PNG الشفاف الذي تم استخدامه سابقًا، عند تثبيته على الشاشة الرئيسية، كان سيستبدل الشفافية باللون الأسود مما كان يحجب جزءًا من الشعار فعليًا.
تم استبداله بأيقونة تستخدم خلفية بيضاء صريحة حتى يتم عرض الشعار بشكل صحيح عند تثبيته على الشاشة الرئيسية.
في الواقع، اعتقدت أن هذا هو السبب وراء وجود إعدادين منفصلين لـ Discourse، “أيقونة البيان” و “أيقونة اللمس الخاصة بـ Apple”، لأن Apple تتجاهل الشفافية وتطبق إخفاء الزوايا المستديرة، بينما يُفترض أن تتبع المتصفحات الأخرى معيار Web Manifest، مما يسمح بالشفافية.
كلا من Chrome (أيقونات علامات التبويب في Android) و Firefox (صفحة بدء علامات التبويب) يستخدمان أيقونة apple-touch-icon كإصدار عالي الدقة للأيقونة المفضلة (favicon)، وكلاهما تأثر بهذا التغيير.
على حد علمي، يتم استخدام ذلك فقط لميزات تطبيقات الويب التقدمية (PWA)، مثل الأيقونة عند إضافتها إلى الشاشة الرئيسية.
لاحظت للتو أن أيقونة PWA لنظام Android لهذا المنتدى معطلة أيضًا.
لقد قمت بتشغيل Android Studio وإطلاق محاكي Pixel 4 يعمل بنظام Android API 31، وقمت بتثبيت أحدث إصدار من Google Chrome، وقمت بتثبيت Meta على الشاشة الرئيسية. تبدو الأيقونة هكذا:
كما أفهم، تكمن المشكلة في أن ملف https://meta.discourse.org/manifest.webmanifest يحتوي على مساحة توفر أيقونتين، واحدة للغرض “any” (أي)، وأخرى للغرض “maskable” (قابل للإخفاء). يؤكد أيقونة “maskable” أنه لا بأس من اقتطاع دائرة بنصف قطر 40% منها.
لحسن الحظ، هناك “منطقة آمنة دنيا” محددة جيدًا وموحدة تحترمها جميع المنصات. يجب أن تكون الأجزاء المهمة من أيقونتك، مثل شعارك، ضمن منطقة دائرية في وسط الأيقونة بنصف قطر يساوي 40% من عرض الأيقونة. قد يتم اقتطاع الحافة الخارجية بنسبة 10%.
يمكنك التحقق من الأجزاء التي تقع ضمن المنطقة الآمنة من أيقوناتك باستخدام Chrome DevTools. مع فتح تطبيق الويب التقدمي (Progressive Web App)، قم بتشغيل DevTools وانتقل إلى لوحة Application (التطبيق). في قسم Icons (الأيقونات)، يمكنك اختيار Show only the minimum safe area for maskable icons (إظهار المنطقة الآمنة الدنيا فقط للأيقونات القابلة للإخفاء). سيتم قص أيقوناتك بحيث تظهر المنطقة الآمنة فقط. إذا كان شعارك مرئيًا ضمن هذه المنطقة الآمنة، فأنت على ما يرام.
إليك كيف تبدو لوحة Meta’s Manifest في Chrome Dev Tools عند تحديد “Show only the minimum safe area for maskable icons” (إظهار المنطقة الآمنة الدنيا فقط للأيقونات القابلة للإخفاء):
نظرًا لأن الأيقونة يفترض أن تكون قابلة للإخفاء، فإن Android/Chrome يقتطع جزءًا دائريًا من المنتصف، مما يؤدي إلى نتائج سيئة.
لقد اختبرت باستخدام أيقونة Apple Touch Icon، والتي وصفها @Stephen بأنها “تغمرها بحر من البياض”، كأيقونة manifest قابلة للإخفاء في Chrome Dev Tools. ولكن حتى هذه الأيقونة أكبر قليلاً من الحجم القياسي القابل للإخفاء… يتم اقتطاع الزاوية السفلية اليسرى.
هل يمكنك العثور على أي وثائق حول الأيقونة التي يستخدمها Firefox لصفحة بدء علامات التبويب؟
إذا لم يكن Firefox يستخدم أيقونة البيان (Manifest icon) لصفحة بدء علامات التبويب، فأنا أتوقع أنه سيستخدم أحد أيقونات <link rel=icon> على الأقل.
ربما يعود Firefox إلى أيقونة apple touch لأن <link rel=icon> صغير جدًا؟
كما تعلم، يُسمح لك بالحصول على عناصر <link rel=icon> متعددة، مع سمات sizes متعددة. أعتقد أنه سيكون من المنطقي وجود عنصرين <link rel=icon>، الأول يشير إلى الأيقونة المفضلة (favicon)، والثاني يشير إلى أيقونة البيان (manifest icon) مع sizes أكبر. أراهن أن هذا سيجعل Firefox يستخدم الأيقونة الأفضل والأكبر.
بشكل أعم، أعتقد أن الدرس المستفاد من هذه القصة هو:
هذا في الواقع مشروع نوعًا ما، معرفة الأيقونات التي يتم استخدامها في كل مكان ولماذا.
موقع مسؤول Discourse لا يقدم للمسؤولين ما يكفي من الإرشادات للقيام بذلك بشكل صحيح.
يجب أن يقوم موقع المسؤول بما يلي:
حظر الشفافية في أيقونات البيان (manifest icons) وأيقونات apple-touch-icon.
عرض أيقونة البيان (manifest icon) بدائرة نصف قطرها 40٪، كما تفعل أدوات مطوري Chrome.
عرض أيقونة apple-touch-icon بحدود مستديرة، بالطريقة التي تفعلها Apple.
مع توفير هذه المرافق، أعتقد أن المصمم يمكنه البدء في محاولة معالجة مشكلة تحميل الأيقونات التي تبدو جيدة في كل من:
iOS A2HS (الإضافة إلى الشاشة الرئيسية)
Android A2HS (الإضافة إلى الشاشة الرئيسية)
صفحات بدء علامات التبويب لـ Firefox و Chrome و Safari
