تغيير لون شريط التنقل السفلي للجوال

من المفترض أن أطلق الموقع بشكل رسمي اليوم، وأرسل رسائل البريد الإلكتروني وأجعل الناس يقومون بتثبيت تطبيق الويب التقدمي :rofl::rofl::rofl:

أتفهم إحباطك، ولكن هذه ليست إجابة مفيدة للغاية.

كل ما يمكنني قوله في الوقت الحالي هو أنه يبدو أن هناك شيئًا ما يعدل السلوك الطبيعي.

هل يمكنك التحقق من المكونات الإضافية أو مكونات السمات التي قمت بتثبيتها؟ هل أضفت أي تخصيصات أخرى؟

ليس موقعي فقط. إنه أي موقع ديسكورس؟؟؟

لقد شرحت بالفعل سبب كون هذا هو الحال في Discourse ولكن ليس في المواقع الأخرى.

نظرًا لأنك عميل، يمكننا بالفعل رؤية الموقع الذي ترتبط به. ألوان الأزرار هي نفسها تمامًا كما في لقطة الشاشة التي شاركتها سابقًا. ليست فاتحة اللون مثل ألوانك.

إنه نفس الشيء في السمة الافتراضية بدون أي تخصيص أو مكونات

إعجاب واحد (1)

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

S ultra 22

Huawei mate20 pro

ومع ذلك، نتفهم أن التجربة ليست مثالية عند استخدام PWA مع سمة Discourse داكنة بينما نظام تشغيل Android في الوضع الفاتح. كما قلت، سنفتح مناقشة داخلية مع المطورين والمصممين لدينا لاستكشاف كيف يمكننا تحسين هذا السيناريو في التحديثات المستقبلية.

إعجاب واحد (1)

هذا غريب ويتناقض مع ما قلته. إنه مثل الحظ أو الخطأ هههه.

هذا هاتف سامسونج S24 في الوضع الفاتح

هذا هاتف جوجل بيكسل في الوضع الفاتح

لم يتم تحميل الشريط على أحد أجهزة الآيفون على الإطلاق، على غرار مشكلة @chapoi المذكورة أعلاه.

قام هاتف سامسونج S22 أقدم بتحميل الشريط السفلي باللون الأبيض والأيقونات الداكنة بشكل صحيح. لدي 10 أشخاص آخرين سيجرون اختبارًا لاحقًا وسأقوم بتحديث المزيد.

إعجاب واحد (1)

أعتقد أن متصفح Chrome يمكنه التعامل مع الأمر في بعض الحالات، اعتمادًا على إصدار Android والجهاز وما إلى ذلك…

في PWA، يقوم <meta name="theme-color"> بتغيير لون شريط العنوان العلوي بشكل موثوق به في Chrome على Android. يؤثر theme_color في manifest.json على شريط الحالة وأحيانًا على أجزاء أخرى من واجهة المستخدم، ولكن السلوك يختلف حسب الجهاز والمتصفح وإصدار Android.

عادةً لا يمكن التحكم في شريط التنقل السفلي الأصلي من تطبيق ويب. قد تطبق بعض المتصفحات لون السمة، ولكن هذا غير مضمون.

:up_arrow: هذا هو أحد الأسباب التي دفعتني إلى تحويل موقعي إلى TWA، باستخدام Bubblewrap، والذي يمكنه أيضًا التعامل مع ألوان شريط التنقل السفلي.

لذلك مع PWA، يمكنك تصميم الشريط العلوي، ولكن التحكم في شريط التنقل السفلي غير متسق.


لن يقوم iPhone بتحميل شريط التنقل هذا لأن هذا عنصر أصلي في نظام تشغيل Android.

إعجابَين (2)

الأمر غريب فقط، لم أواجه هذه المشكلة من قبل. لقد استخدمت ووردبريس سوبر PWA على 9 مواقع ولم أواجه مشكلة أبدًا. فقط مشكلة الخطاب. كما ذكرت أنك واجهت نفس مشكلة عدم الاتساق، آمل أن يتمكنوا من جعل نمط الشريط السفلي هو نفسه الشريط العلوي لأنه يعمل كما هو متوقع على كل جهاز.

@dax @chapoi أغرب من ذلك. إذا قمت بتثبيت تطبيق الويب التقدمي (PWA) على هاتفي عبر فايرفوكس، فإنه يعمل بشكل مثالي. على الأقل يمكنني رؤية الأزرار السفلية الآن.

هذا في الوضع الفاتح

إعجاب واحد (1)

السبب في أنه يعمل على فايرفوكس وليس كروم يتعلق بكيفية تعامل كل متصفح مع تطبيقات الويب التقدمية (PWAs) على نظام أندرويد، لأن كروم ينظر فقط إلى theme_color في بيان تطبيق الويب (Web App Manifest) لتلوين شريط النظام. إذا لم يتم تقديم البيان من النطاق الجذر للموقع أو لم يكن يحتوي على اللون الصحيح، يعود كروم إلى اللون الأبيض. فايرفوكس أكثر مرونة ويأخذ الألوان من الصفحة نفسها، لذلك يبدو الشريط صحيحًا حتى بدون بيان مخصص.

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

كيف يمكننا جعل الشريط السفلي #121212 في تطبيق الويب التقدمي (PWA) على Chrome، حيث أن وجود تطبيق قابل للتثبيت مهم بالنسبة لنا؟

الموقع الداكن والشريط السفلي الفاتح مشتتان للغاية ويبدوان فظيعين.

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

متابعة سريعة. تم تعيين هذا الآن لمهندس للمراجعة. ومع ذلك، ضع في اعتبارك أن اجتماع Discourse السنوي يقترب قريبًا جدًا، لذلك لا أعتقد أنه ستكون هناك أي تحديثات على المدى القصير (بالمعنى القصير، أعني “أيام”).

5 إعجابات